个性化阅读
专注于IT技术分析

Sass的混合用法详解

Sass Mixins可帮助你制作要在站点上重复使用的CSS声明组。你甚至可以根据需要传递值, 以使混合更灵活。

mixin可以存储多个值或参数以及调用函数, 以避免编写重复的代码。混合名称可以互换使用下划线和连字符。

让我们以边界半径为例。此示例指定如何在边界半径中使用mixin以便在你的网站中重复使用它。

SCSS语法:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
.box { @include border-radius(10px); }

等效的Sass语法:

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius
.box
  +border-radius(10px)

在这里, 我们使用mixin指令, 并给它命名为border-radius。括号内使用变量$ radius根据或需要传递半径。创建mixin之后, 你可以将其用作CSS声明。它以@include开头, 后跟mixin的名称。生成的CSS将如下所示:

CSS语法:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Mixin中存在的指令列表:

Index Directive Description
1. 定义一个mixin @mixin指令用于定义mixin。
2. Including a mixin @include指令用于在文档中包含混合。
3. Arguments Argments是SassScript值, 可以在包含mixin并将其作为变量使用时在mixins中采用。
4. 将内容块传递给Mixin 它指定传递给mixin的样式块。
赞(0) 打赏
未经允许不得转载:srcmini » Sass的混合用法详解
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏