美文网首页转载的~CSS预处理
sass笔记-3|Sass基础语法之样式复用和保持简洁

sass笔记-3|Sass基础语法之样式复用和保持简洁

作者: Stinson | 来源:发表于2016-12-05 15:20 被阅读73次

    上一篇详述了Sass如何嵌套、导入和注释这3个基本方式来保持条理性和可读性,这一篇更进一步地阐述sass保持样式复用和简洁的方式——混合器和选择器继承——这两种方式都能复用样式,使用它们也不难,但一定要注意什么时候该用什么。

    零. 混合器——样式层上复用

    当你需要一直复用大段样式的时候,可以考虑下混合器。

    1. 基本用法

    混合器使用@mixin标识符定义,然后通过@include引入,简单的说就是用@mixin定义一个混合器,它具有一个名字和一堆包含在花括号中的规则,用@include引入这个混合器(通过混合器的名字),混合器中的样式规则就会被提取到调用@include的地方。

    此外,混合器中也可以包含CSS规则,可以包含选择器和选择器中的规则,甚至可以用父选择器标识符&

    @mixin rounded-corners{
        -moz-border-radius:5px;
        -webkit-border-redius:5px;
        border-radius:5px;
    }
    
    .notice{
        background-color:green;
        border:2px solid #0a0;
        @include rounded-corners;
    }
    
    //导出的css如下
    .notice{
        background-color:green;
        border:2px solid #0a0;
        -moz-border-radius:5px;
        -webkit-border-redius:5px;
        border-radius:5px;
    }
    

    2. 可以给混合器传参

    混合器复用样式的时候,可以通过传参改变混合器中的具体属性值,和function很像。

    混合器定义时,参数名称必须以变量名形式指定,此外,可选的是,参数可以有默认值,只需要在参数名后面以冒号:分隔后写上默认属性值,如果你了解各类编程语言函数的默认参数值,这应该不会陌生。

    引入含有参数的选择器时,有两种传入参数的形式,一种是仅仅传入参数值,这要求传入参数值的顺序和混合器定义的参数顺序一致,另一种则是通过$name:value的形式指定传入参数的名字和值,这就不要求顺序。

    以下代码定义了一个有3个参数的选择器来设置一个链接各个状态的颜色样式,其中常规样式的颜色$normal有一个默认值#233,另外两个参数没有默认值:

    @mixin link-col($hover, $visited, $normal:#233){
        color:$normal;
        &:hover { color:$hover; }
        &:visited { color:$visited; }
    }
    

    当引入这个混合器的时候,可以有以下两种方式引入:

    //可以这么引入,因为最后一个参数默认,可以不传入
    a{
        @include link-col(red, gray);
    }
    //也可以这样,就不用管顺序
    a{
        @include link-col($visited:gray, $hover:red);
    }
    

    3. 混合器的使用场景——注意和类的区别

    如果发现一直在不停复用一段样式,应该考虑把这段样式构造成一个混合器,尤其是它本身可能是一组有意义的样式组合,并且考虑进参数的设置,让混合器更加智能。

    判断一组选择器是否应该组合在一起组成一个混合器,一条经验法则:能否为这个混合器想出一个能概括它的好名字。如果能想出一个短名字来描述这几条样式组合的作用,那么往往能构造出一个合适的混合器。

    混合器和CSS类很像,css类也可以复用样式,一段样式给一个类,然后那里需要这一段样式去修饰,就在哪里添加这个类。

    区别在于,类是在HTML中运用的,混合器是在样式表中使用的。这意味着,“类”具有语义化的含义,而混合器仅仅是有关样式的,仅仅是描述展示出来是什么样子的。

    能区分这两者微妙的区别,并且有意地去选择更合适的方式去复用样式,这能让你的代码保持可读性和可维护性。诚然,现在很多流行框架,依旧在用类去复用样式,但是语义和样式的解耦绝对是趋势。

    一. 选择器继承——语义化关系上复用样式

    刚描述完混合器和类的差别,在于“语义”和“展示样式”,又突然到了建立在语义化关系上复用样式的选择器继承,似乎有点绕,为什么不用类而要用选择器继承呢?

    实际上,选择器继承最常用的场景就是和类一起工作的。

    1. 基本用法

    选择器继承,用@extend去继承一个选择器定义的所有样式。以下代码,.seriousError将会继承.error定义的所有样式。

    .error{
        border: 1px red;
        background-color: #fdd;
    }
    .seriousError{
        @extend .error;
        border-width: 3px;
    }
    
    //输出的CSS代码是这样的
    .error, .seriousError{
        border: 1px red;
        background-color: #fdd;
    }
    .seriousError{
        border-width: 3px;
    }
    

    是的,平时我们完全可以写输出的纯CSS代码,多写一个选择器名字和多写一行@extend命令,我们觉得差不多。

    但是,在上面的例子中,.seriousError不仅会继承.error自身的所有样式(就像上面的那样),任何和.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承。

    比如,在上面的样式代码是这样的:

    .error{
        border: 1px red;
        background-color: #fdd;
    }
    .seriousError{
        @extend .error;
        border-width: 3px;
    }
    .error a{
        color:red;
        font-weight:bold;
    }
    h1.error{
        font-size:1.3em;
    }
    
    //输出的CSS是这样的,注意看下面的选择器
    .error, .seriousError{
        border: 1px red;
        background-color: #fdd;
    }
    .seriousError{
        border-width: 3px;
    }
    .error a, .seriousError a{
        color:red;
        font-weight:bold;
    }
    h1.error, h1.seriousError{
        font-size:1.3em;
    }
    

    这个时候,如果我们不借助Sass的选择器继承,而用纯CSS来写,是不是就会有一些繁琐了。

    我们再来想一下这几段代码的含义:我们描述了一个.error类来整体修饰错误提示都应该有的样式,然后.seriousError.error类的细化,描述了一个严重的错误应该有的进一步的样式。所以.seriousError应该有.error相关的所有样式,而这就是选择器继承帮助我们做的事。

    2. 继承背后的基本实现思路

    @extend背后最基本的想法是,如果.seriousError继承了.error,那么样式表中的任何一处.error选择器都会用.error, .seriousError这一选择器组进行替换和打开。

    3. 继承的使用场景

    继承是建立在语义化的关系上的,当一个元素拥有的类表明它是属于另一个类时(是另一个类的细化时),在这种情况下需要复用样式时使用,它的本质作用还是样式复用。

    它和混合器相比,继承生成的代码量会相对较少,因为继承仅仅重复选择器,而混合器是重复一段样式。

    另外,可以看到,一般它和类一起协同工作,当你在构建一些有关系的类时,在写这些具有层级关系的类的样式的时候,选择器继承可以帮你严谨地完成某些样式的复用,无论是这个选择器本身,还是隐藏在其他复杂选择器中的目标选择器。

    4. 继承的高级用法

    既然这被称为选择器继承,不是“类”继承,那么必然继承是可以针对类之外的选择器使用的,只是继承类是最常用的使用场景。

    还有一种场景是,继承一个HTML元素的样式,如定一个.disabled类,样式修饰让它看上去像一个灰掉的链接,通过继承a这一元素实现:

    .disabled{
        color: gray;
        @extend a;
    }
    

    还有一些关于复杂选择器的继承规则:

    1. 如果继承了一个复杂的选择器,那么只会继承这个复杂选择器命中的样式, 比如.seriousError @extend .important.error,那么被继承的.important.error被看做一个整体,单独的.important或者.error是不会被继承的;
    2. 如果一个选择器序列继承了另一个选择器,那么只会完全命中序列选择器的才会继承,比如(#main .seriousError) @extend .error最好不要这么做),那么前者的#main .seriousError也被看做一个整体,只有完全命中这个选择器的才会继承;
    3. 以逗号分隔的选择器序列是不能被继承的,因为这和继承其中任何一个选择器效果一样。

    5. 使用继承时注意后代选择器

    可以放心地继承有后代选择器修饰的选择器,但不用用后代选择器去继承别的选择器。即放心地用.serious { @extend (.main .error) },但是不要用.something .serious { @exten .error }

    为什么,因为不这么做可能会导致继承迅速变复杂,sass可能会遗漏一些情况,考虑:

    .foo .bar { @extend .baz; }
    .bip .baz { a:b; }
    

    当下面那条规则应用到.foo .bar时,有3种情况:

    <div class="foo">
        <div class="bip">
            <div class="bar">...</div>
        </div>
    </div>
    
    <div class="bip">
        <div class="foo">
            <div class="bar">...</div>
        </div>
    </div>
    
    <div class="bip foo">
        <div class="bar">...</div>
    </div>
    

    所以sass必须要生成3种组合选择器才能覆盖这3种情况,但遗憾的是,sass并不总是会生成所有情况,另外,这样做,选择器的个数会迅速增加,所以最好的方式是不要这么用。

    三. 小结

    Sass保持样式复用和简洁的两个方式,一是混合器,混合器主要用于样式展示层的复用,可以给混合器传参从而在复用代码的同时保持灵活性,二是选择器继承,一般和类一起使用,主要用于建立在语义化关系上的样式复用,注意继承可能引发的问题。

    相关文章

      网友评论

        本文标题:sass笔记-3|Sass基础语法之样式复用和保持简洁

        本文链接:https://www.haomeiwen.com/subject/uiokmttx.html