慕课网学习笔记
什么是 CSS 预处理器？
CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
什么是Sass
Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。
Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。
Sass 和 SCSS 有什么区别？
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
1.文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
SCSS 和纯 CSS 写法差很多吗？
SCSS 和 CSS 写法无差别：
SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。
Mac下安装SASS
首先你需要在终端中检查有没有安装ruby，命令行如下：
ruby -v
如果出现类似代码，就说明已经安装了。
ruby 2.0.0p645 (2015-04-13 revision 50299) [universal.x86_64-darwin15]
从上面可以知道，我的ruby的版本。
没有安装ruby,先安装ruby
接下来安装sass
sudo gem install sass
安装成功后，查看sass版本号
sass -v
当sass版本滞后时，如何更新sass？
gem update sass
在常期使用的时候难免会碰到无法解决的问题，有时候可能需要卸载 Sass，然后再重新安装 Sass。如何卸载？
gem uninstall sass
Sass编译
Sass 的编译有多种方法：
命令编译
GUI工具编译
自动化编辑
命令编译
命令编译是指使用你电脑中的命令终端，通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。因为只需要在你的命令终端输入：
sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
这是对一个单文件进行编译，如果想对整个项目所有 Sass 文件编译成 CSS 文件，可以这样操作：
sass sass/:css/
缺点及解决方法：
在实际编译过程中，你会发现上面的命令，只能一次性编译。每次个性保存“.scss”文件之后，都得重新执行一次这样的命令。如此操作太麻烦，其实还有一种方法，就是在编译 Sass 时，开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
SASS基本特性
声明变量
sass变量包含三个部分：
1.声明变量的符号‘$’
2.变量名称
3.赋予变量的值
下面看个例子：
$color:red;
body { color:$color;
}编译结果：
body { color: red;
}如果值后面加上!default则表示默认值。!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。下面看个例子：
$color:red;
$color:blue;
body { color:$color;
}
color的值后面没有加!default,那么前一个$color会被覆盖。编译结果为:
body { color: blue;
}加了!default,前一个$color不会被覆盖,代码如下
$color:red;
$color:blue !default;
body { color:$color;
}编译结果如下：
body { color: red;
}[Sass]局部变量和全局变量
先看个例子：
//SCSS $color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
$color:red !default;
body {
color:$color;
$color:blue;
div {
color:$color;
}
}编译结果：
body { color: red;
}body div { color: blue;
}上面的示例演示可以得知，在元素内部定义的变量不会影响其他元素。如此可以简单的理解成，全局变量就是定义在元素外面的变量，如下代码：第一个$color 就是一个全局变量，而定义在元素内部的变量，是一个局部变量。
当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。
<strong>什么时候声明变量？</strong>
我的建议，创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量，这丝毫没有作用。只有满足所有下述标准时方可创建新变量：
1.该值至少重复出现了两次；
2.该值至少可能会被更新一次；
3.该值所有的表现都与变量有关（非巧合）。
基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。
[SASS]嵌套
1.[Sass]嵌套-选择器嵌套
nav {
a {
color: red;
header & {
color:green;
}
}
}编译结果：
nav a { color:red;
}header nav a { color:green;
}2.[Sass]嵌套-属性嵌套
Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了：
.box { font: {
size: 12px; weight: bold;
}
}编译结果：
.box { font-size: 12px; font-weight: bold;
}3.[Sass]嵌套-伪类嵌套
其实伪类嵌套和属性嵌套非常类似，只不过他需要借助&符号一起配合使用。
.box{
&:before { content:"伪元素嵌套";
}
}编译结果：
.box:before { content: "伪元素嵌套";
}[Sass]混合宏-声明混合宏
如果你的整个网站中有几处小样式类似，比如颜色，字体等，在 Sass 可以使用变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。这个时候 Sass 中的混合宏就会变得非常有意义。
1、声明混合宏
<strong>不带参数混合宏：
在 Sass 中，使用“@mixin”来声明一个混合宏</strong>
@mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px;
}其中 @mixin 是用来声明混合宏的关键词，有点类似 CSS 中的 @media、@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。
<strong>带参数混合宏：</strong>
除了声明一个不带参数的混合宏之外，还可以在定义混合宏时带有参数，如：
@mixin border-radius($radius:5px){
-webkit-border-radius: $radius;
border-radius: $radius;
}<strong>复杂的混合宏：</strong>
Sass 中的混合宏还提供更为复杂的，你可以在大括号里面写上带有逻辑关系，帮助更好的做你想做的事情,如：
@mixin box-shadow($shadow...) {
@if length($shadow) >= 1 {
@include prefixer(box-shadow, $shadow);
} @else{
$shadow:0 0 4px rgba(0,0,0,.3);
@include prefixer(box-shadow, $shadow);
}
}这个 box-shadow 的混合宏，带有多个参数，这个时候可以使用“ … ”来替代。简单的解释一下，当 $shadow 的参数数量值大于或等于“ 1 ”时，表示有多个阴影值，反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”。
[Sass]混合宏-调用混合宏
在 Sass 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。例如在你的样式中定义了一个圆角的混合宏“border-radius”:
@mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px;
}调用宏
button { @include border-radius;}
编译结果：
button { -webkit-border-radius: 3px; border-radius: 3px;
}[Sass]混合宏的参数--传一个不带值的参数
在 Sass 的混合宏中，还可以给混合宏的参数传一个默认值，例如：
@mixin border-radius($radius:3px){
-webkit-border-radius: $radius;
border-radius: $radius;
}在混合宏“border-radius”传了一个参数“$radius”，而且给这个参数赋予了一个默认值“3px”。
在调用类似这样的混合宏时，会多有一个机会，假设你的页面中的圆角很多地方都是“3px”的圆角，那么这个时候只需要调用默认的混合宏“border-radius”:
.btn { @include border-radius;
}编译出来的 CSS:
.btn { -webkit-border-radius: 3px; border-radius: 3px;
}但有的时候，页面中有些元素的圆角值不一样，那么可以随机给混合宏传值，如：
.box { @include border-radius(50%);
}编译出来的 CSS:
.box { -webkit-border-radius: 50%; border-radius: 50%;
}[Sass]混合宏的参数--传多个参数
Sass 混合宏除了能传一个参数之外，还可以传多个参数，如：
@mixin center($width,$height){ width: $width; height: $height; position: absolute; top: 50%; left: 50%;
margin-top: -($height) / 2;
margin-left: -($width) / 2;
}在混合宏“center”就传了多个参数。在实际调用和其调用其他混合宏是一样的：
.box-center {
@include center(500px,300px);
}编译出来 CSS:
.box-center { width: 500px; height: 300px; position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -250px;
}有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代，如：
@mixin box-shadow($shadows...){
@if length($shadows) >= 1 {
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
} @else {
$shadows: 0 0 2px rgba(#000,.25);
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
}在实际调用中：
.box {@include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}编译出来的CSS:
.box { -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}[Sass]扩展/继承
在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。如下所示：
//SCSS
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff; @extend .btn;}
.btn-second {
background-color: orange;
color: #fff; @extend .btn;}编译出来之后：
//CSS.btn, .btn-primary, .btn-second {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;}
.btn-second {
background-clor: orange;
color: #fff;}从示例代码可以看出，在 Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器：
.btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px;
}[Sass]占位符 %placeholder
Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。来看一个演示：
%mt5 { margin-top: 5px;
}
%pt5{ padding-top: 5px;
}这段代码没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码：
//SCSS%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn { @extend %mt5; @extend %pt5;
}
.block { @extend %mt5;
span { @extend %pt5;
}
}编译出来的CSS:
//CSS.btn, .block {
margin-top: 5px;
}
.btn, .block span {
padding-top: 5px;
}从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。
sass.jpg
[Sass]插值#{}
使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。Sass 中的插值(Interpolation)就是重要的一部分。让我们看一下下面的例子：
$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties { #{$prop}-#{$side}: $value;
}
}
.login-box {
@include set-value(top, 14px);
}它可以让变量和属性工作的很完美，上面的代码编译成 CSS：
.login-box { margin-top: 14px; padding-top: 14px;
}这是 Sass 插值中一个简单的实例。当你想设置属性值的时候你可以使用字符串插入进来。另一个有用的用法是构建一个选择器。可以这样使用：
@mixin generate-sizes($class, $small, $medium, $big) {
.#{$class}-small { font-size: $small; }.#{$class}-medium { font-size: $medium; }.#{$class}-big { font-size: $big; }}
@include generate-sizes("header-text", 12px, 20px, 40px);编译出来的 CSS:
.header-text-small { font-size: 12px; }.header-text-medium { font-size: 20px; }.header-text-big { font-size: 40px; }个人总结：插值可以能用在属性名中，即:的左边。还可以用在@extend 中。例如：
%updated-status {
margin-top: 20px; background: #F00;}
.selected-status {
font-weight: bold;
}
$flag: "status";
.navigation {
@extend %updated-#{$flag};
@extend .selected-#{$flag};}上面的 Sass 代码是可以运行的，因为他给了我们力量，可以动态的插入 .class 和 %placeholder。当然他们不能接受像 mixin 这样的参数，上面的代码编译出来的 CSS:
.navigation { margin-top: 20px; background: #F00;
}.selected-status, .navigation { font-weight: bold;
}[Sass]注释
在 Sass 中注释有两种方式：
1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”
2、类似 JavaScript 的注释方式，使用“//”
两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示，来看一个示例：
//定义一个占位符%mt5 {
margin-top: 5px;
}/*调用一个占位符*/.box { @extend %mt5;
}编译出来的CSS
.box { margin-top: 5px;
}/*调用一个占位符*/[Sass]数据类型
Sass 和 JavaScript 语言类似，也具有自己的数据类型，在 Sass 中包含以下几种数据类型：
数字: 如，1、 2、 13、 10px；
字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz；
颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
布尔型：如，true、 false；
空值：如，null；
值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。
SassScript 也支持其他 CSS 属性值（property value），比如 Unicode 范围，或 !important 声明。然而，Sass 不会特殊对待这些属性值，一律视为无引号字符串 (unquoted strings)。
[Sass]字符串
SassScript 支持 CSS 的两种字符串类型：
有引号字符串 (quoted strings)，如 "Lucida Grande" 、'http://sass-lang.com'；
无引号字符串 (unquoted strings)，如 sans-serifbold。
在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{ }插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串，这样方便了在混合指令 (mixin) 中引用选择器名。
@mixin firefox-message($selector) {
body.firefox #{$selector}:before {
content: "Hi, Firefox users!";
}
}
@include firefox-message(".header");编译为:
body.firefox .header:before { content: "Hi, Firefox users!";
}[Sass]值列表
所谓值列表 (lists) 是指 Sass 如何处理 CSS 中:
margin: 10px 15px 0 0
或者：
font-face: Helvetica, Arial, sans-serif
像上面这样通过空格或者逗号分隔的一系列的值。
事实上，独立的值也被视为值列表——只包含一个值的值列表。
Sass列表函数（Sass list functions）赋予了值列表更多功能（Sass进级会有讲解）：
1.nth函数（nth function） 可以直接访问值列表中的某一项；
2.join函数（join function） 可以将多个值列表连结在一起；
3.append函数（append function） 可以在值列表中添加值；
4.@each规则（@each rule） 则能够给值列表中的每个项目添加样式。
值列表中可以再包含值列表，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个值列表的值列表。如果内外两层值列表使用相同的分隔方式，要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)。当值列表被编译为 CSS 时，Sass 不会添加任何圆括号，因为 CSS 不允许这样做。(1px 2px) (5px 6px)与 1px 2px 5px 6px 在编译后的 CSS 文件中是一样的，但是它们在 Sass 文件中却有不同的意义，前者是包含两个值列表的值列表，而后者是包含四个值的值列表。
可以用 () 表示空的列表，这样不可以直接编译成 CSS，比如编译 font-family: ()时，Sass 将会报错。如果值列表中包含空的值列表或空值，编译时将清除空值，比如 1px 2px () 3px 或 1px 2px null 3px。
[Sass运算]加法
加法运算是 Sass 中运算中的一种，在变量或属性中都可以做加法运算。如：
.box { width: 20px + 8in;
}编译出来的 CSS:
.box { width: 788px;
}但对于携带不同类型的单位时，在 Sass 中计算会报错，如下例所示：
.box { width: 20px + 1em;
}编译的时候，编译器会报错：“Incompatible units: 'em' and ‘px'.”
[Sass运算]减法
Sass 的减法运算和加法运算类似，我们通过一个简单的示例来做阐述：
$full-width: 960px;$sidebar-width: 200px;
.content {
width: $full-width - $sidebar-width;
}编译出来的 CSS 如下：
.content { width: 760px;
}同样的，运算时碰到不同类型的单位时，编译也会报错。
[Sass运算]乘法
Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位（比如 em ,px , %），但当一个单位同时声明两个值时会有问题。比如下面的示例：
.box { width:10px * 2px;
}编译的时候报“20px*px isn't a valid CSS value.”错误信息。
如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。上面的示例可以修改成：
box { width: 10px * 2;
}编译出来的 CSS:
.box { width: 20px;
}Sass 的乘法运算和加法、减法运算一样，在运算中有不同类型的单位时，也将会报错。
[Sass运算]除法
Sass 的乘法运算规则也适用于除法运算。不过除法运算还有一个特殊之处。众所周知“/”符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时，直接使用“/”符号做为除号时，将不会生效，编译时既得不到我们需要的效果，也不会报错。一起先来看一个简单的示例：
.box { width: 100px / 2;
}编译出来的 CSS 如下：
.box { width: 100px / 2;
}这样的结果对于大家来说没有任何意义。要修正这个问题，只需要给运算的外面添加一个小括号( )即可：
.box { width: (100px / 2);
}编译出来的 CSS 如下：
.box { width: 50px;
}”/ ”符号被当作除法运算符时有以下几种情况：
• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
• 如果数值被圆括号包围。
• 如果数值是另一个数学表达式的一部分。
Sass 的除法运算还有一个情况。我们先回忆一下，在乘法运算时，如果两个值带有相同单位时，做乘法运算时，出来的结果并不是我们需要的结果。但在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。
[Sass运算]数字运算
在 Sass 运算中数字运算是较为常见的，数字运算包括前面介绍的：加法、减法、乘法和除法等运算。而且还可以通过括号来修改他们的运算先后顺序。和我们数学运算是一样的，一起来看个示例。
.box { width: ((220px + 720px) - 11 * 20 ) / 12 ;
}编译出来的 CSS:
.box { width: 60px;
}
作者：我待前端如初恋
链接：https://www.jianshu.com/p/87e892871ad2
随时随地看视频
