良许Linux教程网 干货合集 详解Sass @mixin 与 @include

详解Sass @mixin 与 @include

Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目

详解Sass @mixin 与 @include

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

@include 指令可以将混入(mixin)引入到文档中。

定义一个混入

混入(mixin)通过 @mixin 指令来定义。 @mixin name { property: value; property: value; … } 以下实例创建一个名为 “important-text” 的混入:

Sass 代码:

@mixin important-text {
 color: red;
 font-size: 25px;
 font-weight: bold;
 border: 1px solid blue;
}

注意:Sass 的连接符号 – 与下划线符号 _ 是相同的,也就是 @mixin important-text { } 与 @mixin important_text { } 是一样的混入。

使用混入

@include 指令可用于包含一混入:

Sass @include 混入语法:

selector {
 @include mixin-name;
}

因此,包含 important-text 混入代码如下:

实例

.danger {
 @include important-text;
 background-color: green;
}

将以上代码转换为 CSS 代码,如下所示:

Css 代码:

.danger {
 color: red;
 font-size: 25px;
 font-weight: bold;
 border: 1px solid blue;
 background-color: green;
}

混入中也可以包含混入,如下所示:

实例

@mixin special-text {
 @include important-text;
 @include link;
 @include special-border;
}

向混入传递变量 混入可以接收参数。

我们可以向混入传递变量。

定义可以接收参数的混入:

实例

/* 混入接收两个参数 */
@mixin bordered($color$width) {
 border: $width solid $color;
}

.myArticle {
 @include bordered(blue, 1px);  // 调用混入,并传递两个参数
}

.myNotes {
 @include bordered(red, 2px); // 调用混入,并传递两个参数
}

以上实例的混入参数为设置边框的属性 (color 和 width) 。

将以上代码转换为 CSS 代码,如下所示:

Css 代码:

.myArticle {
 border: 1px solid blue;
}

.myNotes {
 border: 2px solid red;
}

混入的参数也可以定义默认值,语法格式如下:

实例

@mixin bordered($color: blue, $width: 1px) {
 border: $width solid $color;
}

在包含混入时,你只需要传递需要的变量名及其值:

实例

@mixin sexy-border($color$width: 1in) {
 border: {
   color: $color;
   width: $width;
   style: dashed;
 }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

将以上代码转换为 CSS 代码,如下所示:

Css 代码:

p {
 border-color: blue;
 border-width: 1in;
 border-style: dashed; }

h1 {
 border-color: blue;
 border-width: 2in;
 border-style: dashed;
}

可变参数

有时,不能确定一个混入(mixin)或者一个函数(function)使用多少个参数,这时我们就可以使用 … 来设置可变参数。

例如,用于创建盒子阴影(box-shadow)的一个混入(mixin)可以采取任何数量的 box-shadow 作为参数。

实例

@mixin box-shadow($shadows...) {
     -moz-box-shadow: $shadows;
     -webkit-box-shadow: $shadows;
     box-shadow: $shadows;
}

.shadows {
 @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

将以上代码转换为 CSS 代码,如下所示:

Css 代码:

.shadows {
 -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
 -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
 box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

浏览器前缀使用混入 浏览器前缀使用混入也是非常方便的,如下实例:

实例

@mixin transform($property) {
 -webkit-transform: $property;
 -ms-transform: $property;
 transform: $property;
}

.myBox {
 @include transform(rotate(20deg));
}

将以上代码转换为 CSS 代码,如下所示:

Css 代码:

.myBox {
 -webkit-transform: rotate(20deg);
 -ms-transform: rotate(20deg);
 transform: rotate(20deg);
}

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

1ad5ad6eddc451da964a8888a6fd5266d0163210
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部