sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

2023-01-09 21:28:30

Sass学习笔记持续整理中，开篇不讲怎么安装，sass是什么，这些搜索引擎会告诉你，我们从sass的作用开始讲起，知道sass用来干什么，有什么作用，我们才能相信用sass的好处，并且时时刻刻想着sass的设计思维——Don't Repeat Yourself。这一篇将阐述Sass如何利用变量、选择器嵌套、混合器和选择器继承来帮我们又快又好地搞定CSS。

零. Sass的作用是什么？

Sass的作用是，帮助我们更快地（又快）写出具有高可维护性（又好）的CSS代码。

直白点说就是，用了sass，写起样式来，脚步带风，效率提升，另一方面，sass在保证你“车速”的同时，还尽量减少你“翻车”的概率，你的样式代码将变得具有更多的条理性，更少的啰嗦重复，修改起来也变得简单高效，不用ctrl+F查找然后替换所有，所以总结起来就是“又快又好”。

接下来我们就先来看一下sass是怎么解决冗余问题的，涉及到具体的语法，日后再详细展开。

一. 冗余有什么问题？

/*冗余的样式表*/
h1#brand {
    color:#1875e7;
}
#sidebar{
    background-color:#1875e7
}
ul.nav{
    float:right;
}
ul.nav li{
    float:left;
}
ul.nav li a{
    color:#111;
}
ul.nav li.current{
    font-weight:bold;
}
#header ul.nav{
    float:right;
}
#header ul.nav li{
    float:left;
    margin-right:10px;
}
... ...

Sass可以消除样式表中的冗余，那么冗余有什么问题，我打字快，我不怕冗余，是不是这样？

冗余的问题在于太妨碍效率，分开来说就是两个问题：

写起来费劲，不断重复写选择器，不断重复写相同的css规则，不断重复地写属性值（比如某个颜色、某个大小值等）；
改起来要疯，一旦一个地方的属性值要改，往往要找到很多处都要改，而且如果是有关联的属性，比如某个颜色是根据另一个颜色值计算得到的，一旦改前一个颜色，后面的颜色也要改，这个时候因为值不一样，并不能简单的ctrl+F查找去全局替换。

这样的冗余问题多了，你的样式表，你自己都会看着心烦，因为很容易出错。

二. 复用属性值——变量

还记得刚学C的时候，算圆周长和面积，老师说，我们首先去定义一个常量P=3.14，这样如果以后要算更精确的，就可以这里把“3.14”改成“3.14159”就可以了，不然就要去找到算式去一处一处改。

Sass让我们的写样式也可以用变量，可以把任意的属性值赋给变量，在一个地方（一般是你的样式表靠前的位置）管理散落在各处的属性值。

举个场景，想象一下，你正在写一套站点主题，包含5个主要颜色，其他任何元素的颜色都是从其中直接或者计算（间接）得到，所以这些以“#”开头的颜色值遍布你的样式表各个地方，可能运用于某处的span标签内的文字颜色，可能运用于某处的div的背景，这个时候你想要修改配色尝试一下，常规地直接在CSS样式表上更改，你得改疯，改完还一直怀疑，我是不是漏了哪里，而用sass只需要在开头定义颜色变量值的地方，集中更改就可以了，这样的更改，两相比较，效率不是一个量级的。

$text-color-info:#121212;
.txt{
    color:$text-color-info;
}

sass的变量名规范是这样的，以$开头，可包括所有可用于CSS类名的字符，包括下划线和中划线，而且方便的是，变量名中并不区分中划线和下划线，比如 $pretty_girl 和 $pretty-girl 是一样的，没差。

三. 快速写出多层次选择器——嵌套

多层次选择器的问题在于重复写选择器，或者不断地ctrl+c然后ctrl+v，然后可读性也不强，尤其是不按一定次序写，最后修改起来很不方便，比如把下面的类名"nav"改成"navg"，就需要改所有的“.nav”选择器。

ul.nav{
    float:right;
}
ul.nav li{
    float:left;
}
ul.nav li a{
    color:#111;
}

Sass利用选择器嵌套来帮我们解决上述问题，如果用嵌套选择器来写，上面的几条CSS会变成这样：

ul.nav{
    float:right;
    li{
        float:left;
        a{
            color:#111;
        }
    }
}

条理性很清楚（当然条理性和可读性永远和程序猿的代码编写习惯相关），没有选择器的冗余，修改起来也会非常方便。

四. 复用一段样式——混合器

不停地要用到一段样式，这样的情景也是很常见的，比如我们要为警示性的提示信息写一段样式：

.danger-note{
    font-size: 10px;
    color: #e22;
}

然后在html文档里，当需要警示性的提示时，我们把类“danger-note”加到某一个标签上，然后它就有这样的样式了，哪里需要就去哪里加这个类，这是我们常规的做法。

那么，这样做法有什么问题呢，这样的问题在于类名一般具有语义，如何保持语义的同时还能复用代码？此外，我们如果在CSS中提炼出某段需要复用的代码，我们需要创建一个类选择器，然后回到html文档里，去该去的地方加上这个类。

而Sass是怎么帮助我们复用一段样式的呢？再说回到学C的时候，有个东西叫“宏”，“宏”就是一个占位的标志，用一开始定义的内容去替换代码中的“宏”标志，其实Sass中的混合器也是差不多的。

我们可以这么去定义一个混合器，以@mixin开头，后跟一个混合器名字，然后是CSS规则：

@mixin danger-note{
    font-size: 10px;
    color: #e22;
}

然后我们就可以用@include随时复用这一段代码了：

#notice{
    text-align:center;
    @include danger-note;
}

更强大的是，混合器和变量的结合使用，可以使混合器带参数，用参数来决定使用什么样式，amazing，简直和“函数”一样。

/*定义混合器*/
@mixin danger-note($col:#e22){
    font-size: 10px;
    color: $col;
}
/*使用混合器*/
#notice{
    text-align:center;
    @include danger-note(#d33);
}

上面的混合器带了一个参数用于决定颜色值，具有一个默认值#e22，也就是引入混合器不指定参数就用默认值，这里我们传入参数#d33，这样我们的颜色最终是d33。

五. 避免重复属性——选择器继承

这可能是sass相比于上面的特性中最不好理解的特性了，我们已经了解可以用混合器来复用一段样式，但由于混合器被看做一个“宏”，所以其实是相同的一段代码被添加到不同的地方了，必然这是会有重复和冗余的。

@mixin note{
    font-size: 10px;
    text-decoration: underline;
}
.danger-note{
    color:#e22;
    @include note;
}
.info-note{
    color:#2e2;
    @include note;
}

输出的CSS是这样的：

/*注意看里面重复的样式代码*/
.danger-note{
    color:#e22;
    font-size: 10px;
    text-decoration: underline;
}
.info-note{
    color:#2e2;
    font-size: 10px;
    text-decoration: underline;
}

上面的代码首先定义一个note混合器，描述了字体大小和下划线样式，然后警告信息和常规信息引入这个混合器，各自的颜色又是独立设置，看上去没有什么问题，但是这样输出的CSS代码将造成冗余，因为都混入了note混合器的规则。

而且，这里的规则具有强烈的层次关系，因为不管是警告信息还是常规信息，都具有note混合器定义的样式，只是两者的颜色不同，所以Sass引入了选择器继承。

选择器继承，让一个选择器能够复用另一个选择器的所有样式，但又不重复输出这些样式。

.note{
    font-size: 10px;
    text-decoration: underline;
}
.danger-note{
    color:#e22;
    @extend .note;
}
.info-note{
    color:#2e2;
    @extend .note;
}

输出的CSS是这样的：

.note, .danger-note, .info-note{
    font-size: 10px;
    text-decoration: underline;
}
.danger-note{
    color:#e22;
}
.info-note{
    color:#2e2;
}

可以看到，当用@extend继承.note的样式时，.danger-note和.info-note也完全套用了.note的样式，而且你会发现，规则并没有被重复输出，而且这样的方式更符合我们对于这几个选择器的认知（如果你之前用过面向对象编程的话）。

而有时候我们其实并不需要父类在输出文件中输出（是不是很像抽象类），这个时候我们可以用占位符（以%开头），比如上面的例子：

%note{
    font-size: 10px;
    text-decoration: underline;
}
.danger-note{
    color:#e22;
    @extend %note;
}
.info-note{
    color:#2e2;
    @extend %note;
}

生成的CSS：

.danger-note, .info-note{
    font-size: 10px;
    text-decoration: underline;
}
.danger-note{
    color:#e22;
}
.info-note{
    color:#2e2;
}

你会发现输出的CSS中没有为note输出，占位选择器能把常用的样式保存在一处，且不影响任何一个类名，可以放心使用。

至此，我们了解到Sass的四大特性：变量、选择器嵌套、混合器和选择器继承，并且了解它们是怎么帮助我们减少编写样式表时的冗余和提高我们的效率和质量的，你可以暂时不去了解细节，毕竟这一篇只是想告诉大家Sass是怎么发挥作用的，接下来我们再仔细去探索下sass的语法，看sass到底是怎么写的、有什么注意事项和一些这里还没讲到的技巧。

码农公寓