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

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

在《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

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

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