你的位置:首页 > 网页设计

[网页设计]css编译工具Sass中混合宏,继承,占位符分别在什么时候使用


//SCSS中混合宏使用@mixin mt($var){ margin-top: $var; }.block { @include mt(5px); span {  display:block;  @include mt(5px); }}.header { color: orange; @include mt(5px); span{  display:block;  @include mt(5px); }}

1、上面是sass混合宏方法编写的sass代码,下面是编译出来的css代码

.block { margin-top: 5px;}.block span { display: block; margin-top: 5px;}.header { color: orange; margin-top: 5px;}.header span { display: block; margin-top: 5px;}

上面代码中可以看出,sass混合宏编写不会自动合并相同的样式代码,如果在样式文件中调用同一个混合宏,会产生多个对应的样式代码,造成代码的冗余,这也是无法忍受的一件事情。不过他并不是一无事处,他可以传参数;比如

@mixin br($rad){  border-radius:$rad;  -webkit-border-radius:$rad;  -moz-border-radius:$rad;  -ms-border-radius:$rad;}.md{  @include br(20px);}

2、下面是Sass中的继承

//SCSS 继承的运用.mt{ margin-top: 5px; }.block { @extend .mt; span {  display:block;  @extend .mt; }}.header { color: orange; @extend .mt; span{  display:block;  @extend .mt; }}

下面是编译出来的css代码

.mt, .block, .block span, .header, .header span { margin-top: 5px;}.block span { display: block;}.header { color: orange;}.header span { display: block;}

使用继承后,编译出来的 CSS 会将使用继承的代码块合并到一起,通过组合选择器的方式向大家展现,比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多,也是我们期望看到。但是他不能传变量参数。所以如果你的代码块不需要专任何变量参数,而且有一个基类已在文件中存在,那么建议使用 Sass 的继承。

3、占位符

%mt{ margin-top: 5px; }.block { @extend %mt; span {  display:block;  @extend %mt; }}.header { color: orange; @extend %mt; span{  display:block;  @extend %mt; }}

占位符编译出来的 CSS 代码和使用继承基本上是相同,只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的,“占位符是独立定义,不调用的时候是不会在 CSS 中产生任何代码;继承是首先有一个基类存在,不管调用与不调用,基类的样式都将会出现在编译出来的 CSS 代码中。”