IT博客汇 | sass学习之”%”使用

sass学习之”%”使用

admin发表于 2015-04-14 12:53:03

%与@minxin的区别：
@mixin可以传递参数，而%不行；
@mixin的调用方式是@include，而%的调用方式是@extend；

@include产生的样式是以复制拷贝的方式存在的，
@extend产生的样式是以组合申明的方式存在的。

% 是作为占位选择器来用的，就是先定义好一段样式，但是这个样式默认是不会解析出来的，等到你通过@extend调用了才会解析在css文件中，避免了生成冗余浪费的css代码。
如果某个@mixin无法设置默认的参数，那么这个@mixin要么可以用%来取代，要么就是个鸡肋@mixin，所以请定义@mixin的时候参考这两点判断是否有必要，特殊情况除外。

SCSS：

// block得有宽度margin左右为auto才能居中
@mixin center-block {
  margin-left: auto;
  margin-right: auto;
}
 
%center-block {
    @include center-block;
}

要组合申明就使用@extend %center-block，你想单独拷贝进你的选择器就用@include center-block

调用：

#header{
    width:1000px;
    @extend %center-block;
}
.gallery{
    width:600px;
    @extend %center-block;
}

解析结果：

#header, .gallery {
  margin-left: auto;
  margin-right: auto;
}
#header {
  width: 1000px;
}
.gallery {
  width: 600px;
}

也可以如下这样直接定义%，而不是使用@include来调用一个已经定义好的@mixin

%clearfix {
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after {
    clear: both;
  }
}

sassmeister这款在线编译工具很棒。

文章内容整理自：http://www.w3cplus.com/preprocessor/sass-mixins-function-placeholder.html

Feed enhanced by Better Feed from Ozh