正文
Sass和Compass学习笔记系列之Sass
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
最近在慕课网学习Sass和Compass，学习链接地址：https://www.imooc.com/learn/364，现在整理笔记如下：
一、使用Sass和Compass的优点：
a.使用Sass和Compass可以写出更优秀的CSS。
b.解决CSS编程过程中的痛点问题，例如精灵图合图等。
c.有效地组织样式，图片，字体等项目元素。
二、Sass简介
1.Sass是为了让我们写出更高效的可维护性的CSS代码。
2.Sass的语法：
使用缩进式语法：.sass作为文件的扩展名，这种语法是：对空格敏感，所以选择器下面的属性有缩进，并且不适用花括号，每个属性之间通过换行分隔，而不是分号，这是一种类Ruby的语法。
h1
color:#000
background:#fff
Sass在3.0版本引入了.scss的语法，使用.scss作为文件的扩展名，和css语法一样。
h1{
color:#000;
background:#fff;
}
注：不能在一个文件中使用两种语法，可以在一个项目下用两种不同的语法的文件。
三、Sass安装
因为Sass引擎使用Ruby写的，所以我们需要安装Ruby的运行环境。Ruby的官网地址是：http://www.ruby-lang.org/en/，rvm (Ruby Version Manager)安装管理协同多个Ruby环境变得简单的命令行工具。
mac电脑自带ruby环境，但是版本比较老，建议升级一下，推荐安装ruby的管理工具rvm，管理各个版本的ruby（官网：rvm.io）。但是安装rvm需要安装gpg，这个我目前还没有找到正确的安装gpg的方法（在win10环境下），所以这部分暂时搁置，以后补充。
下面我先介绍关于rvm的一些命令行的指令含义。
| 指令名称 | 含义 |
| rvm list known | 列出所有已知的ruby版本 |
| rvm list | 列出本机通过rvm安装的ruby环境版本 |
| =* | 当前使用的ruby版本也是默认使用的ruby版本 |
| * | 默认使用的ruby版本 |
| => | 当前正在使用的ruby版本 |
| rvm install 2.0.0 | 安装2.0.0版本的ruby环境 |
| rvm use 2.0.0 | 切换到2.0.0版本的ruby环境 |
| rvm use --default 2.2.0 | 默认使用2.2.0版本的ruby |
| rvm use system | 使用系统自带的ruby |
下面介绍怎样在windows环境下安装ruby环境。
1.首先进入Ruby官网，点击Download，选择RubyInstaller（Windows），点击进去，根据自己的电脑，选择合适的版本（32位还是64位），下载合适的程序包。
2.下载好了之后直接点击安装，点击下一步，选择“I accept the license”，点击下一步。
3.选择一个安装目录，因为我们要在命令行里面使用ruby，所以把ruby可运行文件加载到我们的system path里，也就是勾选“Add ruby executables to your PATH”，然后点击install安装。点击finish。
4.进入控制台，输入ruby -v打印出ruby的版本，说明安装成功。
下面介绍gem。
gem是ruby的包管理工具，类似于npm。安装好了ruby，也就安装好了gem，相当于安装好了node，npm也就安装好了一样。
正式使用之前，需要先修改一下ruby软件包的sources。由于国内网络的原因，导致rubygems.org放在亚马逊的资源文件经常间歇性的连接失败，所有我们更换成国内淘宝镜像提供的ruby sources。命令如下：
gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/
//使用下面的指令查看list当前所有的源是否上一步操作成功
gem sources -l
安装Sass和Compass都是根据gem进行安装。以下就是gem的一些常用指令：
| 指令名称 | 含义 |
| gem update | 更新ruby程序 |
| gem install sass --version=3.3 | 安装3.3版本的sass |
| gem list | 列出本地安装的所有ruby程序包 |
| gem uninstall sass --version=3.3.0 | 卸载3.3.0版本的sass程序 |
| gem uninstall sass | 卸载sass |
| gem install compass | 安装compass |
我们使用命令gem install sass安装Sass，安装好了之后，使用命令sass -v查看Sass是否安装完毕。
新建一个目录，命名为“learn-sass-cli”，在这个目录下，新建一个文件main.scss。在这个文件里随便写一个常用的代码。例如：*{margin:0;padding:0}
然后我们根据命令切入到目录为learn-sass-cli的下面，在控制台输入以下命令。
sass main.scss main.css
//当前目录执行sass命令，把main.scss编译成main.css
执行完上面的命令，在当前文件夹多出main.css文件，main.css.map文件以及.sass-cache。
main.css.map：用来映射scss和css文件的每条规则，方便我们在Chrome里面调试。
.sass-cache：存放的是sass编译过程中生成的临时文件，这些临时文件让编译更加迅速。
四、Compass的安装
Compass是一个开源的CSS书写框架。
//安装compass
gem install compass
//查看compass安装版本
compass -v
Compass可以直接搭建前端项目样式部分，如下命令：
//搭建learn-compass
compass create learn-compass init
五、Sass语法
下面主要以.scss进行说明。怎么转换成.sass，在命令行输入以下命令：
//把.scss文件转换为.sass文件
sass-convert main.scss main.sass
//用compass创建一个测试项目
compass create learn-sass-syntax
//切换到learn-sass-syntax项目下
cd learn-sass-syntax
//实时监听sass文件的变化
compass watch
进入learn-sass-syntax文件夹下面的screen.css。
1)变量语法：
假设现在我们把文章标题和文章内容的字体抽象为字体变量，一般的做法把变量放在文件的行首。Sass通过一个"$"声明变量。例如：
//声明变量使用$
$headline-ff:[font-family];
//引用变量:
.selector{
font-family:$headline-ff;
}
对于常见变量，我们习惯于抽离出一个变量文件。因为不需要编译成CSS，所以我们命名为“_variables.scss”，加一个下划线的目的是这样就声明为局部文件。
在screen.scss中引入_variables.scss的方法是
@import "variables"
我们称screen.scss为宿主文件。
CSS中原生的@import指令的两大弊端：
1.放在代码最前面，否则会不起作用。
2.如果文件A是引入文件B，就会先去下载文件B，会造成网络堵塞对性能不利。
所以我们不建议使用CSS原生的@import指令。
Sass重新定义@import的功能，叫做control directives。Sass在编译阶段将被引入文件合并，并输出到了相应的CSS文件，重新定义后的@import可以在文档任何地方引入。如果被引入文件包含的是变量或者是mixin函数，则意味着在宿主文件中可以随意使用这些变量和函数。
Sass提供一个load_paths的选项，可以用来添加额外寻路路径，Compass通过配置这个选项，将compass的目录加入到了寻路目录当中。reset是compass提供的一个重置模块。
@import "compass/reset";//normalize:注重通用的方案，重置该重置的，保留有用的样式，进行一些bug修复，统一跨浏览器的默认样式差异，比如统一<p>标签的样式
使用CSS原生@import的既定规则：
1.当@import后面跟的文件名是以.css结尾的时候。
2.当@import后面跟的是http://开头的字符串的时候。
3.当@import后面跟的是一个url（）函数的时候。
4.当@import后面带有media queries的时候。
基于Sass的既定规则：
1.没有文件后缀名的时候，Sass会添加.scss或者.sass的后缀。
2.同一文件下，局部文件和非局部文件不能重名，也就是所有的文件都不能重名。
sass的嵌套语法：
parent_class {
child_class{
...
}
}
嵌套中一个需要关注的点：
a {
&:hover{
color:blur;
}
使用&父类选择器将父类引入，并样式输出到父类上。否则这个：hover样式将应用到a标签的所有内容上。
sass除了提供类之间的嵌套，还提供了属性之间的嵌套：
.headline{
font:{
//注意!这里font(属性)后的冒号不可去掉
family: sans-serif,
size: 16px;
}
}
2）注释语法
sass支持css的注释语法。
//不会在编译好的css文件中输出
/**/会在编译好的css文件中输出
好的代码习惯：在主文件的开头声明块注释：
/**
* CONTENTS
*
*SETTING
*variables............变量几种存储的文件
*
*TOOLS
*reset.................Compass内置浏览器重置样式文件
*
*BUSINESS
*
*BASE
*screen.scss.........针对当前站点主页的样式修饰
*/
3)变量操作
1.直接操作变量，即变量表达式。
2.通过函数
a.跟代码块无关的函数，多是自己内置函数，称functions。
b.可重用的代码块，称mixin
•@include的方式调用
•@extend的方式调用
下面介绍@mixin的用法：
一般我们把@mixin放在页面的顶部，@import之后，或者单独抽离出一个文件。调用方式通过@include调用即可。
//书写格式如下，下面只是举个例子
@mixin col-6 {
width: 50%;
float: left;
}
//调用格式如下
.webdemo-sec {
// 一个规则中可以引入多个mixin
@include col-6();
//一旦使用mixin，规则中也可以包含其他规则。
&:hover {
background:#f5f5f5;
}
}
@mixin在不调用的时候，是不会生成任何CSS内容的，在调用的时候，也只是把@mixin里面的内容输出到调用位置。
@mixin col-6 {
.col-6{
width: 50%;
float: left;
}
}
//调用方式提到最外层
@include col-6()
不建议按照以上的方式去书写@mixin以及调用@mixin的方式，因为CSS是建议我们书写语义化的类名，而不是视觉化的表现。
我们也可以使用参数，来增加调用的灵活性，例如：
//书写方式
@mixin col($width){
width:$width;
float:left
} //调用方式
.webdemo-sec{
@include col(50%);
}
我们也可以调用的时候不用传参数，那么写法又发生了改变，如下：
//书写方式
@mixin col($width:50%){
width:$width;
float:left
} //调用方式
.webdemo-sec{
@include col();
}
下面介绍@extend：
@extend可以帮助我们明确的指定一个选择器去继承另一个选择器的样式，例如：
.error{
color:#f00;
}
.serious-error{
// @extend的用法：把继承者的选择器插入到被继承者的选择器出现的地方
@extend .error;
border:1px #f00;
}
最后生成的CSS代码如下：
.error, .serious-error {
color: #f00;
}
.serious-error {
border: 1px #f00;
}
@extend支持继承多个选择器，和@include一样。
@extend的两个知识点：
1.@extend不可以继承选择器序列，也就是不能继承嵌套选择器。例如：
结果直接报错，如下：
2.如果我们为Sass写插件，可能会有很多供别人继承的选择器，但是我们并不希望这些选择器被输出到CSS文件里面，因为别人可能用不着继承这个选择器，这样就会有冗余样式的生成，这时候我们可以使用%，用来构建只用来继承的选择器。例如：
生成的CSS文件样式为：
我们只看到.serious-error-2的选择器，没看到.error-2的选择器。
4)Sass中的@media跟CSS区别
区别是：Sass中的media query可以内嵌在CSS规则中，在生成CSS的时候，media query才会被提到样式的最高层级。
好处：避免我们重复书写选择器或者打乱样式表的流程。
浏览器在解析一个CSS选择器的时候，是按照从右往左的顺序解析的。例如：按照下面第一张图说明，浏览器会首先找到页面中所有的.headline的类名，然后再一层一层往上去遍历，遍历.headline的父级元素中有没有类名为.main-sec，直到找到或者遍历到html一级，这样往往导致样式渲染的低效。
通过嵌套还有一些副作用：增加了样式修饰的权重，制造了这种样式位置的依赖。最佳实践是给相应的元素起名.main-sec-headline和.main-sec-detail，对这两个类进行样式的修饰，如下。但是这样写多了以后，又不如嵌套清晰易维护，所以更好的办法是可以在嵌套的时候，使用Sass的@at-root指令，明确的指定被嵌套的内容会输出到样式表的顶层。这样虽然我们是用嵌套的方式去写的，但是在生成的CSS样式表中，却不包含嵌套。
通过一个例子说说其他Sass语法：
最后说说Sass的四种输出格式，打开config.rb，里面有一行叫做output_style，这一项就是控制CSS的输出样式。
| output_style=expanded | 默认格式，样式是展开的，跟我们手动书写CSS样式一样 |
| output_style=nested | 很好的反应了CSS修饰HTML的结构，根据嵌套，在输出的时候对应缩进，嵌套的越深，缩进的就越多 |
| output_style=compact | 将所有的属性汇总到一行，关注更多的是选择器之间的关系，而不是选择器内的属性 |
| output_style=compressed | 将样式表压缩，以占用最小的空间，上线前的CSS，我们一般会才有这种输出方式 |
注：
1.如果使用中文出现乱码，请在文件最开始使用@charset “UTF-8”;
2.Sass的计算是可以带单位的，意味着不能混用两种不同的单位。
3.CSS3引入了HSL的颜色模式，H：色调，S：饱和度，L：亮度，不过在IE6-8不支持。
4.Sass允许我们通过@function声明函数，但是一般很少使用。
