Sass混合指令@mixin和@include用法示例
Sass混合指令 @mixin和@include 用法示例
本文内容来自官网文档:https://www.sass.hk/docs/
混合指令(Mixin)用于定义可重复使用的样式,避免了使用无语意的class,比如.float-left。混合指令可以包含所有的CSS规则,绝大部分Sass规则,甚至通过参数功能引入变量,输出多样化的样式。
定义混合指令@mixin
mixin.scss
@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; }
引用混合指令@include
使用@include指令引用混合样式,格式是在其后添加混合名称,以及需要的参数(可选)。
main.scss
@import "mixin"; .page-title { @include large-text; padding: 4px; margin-top: 10px; }
编译为:
.page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 手把手教你更优雅的享受 DeepSeek
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库
· 乌龟冬眠箱湿度监控系统和AI辅助建议功能的实现