css编译工具Sass中混合宏，继承，占位符分别在什么时候使用(1/2)

本篇文章主要介绍了"css编译工具Sass中混合宏，继承，占位符分别在什么时候使用"，主要涉及到方面的内容，对于HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： //SCSS中混合宏使用@mixin mt($var){ margin-top: $var; } .block { @include mt(5px);sp...

//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代码