sass揭秘之@mixin,%,@function

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习。

在阅读本文章之前,请先确认你已经阅读了上篇文章sass揭秘之变量,不然会给你带来疑惑的感觉。

其实很多人之所以对sass或less感兴趣,就是因为他们能使用变量和这个@mixin功能,而后面的%和@function知道的人就比较少了。所以说@mixin这个东西还是很有诱惑力的,没办法,广告做得好啊,大明星。这里之所以把%和@function和@mixin放在一起,当然并非无缘无故,一看@mixin和@function就是兄弟,长得那么像,而%这个后起之秀,更是在一定程度上抢了@mixin的不少风头。

这里先说@mixin和%,谁让它们有竞争关系呢,哈哈。@function这个家伙一看就是函数,先闪一边去。 首先@mixin可以传递参数,而%不行;然后@mixin的调用方式是@include,而%的调用方式是@extend;最后@include产生的样式是以复制拷贝的方式存在的,而@extend产生的样式是以组合申明的方式存在的。概念简单讲解完毕,现在进入代码实例,上战场才是真理。

为了方面测试,我们先约定建立一个_mixin.scss文件,下面所有的有关@mixin,%和@function的一些定义全部写在这里,再建立一个style.scss来调用我们的_mixin.scss文件,所以在style的里面先写上一句@import 'mixin';

@mixin

先来一段无参数简单版本的@mixin(@mixin,%,@function全部放在_mixin.scss文件中):

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

这应该是最简单版本的@mixin了,不但没有参数,连样式都只有两条,不过还是很实用的。接下来我们来调用下(调用的全部放在style.scss文件中,先导入_mixin文件):

@import 'mixin';    
#header{
    width:1000px;
    @include center-block;
}
.gallery{
    width:600px;
    @include center-block;
}

解析成的css:

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

很显然,上面两个margin左右为auto在各自的选择器中,当然运行是没有问题的,但是如果把这两个一样样式提出来组合申明下多好啊,一看质量就不一样了吗,高端大气上档次了哈哈。这个问题稍后留给我们的%来解决,我们继续@mxixin。

再来个无参数版的,但是包含浏览器兼容方面的:

$lte7:true !default;//是否兼容ie6,7

// inline-block
// ie6-7 *display: inline;*zoom:1;
@mixin inline-block {
  display: inline-block;
  @if $lte7 {
    *display: inline;*zoom:1;
  }
}

上面的代码,有个$lte7全局变量,我们把这个变量提到_mixin.scss文件的最上面。注意这里@mixin里面有个@if判断,这是为ie6,7对inline-block部分不兼容的一个处理,默认$lte7为true,意思是需要兼容ie6,7,那么就会输出判断里面的代码*display: inline;*zoom:1;,当我们不需要兼容的时候呢,话说高富帅搞的就是搞ie8+的,那设置$lte7为false就没*display: inline;*zoom:1;这两个家伙的事了,直接宣布其斩立决了。代码为证:

$lte7:false;    
@import 'mixin';    

.inline-block{
    @include inline-block;
}

这里注意:因为我们要重设$lte7为false,所以在@import 'mixin';之前先定义下$lte7:false;,这涉及到变量默认值的使用,如果你不了解请先查阅sass揭秘之变量

解析成的css:

.inline-block{
    display:inline-block;
}

当然如果没有$lte7:false;这个提前申明变量,那么解析成的css应该是这样的:

.inline-block{
    display:inline-block;
    *display: inline;*zoom:1;
}

从上面可以看出,如果@mixin里面放点判断,对浏览器的兼容还可以做点有意义的事,不用每次都写一大坨,同时还为以后升级带来一个暗门,直接改变下变量的值重新解析下就ok了,那些为兼容处理的代码统统消失,这比较爽。测试完这个之后,请把$lte7:false;删掉,因为后面还要用到其值true。

现在来个参数简单版的:

@mixin float($float:left) {
  float: $float;
  @if $lte7 {
    display: inline;
  }
}

够简单吧,float人人皆知啊。这里$float参数有默认值为left,我们调用下:

.fl{
    @include float;
}
.fr{
    @include float(right);
}

解析成的css:

.fl{
    float:left;
    display: inline;
}
.fr{
    float:right;
    display: inline;
}

因为在传参数的时候$float设置了一个默认值为left,所以调用的时候@include float;@include float(left);能产生一样的代码。这里先说下我琢磨出来的一个经验,如果某个@mixin无法设置默认的参数,那么这个@mixin要么可以用%来取代,要么就是个鸡肋@mixin,所以请定义@mixin的时候参考这两点判断是否有必要,特殊情况除外。

关于鸡肋@mixin等下再说,我们接着说下多个参数的@mixin:

// 禁用样式,加!important
@mixin disabled($bgColor:#e6e6e6,$textColor:#ababab){
  background-color: $bgColor !important;
  color: $textColor !important;
  cursor: not-allowed !important;
}

两个参数,一个为背景色,一个为文本色,两个冒号后面的分别为默认值,直接调用@include diasbled;使用的就是默认值,虽然简单,我们还是调用下吧。

.disabled{
    @include disabled;
}

解析后的css:

.disabled {
  background-color: #e6e6e6 !important;
  color: #ababab !important;
  cursor: not-allowed !important;
}

接着下一个实例,一个属性可以有多个属性值的,写到这里,看过sass揭秘之变量的人就想起来了,原来是传参的时候变量得加...:

//错误定义方法
@mixin box-shadow($shadow){
    -webkit-box-shadow:$shadow;
    -moz-box-shadow:$shadow;
    box-shadow:$shadow; 
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/sass-mixins-function-placeholder.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部