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

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能够消除样式表中的冗余，那么冗余有什么问题，我打字快，我不怕冗余，是否是这样？

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

1. 写起来费劲，不断重复写选择器，不断重复写相同的css规则，不断重复地写属性值（好比某个颜色、某个大小值等）；
2. 改起来要疯，一旦一个地方的属性值要改，每每要找到不少处都要改，并且若是是有关联的属性，好比某个颜色是根据另外一个颜色值计算获得的，一旦改前一个颜色，后面的颜色也要改，这个时候由于值不同，并不能简单的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究竟是怎么写的、有什么注意事项和一些这里还没讲到的技巧。