学习Sass 之 混合宏@mixin、继承@extend、占位符%placeholder(1/2)

本篇文章主要介绍了"学习Sass 之 混合宏@mixin、继承@extend、占位符%placeholder"，主要涉及到方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 1. @mixin混合宏如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。特点：可传参。不足：如果在样式文件中调用同一个混合宏，会产生多个对应的样式...

1. @mixin混合宏

如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。
特点：可传参。
不足：如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余。

SCSS：

.fl{
  @include float(left)
  div{
    @include float(left)
  }
}
.fr{
  @include float(right)
}

实际生成的CSS：

.fl { float: left; }
.fl div { float: left; }
.fr { float: right; }

而我想要的是这样的CSS：

.fl, .fl div { float: left; }
.fr { float: right; }
//相同的`CSS`不会合并...看来'你'也就只有传参好使了！

SCSS：

@mixin br3{ /* 没有传参 */
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
@mixin br4($br4){ /* 传一个不带值的参数 */
    -webkit-border-radius: $br4;
    border-radius: $br4;
}
@mixin br6($br6: 6px){ /* 传一个带值的参数 */
    -webkit-border-radius: $br6;
      border-radius: $br6;
}
@mixin position-center($width, $height){ /* 传多个参数 */
    width: $width;
    height: $height;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: (-($height)/2) 0 0 (-($width)/2);    
}
div{
    @include br4(4px); /* 调用混合宏 */
    @include br3();   /* 没有传值3px */
    @include br6();   /* 如果不传值就是6px,传值会覆盖原始值 */
}
.pos-center{
    @include position-center(600px, 300px);
}

2. @extend()继承

如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 继承。
不足：如果是类(.class)，不管有没有调用(@extend)，在编译的时候，都会生成对应的CSS。

.db{ display:block; }
div{ @extend .db }
生成的代码：
.db, div{ display:block; } /* .db也生成出来 */

SCSS：

@mixin border-radius{
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.btn {
  @include border-radius;
}
.box {
  @extend .btn;
  margin-bottom: 10px;
}

CSS：

/* 生成后的代码 */
.btn, .box {  -webkit-border-radius: 3px;  border-radius: 3px; }
.box { margin-bottom: 5px; }

3. 占坑符%placeholder