最近的项目中在用sass写组件,需要用到其中的Mixinplaceholder

混合器Mixin

一般情况下都是用@mixin来定义一些公共的 css 属性,可以传入参数,在写其他的 css 时可用@include来引入这些公共的 css 属性。可以用更少的代码来完成更多的样式。

@mixin button-size($width,$height) {
	width: $width;
	height: $height;
}

定义了一个名叫button-size的混合器,然后就可用@include引入到其他的css中。

.btn-s {
    @include button-size(80px,25px)
}

.btn-l {
    @include button-size(200px,40px)
}

// 编译后 =>

.btn-s {
    width: 80px;
  	height: 25px;
}

.btn-l {
    width: 200px;
  	height: 40px;
}

这时候就生成了两个不同大小的按钮,如果你还想加上其他样式,但是这些样式都一样,这时候又再定义一个mixin,并引入。

@mixin button-base {
    color: #fff;
    background: #4BACE4;
    border: 1px solid #4BACE4;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}

.btn-s {
    @include button-base;
    @include button-size(80px,25px);
}

.btn-l {
    @include button-base;
    @include button-size(200px,40px);
}


// 编译后 =>

.btn-s {
  color: #fff;
  background: #4BACE4;
  border: 1px solid #4BACE4;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  width: 40px;
  height: 25px;
}

.btn-l {
  color: #fff;
  background: #4BACE4;
  border: 1px solid #4BACE4;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  width: 80px;
  height: 45px;
}

这时会发现第二次引入的button-base其实都是一样的,但是还是分开插入了,这样代码就太多了,其实我们想要的是这样:

.btn-s,.btn-l {
  color: #fff;
  background: #4BACE4;
  border: 1px solid #4BACE4;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
}

这时就要用到placeholder

placeholder

placeholder 的主要用途也是定义公共的代码,用更少的代码干更多的事。定义时用%后跟上定义的名字,用@extend来引入,和定义一个 css 样式有点像,但是用%placeholder不会产生多余的代码。

@mixin button-size($width,$height) {
    width: $width;
    height: $height;
}

%button-base {
    color: #fff;
    background: #4BACE4;
    border: 1px solid #4BACE4;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}

.btn-s {
    @extend %button-base;
    @include button-size(40px,25px);
}
.btn-l {
    @extend %button-base;
    @include button-size(80px,45px);
}

编译后:

.btn-s, .btn-l {
  color: #fff;
  background: #4BACE4;
  border: 1px solid #4BACE4;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
}

.btn-s {
  width: 40px;
  height: 25px;
}

.btn-l {
  width: 80px;
  height: 45px;
}

这样就很完美了。

使用哪个?

%placeholder中不能使用变量,如果你需要变量的话,最好使用@mixin

举个例子:你的项目中有很多尺寸的按钮,这些按钮遍布很多页面。在你写完之后,你的产品经理可能觉得这个按钮长度有点长了,如果你用的@mixin只需要改一个变量就可以了。

如果有些基本的样式,就可以愉快的使用%placeholder,比如:

%center-block {
  margin-left: auto;
  margin-right: auto;
}
%over-show-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

参考阅读