CSS外挂:Sass 之混合宏(@mixin)、继承(@extend)、占位符(%placeholder)

学习Sass无非就是想高效的、 面向对象编写CSS,Sass中的@-Rules也是重要的一部分。
普遍情况下这仨在实际项目中用得还是比较多的,玩起来吧!

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{ /* 没有传参 */
    border-radius: 3px;
}
@mixin br4($br4){ /* 传一个不带值的参数 */
    border-radius: $br4;
}
@mixin br6($br6: 6px){ /* 传一个带值的参数 */
      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

占坑和继承基本类似,唯一不同的是,相同的生成CSS块并没有在类中存在,而是额外声明。
如果不调用已声明的占位符,将不会产生任何CSS。
如果在不同选择器调用占位符,那么编译出来CSS将会把相同的代码合并在一起。
不足:就是不能传参啦!个人觉得%placeholder优于@extend

SCSS:

%mt15 {
  margin-top: 15px;
}
%pt15{
  padding-top: 15px;
}

.btn6 {
  @extend %mt15;
  @extend %pt15;
}
.block {
  //@extend .btn6    
  @extend %mt15;
  @extend %pt15;
}

CSS:

/* 生成的代码 */
.btn6, .block { margin-top: 15px; }
.btn6, .block { padding-top: 15px; }
/* 然而不会和已有代码合并,倒是合并啊 */

4. Reference API

SASS_REFERENCE — Sass Documentation #Directives

注:为了第一篇文章发布成功,回头整理整理SASS。
如有不正之处,欢迎指正。

    原文作者:电波马达
    原文地址: https://segmentfault.com/a/1190000004688781
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞