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; }

 

posted on   独自去流浪  阅读(3056)  评论(0编辑  收藏  举报

编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 手把手教你更优雅的享受 DeepSeek
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库
· 乌龟冬眠箱湿度监控系统和AI辅助建议功能的实现
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示