-
Sass 文件的后缀名
Sass 有两种后缀名文件：
-
.sass
这种后缀名的文件不能使用大括号和分号，否则报错。 -
.scss
这种后缀名的文件和平时写的 css 文件格式差不多，写法和 less 的写法十分类似。
注意！！
本篇笔记所有 sass 文件都指的是后缀名为 scss 的文件！！！
官方文档也建议使用后缀名为 scss 的文件哦～
因为后缀名为 sass 的文件格式要求十分严格，容易报错。
-
使用方法 - 变量
-
使用变量的好处
Sass 的几大重要特性之一就是为 CSS 引入变量，可以将需要反复使用的 css属性值 定义成变量，然后在需要的地方通过变量名来引用，以达到避免重复书写这一属性值。
-
声明变量 & 使用变量
Sass 中使用 $ 符号来标识变量，还有需要十分注意的是，变量后需要加 分号（;），这是强制的，不然会报错。
这里是声明和使用变量的小例子：
$base-color: #F90;
$base-size: 20px;
.box {
color: $base-color;
font-size: $base-size;
}
编译后是这个样子的：
.box {
color: #f90;
font-size: 20px;
}
这里要说明一下：
老版本的 sass 使用 ! 来标识变量，为什么新版本的 sass 要改为 $ 呢？官方文档给出的理由是： 感叹号太丑啦！！！
-
变量还有作用域
当我们要声明当前文件所有属性都可以使用的 变量 时，在 css 规则块 之外声明。如果在 css规则块 之内声明的话，那么该变量就只能在此规则块内使用。这个就有点像 js的变量作用域了，子函数可以访问父函数和全局的变量，sass 的变量也是如此，子css规则块是可以访问父css规则块的变量，反之是不可以的。
一个例子感受一下：
$base-style: 20px;
div{
font-size: $base-style;
$base-color: red;
p{
color: $base-color;
}
}
编译后是这样子的：
div {
font-size: 20px;
}
div p {
color: red;
}
-
变量名的命名说明
sass 的变量名可以和属性名或者选择器名称相同，我觉得最需要提的一点是中划线（-）和下划线（_）了。
在命名变量名的时候，总是避免不了分隔变量中的多个词（如 $base-color），分隔的时候根据自己的喜好可以选择中划线和下划线，并且 sass 支持用中划线声明的变量可以使用下划线的方式引用，反之亦然。
就是这个意思：
$base-color: #F90;
$base_size: 20px;
div{
color: $base_color;
font-size: $base-size;
}
-
使用方法 - 嵌套
-
使用嵌套的好处
我们在写 css 时经常会有这种情况：
#main .panel .box .left { color: red; }
#main .panel .box .right { color: blue; }
#main .panel .root { font-size: 20px; }
重复着去写父元素的选择器很烦人吧，为了避免这样的烦恼，sass 允许书写嵌套的 css，就跟你嵌套 html 标签一样去嵌套 css。
比如上面代码改写为 sass 的嵌套：
#main {
.panel {
.box {
.left { color: red; }
.right { color: blue; }
}
.root { font-size: 20px; }
}
}
-
属性也可以嵌套
sass 中不仅 css 可以嵌套写，连属性都是可以嵌套的。
属性是怎么嵌套的？
$base-size: 20px;
.box{
font-size: $base-size;
background: {
color: #000;
image: url("./imgs/a.jpg")
}
}
注意：background 后面必须加上 冒号( : )
看出来这里面的奇妙了吗，没看出就来看看编译后的样子：
.box {
font-size: 20px;
background-color: #000;
background-image: url("./imgs/a.jpg");
}
-
父选择器的标识符 &
sass 的嵌套在有些场景下是不行的，比如你想要嵌套的选择器里有一个类似于 :hover 的伪类。所以 sass 为这种情况提供了解决的方法——使用一个标识符 & 去表示父选择器。
比如这样：
div{
.box{
.left{ color: blue; }
&:hover { color: red; }
}
}
注意哦，嵌套的 css 也可以使用各种选择器和组合选择器的，十分方便。
-
使用方法 - 计算功能
sass 允许在代码中使用算式，你可以对数字类型的属性值进行计算，就像这样：
$base-size: 20px;
.box{
font-size: $base-size + 10px;
margin-top: (20px/2);
padding-right: 5px * 4;
}
编译后就是你所想象的样子：
.box {
font-size: 30px;
margin-top: 10px;
padding-right: 20px;
}
-
使用方法 - 注释
（这里参考的 阮一峰 的 SASS用法指南，但本人并没有去实践过）
Sass 有两种注释风格：
标准的 CSS 注释：/* comment /，这种类型的注释会保留到编译后的文件。
单行注释：// comment，这种注释指保留在 sass 源文件中，编译后会被省略。
在 / * 后面加一个感叹号，表示这是重要注释。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
/*
这里是重要的注释！
*/
-
使用方法 - 混合器（Mixin）
-
混合器的基本使用
当代码中有一块代码在整个文件中十分类似（例如一致的颜色和字体），为了减少复写，sass 提供混合器，使得这块重复出现的代码可以像属性值变量一样，只写一次但却可以在代码中多次引用。
混合器使用 @mixin 标识符定义，这个标识符给一大段样式代码赋予一个名字，当需要重用这段代码时，@include 可以让你在代码中使用这个混合器。
看一个例子就明白了：
@mixin box-style {
border: 1px solid #f90;
border-radius: 5px;
background-color: #000;
}
.box{
width: 100px;
height: 500px;
@include box-style
}
编译后：
.box {
width: 100px;
height: 500px;
border: 1px solid #f90;
border-radius: 5px;
background-color: #000;
}
当需要多次使用到 box-style 这一块代码时，只需要通过 @include 引入即可，减少了大量的重复代码。
-
混合器中的 CSS 规则
混合器中不仅可以包含属性，还可以包含 css规则，即可以包含选择器和选择器中的属性，比如：
@mixin box-style {
border: 1px solid #f90;
border-radius: 5px;
background-color: #000;
a {
color: blue;
}
}
.box{
width: 100px;
height: 500px;
@include box-style
}
在混合器中加入了 a标签选择器，并且该选择器里还有它的属性，编译后是什么样子呢：
.box {
width: 100px;
height: 500px;
border: 1px solid #f90;
border-radius: 5px;
background-color: #000;
}
.box a {
color: blue;
}
同时设置了类名为 .box 的元素里的 a标签的字体颜色。
-
给混合器传参
混合器还可以接收参数，当需要使用一大段十分类似的代码块时，接收参数的混合器就起了十分大的作用了。
比如，当需要给 .box1 和 .box2 设置相同属性不同属性值时：
@mixin box-style($brg, $br, $bgc, $ac) {
border: 1px solid $brg;
border-radius: $br;
background-color: $bgc;
a {
color: $ac;
}
}
.box1{
width: 100px;
@include box-style(#e6e6e6, 5px, #000, blue)
}
.box2{
height: 500px;
@include box-style(#f5f5f5, 10px, orange, red)
}
编译后：
.box1 {
width: 100px;
border: 1px solid #e6e6e6;
border-radius: 5px;
background-color: #000;
}
.box1 a {
color: blue;
}
.box2 {
height: 500px;
border: 1px solid #f5f5f5;
border-radius: 10px;
background-color: orange;
}
.box2 a {
color: red;
}
还可以为混合器的参数设置默认值，方法如下：
@mixin box-style($brg:#f90, $br:5px, $bgc:#000, $ac:red) {
border: 1px solid $brg;
border-radius: $br;
background-color: $bgc;
a {
color: $ac;
}
}
当使用混合器但却没有传参时，混合器会使用默认值。
-
使用方法 - 继承
在 sass 中，使用继承也是一个减少重复的方法，使用 @extend 来继承指定代码块的 css样式。继承和混合器使用的方法类似，先来看一个例子：
.main-box{
font-size:20px;
color: #e6e6e6;
p {
height:50px;
line-height:50px;
}
}
.left-box{
background-color: #000;
@extend .main-box;
font-size: 16px;
}
编译后的样式：
.main-box, .left-box {
font-size: 20px;
color: #e6e6e6;
}
.main-box p, .left-box p {
height: 50px;
line-height: 50px;
}
.left-box {
background-color: #000;
font-size: 16px;
}
继承与混合器的不同点有：
- 混合器是像变量一样，先用@mixin声明定义，再在代码中使用@include引入混合器；而对于继承来说，是在代码中的某一处使用之前的 CSS 代码块。混合器如果不在代码中使用，css 中是没有这块代码的；但是继承的代码块，即使没有继承它，它也在它该在地方起着自己的作用。
- 跟混合器相比，继承生成的 css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的 css 体积更小，这可以使得站点速度得到提高。
-
使用方法 - 颜色函数
SASS 提供了一些内置的颜色函数，以便于生成系列颜色。
div{
color: lighten(#000, 30%);
border-color: darken(#e6e6e6, .25);
background-color: grayscale(#f90);
color: complement(#cc3);
}
编译后：
div {
color: #4d4d4d;
border-color: #e5e5e5;
background-color: gray;
color: #3333cc;
}
关于颜色的奥妙，自己探究吧。
-
使用方法 - 导入 SASS/CSS 文件
SASS 与 CSS 一样也有一个 @import 规则，不同的是
CSS 是只有执行到 @import 时，浏览器才会去下载其他 CSS 文件，这样会导致页面加载起来特别慢。而
SASS 的 @import 规则在生成 css文件时就把相关文件导入进来，这意味着所有相关的样式被归纳到了同一个 CSS文件中，无需发起额外的下载请求。
另外，所有被导入文件中定义的变量和混合器均可在导入文件中使用。
使用 SASS 的 @import 规则并不需要指明被导入文件的全名，是可以省略 .sass 或者 .scss 文件后缀，这使得可以任意修改被导入文件的语法格式（sass或scss）。
-
局部 SASS 文件
那些专门为 @import 命令而编写的 SASS 文件，并不需要生成 CSS 文件，而是直接被导入其他文件，这些 SASS 文件被称为局部文件。对于局部文件，SASS 有一个特殊的约定来命名它们：
文件名以下划线（ _ ）开头。
SASS 在编译时是不会编译那些以下划线开头的 SASS 文件，而只是把这些文件用作导入。当你 @import 一个局部文件时，你可以省略文件名开头的下划线。
例如，当你想导入 theme/_light-box.scss 这个局部文件时，你可以这样写：
@import "theme/light-box"
-
默认变量值
一般情况下，当你反复声明一个变量时，后面的声明变量的值总会覆盖前面的值。就像 CSS 中你给一个元素设置两个相同的属性，那么后面设置的那个属性值会覆盖前面的。
举例说明：
$base-width: 100px;
$base-width: 200px;
div {
color: red;
color: blue;
width: $base-width;
}
此时，div 的宽度为 200px，字体为 blue。
现在有这样一个情况：当导入一个局部的 SASS 文件时，希望可以修改被导入文件当中的某些变量的值，这时就需要使用 SASS 提供的 !default 标签表示变量的默认值，这个标签的含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认的值。
先举一个例子，再进行具体说明：
// 局部文件: _light-box.scss
$base-color: #f5f5f5 !default;
.box-center {
color: $base-color;
}
/*
!default 标签是在被导入的局部文件中使用的，
在上面这个例子中，给变量 $base-color 设置了 !default ，
这意味着当你导入这个局部文件 ( _light-box.scss ) 之前
如果已经给 $base-color 这个变量声明赋值了
那么这个局部文件的 $base-color 变量就是无效的了。
*/
它就好像 CSS 中的 !import 的对立面，不同的是 !default 用于变量。
-
嵌套导入
SASS 允许 @import 命令写在 CSS 规则内。这样的导入方式，使得导入的局部文件只在该 CSS规则块内有效。
举一个例子说明：
// 局部文件 _light-box.scss
a {
color: blue;
font-size: 20px;
}
// 导入文件
.box-left { @import "light-box" }
// 导入文件编译后
.box-left {
a {
color: blue;
font-size: 20px;
}
}
被导入的局部文件中定义的所有变量和混合器，也只在这个规则范围内生效，不会在全局生效。
-
原生的 CSS 导入
SASS 兼容原生 CSS，所以它也支持原生的 CSS@import。
这里只提供导入 CSS 文件的方法，其中的奥妙可以去官方文档阅读。
将需要被导入的 CSS 文件的后缀名改为 .scss 再导入即可。
-
使用方法 - 高级用法
-
条件语句
关键词：@if @else
$base-size: 100px;
div{
@if $base-size+200 > 100px { border: 1px solid red; }
@else {
border: 1px solid blue;
}
}
编译后：
div {
border: 1px solid red;
}
-
循环语句
关键词：@for @while
// for 循环
@for $i from 1 to 5 {
.box-#{$i} {
width: #{$i * 100}px;
}
}
// while 循环
$j: 1;
@while $j < 5 {
.item-#{$j} {
width: 100px * $j;
}
$j: $j + 1;
}
编译后：
.box-1 {
width: 100px;
}
.box-2 {
width: 200px;
}
.box-3 {
width: 300px;
}
.box-4 {
width: 400px;
}
.item-1 {
width: 100px;
}
.item-2 {
width: 200px;
}
.item-3 {
width: 300px;
}
.item-4 {
width: 400px;
}
还有一种 each 的用法
关键词：@each
// each
@each $member in box-a, box-b, box-c, box-d {
.#{$member} {
background-image: url("./img/#{$member}.jpg");
}
}
编译后：
.box-a {
background-image: url("./img/box-a.jpg");
}
.box-b {
background-image: url("./img/box-b.jpg");
}
.box-c {
background-image: url("./img/box-c.jpg");
}
.box-d {
background-image: url("./img/box-d.jpg");
}
-
自定义函数
关键词：@function @return
@function double($n) {
@return $n * 2
}
.box {
width: double(100px);
}
编译后：
.box {
width: 200px;
}
根据 官方文档 和 《SASS用法指南》- 阮一峰 整理
（毕）
