理解SASS的嵌套，@extend，%Placeholders和Mixins

作者：大漠 日期：2013-07-31 点击：21880
Preprocessor
Sass
SCSS
会员专栏

特别声明：如果您喜欢小站的内容，可以点击年卡¥199.00元(原价: ¥598元)、季卡¥78.00元(原价: ¥168元)、月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

在《SASS基础教程——SASS基本语法与特性》文中主要介绍了SASS的基本语法和特性。简单的知道SASS具有四个基本特性：变量Variables、嵌套Nesting、混合Mixins和继承Selector Inheritance。其实这四种特性中的嵌套、混合和继承是有一种千丝万缕的关系，甚至会让初学者理不清，这也从侧面也说明了这三者在SASS的重要性。那么今天这篇教程，我们将主要介绍和探讨嵌套、混合、继承三者之间的关系，以及各自的优缺点。

回顾嵌套、混合和继承特性

如果您没有阅读过《SASS基础教程——SASS基本语法与特性》一文，并不要紧。我们一起简单回顾一下SASS中的嵌套Nesting、混合Mixins和继承Selector Inheritance。

嵌套Nesting

仅从字面上理解，嵌套就是一层一层往里套。在DOM，元素与元素之间除了存在兄弟间关系之外，还存有一种父级（祖级）关系。在CSS中是依靠选择器层层深入或者添加额外的类名或ID来控制。那么在SASS中添加了对DOM的嵌套功能。即，元素的所有后代元素都可以放置在父元素之中，如：

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Sass</a></li>
        <li><a href="#">Less</a></li>
        <li><a href="#">Haml</a></li>
    </ul>
</nav>

我们给上面的结构画一个DOM树：

SASS基础教程——理解嵌套，@extend,%Placeholders和Mixins

为了实现下图的效果：

SASS基础教程——理解嵌套，@extend,%Placeholders和Mixins

我们的样式大致如下：

nav {
    display: block;
}

nav ul {
    margin: 50px auto;
    width: 800px;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: -o-fit-content;
    width: fit-content;
    padding: 0;
    list-style: none;
}
nav ul:before,
nav ul:after{
    content:"";
    display: table;
}
nav ul:after {
    clear:both;
    overflow: hidden;
}
nav ul li {
    background: #34495e;
    float: left;
    -webkit-transform: skewX(25deg);
    -moz-transform: skewX(25deg);
    -o-transform: skewX(25deg);
    -ms-transform: skewX(25deg);
    transform: skewX(25deg);
}
nav ul li a {
    display: block;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    font-family: Arial,Helvetica;
    font-size: 14px;
    -webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
    -o-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    transform: skewX(-25deg);
    padding: 1em 2em;
}
nav li:hover {
    background: #e74c3c;
}

如果在SASS中写，那就要简单得多了，我们可以使用SASS的嵌套来处理：

nav {
    display: block;

    ul {
        margin: 50px auto;
        width: 800px;
        width: -moz-fit-content;
        width: -webkit-fit-content;
        width: -o-fit-content;
        width: fit-content;
        padding: 0;
        list-style: none;

        &:before,
        &:after {
            content: "";
            display: table;
        }

        &:after {
            clear: both;
            overflow: hidden;
        }

        li {
            background: #34495e;
            float: left;
            -webkit-transform: skewX(25deg);
            -moz-transform: skewX(25deg);
            -o-transform: skewX(25deg);
            -ms-transform: skewX(25deg);
            transform: skewX(25deg);

            &:hover {
                background: #e74c3c;
            }

            a {
                display: block;
                color: #fff;
                text-transform: uppercase;
                text-decoration: none;
                font-family: Arial,Helvetica;
                font-size: 14px;
                padding: 1em 2em;
                -webkit-transform: skewX(-25deg);
                -moz-transform: skewX(-25deg);
                -o-transform: skewX(-25deg);
                -ms-transform: skewX(-25deg);
                transform: skewX(-25deg);
            }
        }
    }
}

把上面的SASS代码编译完成后，编译出来的CSS和前面展示的CSS一样。

SASS除了能进行结构嵌套之处，还可以对属性进行嵌套，例如上面的示例之中：

a {
    …
    text-transform: uppercase;
    text-decoration: none;
    font-family: Arial,Helvetica;
    font-size: 14px;
    ...
}

我们可以将上面的SASS代码进行属性嵌套：

a {
    …
    text: {
        transform: uppercase;
        decoration: none;
    }
    font:{
        family: Arial,Helvetica;
        size: 14px;
    }   
    ...
}

这样的SASS代码并不完美，此处只是通过这样的一个小例，向大家演示SASS中的嵌套特性。

混合Mixins

Mixins是SASS最出名特色之一。他充许我们通过:

@mixin Mixins名称（参数:参数值）{
    /*公用样式*/
}

的方式将相同的样式风格定义成一个模块，然后在需要使用的地方通过@include将@mixin定义好的模块调用进来：

selector {
    @includ Mixins名称(参数值);
}

Mixins最明显的用例就是用来处理CSS3属性前缀，回到我们上面的示例之中，我们在示例中使用了两个CSS3属性：

nav ul {
    …
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: -o-fit-content;
    width: fit-content;
    …
}
nav ul li {
    …
    -webkit-transform: skewX(25deg);
    -moz-transform: skewX(25deg);
    -o-transform: skewX(25deg);
    -ms-transform: skewX(25deg);
    transform: skewX(25deg);
    ...
}
nav ul li a {
    …
    -webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
    -o-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    transform: skewX(-25deg);
    …
}

针对上面的两个CSS3属性，我们可以定义两个Mixins：

//define fit-content

@mixin fit-content() {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: -o-fit-content;
    width: -ms-fit-content;
    width: fit-content;
}

//define transform skewX()

@mixin skewX($degrees){
    -webkit-transform: skewX($degrees);
    -moz-transform: skewX($degrees);
    -o-transform: skewX($degrees);
    -ms-transform: skewX($degrees);
    transform: skewX($degrees);
}

这个时候，我们只需要在对应的地方通过@include调用即可：


nav {
    display: block;

    ul {
        margin: 50px auto;
        width: 800px;
        @include fit-content();//调用fit-content()
        padding: 0;
        list-style: none;

        &:before,
        &:after {
            content: "";
            display: table;
        }

        &:after {
            clear: both;
            overflow: hidden;
        }

        li {
            background: #34495e;
            float: left;
            @include skewX(25deg);//调用skewX()，并传参数值25deg

            &:hover {
                background: #e74c3c;
            }

            a {
                display: block;
                color: #fff;
                text: {
                    transform: uppercase;
                    decoration: none;
                }   
                font: {
                    family: Arial,Helvetica;
                    size: 14px;
                }   
                padding: 1em 2em;
                @include skewX(-25deg);//调用skewX(),并传参数值-25deg
            }
        }
    }
}

这样编译出来的CSS和文章前头显示的CSS一模一样。

当然，上面定义的@mixin skewX()并不是完美的，完美的可以参考一下：Bourbon或者Bootstrap SASS,此处仅做一下演示，详细使用与分析，将会放在CSS3的Mixins中介绍。

//Example: @include prefixer(border-radius, $radius, webkit spec);
//----------------------------------------

$prefix-for-webkit: true !default;
$prefix-for-mozilla: true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera: true !default;
$prefix-for-spec: true !default; // required for keyframe mixin


//prefixer
@mixin prefixer ($property, $value, $prefixes) {
  @each $prefix in $prefixes {

    @if $prefix == webkit and $prefix-for-webkit == true {
      -webkit-#{$property}: $value;
    }
    @else if $prefix == moz and $prefix-for-mozilla == true {
      -moz-#{$property}: $value;
    }
    @else if $prefix == ms and $prefix-for-microsoft == true {
      -ms-#{$property}: $value;
    }
    @else if $prefix == o and $prefix-for-opera == true {
      -o-#{$property}: $value;
剩余80%内容付费后可查看

如需转载，烦请注明出处：https://www.w3cplus.com/preprocessor/sass-basic-mixins-nesting-placeholders-extend.html

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

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