Sass的使用

了解CSS预处理器

CSS只是一门描述性的语言，你只能一行一行单纯地描述，并不能像JavaScript那样使用变量、循环、运算等方式来操作。CSS预处理器的出现，使得我们可以像操作JavaScript那样以“编程”的方式来书写CSS。在CSS预处理器中，我们可以使用变量、循环、函数等方式来简化操作，提高开发效率。
CSS预处理器语言有很多，最常见的有3种：
（1）Sass；
（2）Less；
（3）Stylus；
这些CSS预处理语言都具备编程的特性，这种编程方式相对于纯CSS书写方式来说，具有更加简洁、适应性更强、可读性更佳、更易于代码的维护等优点。

三种预处理器的区别？

Sass和Less差别不大，语法也相近。不管是Sass，还是Less，都可以视为一种基于CSS之上的高级语言，其目的都是为了让CSS开发更为灵活和更强大。但是两者也有以下明显区别：
（1）Sass由于是使用Ruby编写的，所以编译的时候是在服务器端处理；而Less由于是使用JavaScript编写的，所以编译的时候是在浏览器端处理；
（2）Sass拥有更为强大的功能，如循环、函数、混合宏等，而less却没有；
（3）Sass拥有成熟稳定的框架来辅助开发，特别是Compass，而less却没有；
（4）Sass在国内外讨论热度最大，并且有一个稳定强大的团队在维护；
（5）相当多的公司更为倾向于使用Sass，而不是less

认识Sass

Sass是功能最为强大、最成熟、并且是最为流行的CSS预处理器。Sass是一种动态样式语言，比CSS多出好些功能（如变量、嵌套、运算、混入、继承、颜色处理、函数等），更容易阅读。
在Sass中，有2种语法格式：（1）Sass格式；（2）Scss格式。也就是说，平常我们所说的Sass和Scss其实是同一个东西来的，统称为Sass。Sass和Scss仅仅是Sass的两种语法格式罢了。

• Sass格式，是Sass的“旧版本语法”。这种语法格式，不使用大括号“{}”和分号“;”，而是使用严格的缩进式语法规则来书写，也就是类似Ruby语言的写法。移动端用的多
• Scss格式，是Sass的“新版本语法”。这种语法格式，使用大括号“{}”和分号“;”，并不使用严格的缩进式语法规则来书写，也就是类似CSS书写的格式。接下来的例子都采用的Scss格式

更详细了解可参考：Sass官方文档

Sass的注释

编译是指翻译成css文件格式 打包是指压缩成min.css文件

// 单行注释 => 编译不显示,打包不显示   
/* 多行注释 => 编译显示,打包不显示*/
/*! 强制注释 => 编译显示,打包显示 */

Sass的变量

变量的声明语法:定义一个Sass变量必须用“$”开头
例如：$width:10px; $color:red; 通常可以用color变量来定义网页的主题色
可以给变量一个默认值，语法时声明时在后面加上!default 例如：$width:10px !default;
这个值在后面可以根据开发的需要，可以使用一个“同名变量”的值覆盖掉

Sass的分支

在Sass中，我们可以使用“@if语句”来进行条件选择判断。Sass的条件选择语句共有3种：
（1）@if…（单向选择）；
（2）@if…@else…（双向选择）；
（3）@if…@else if…（多向选择）；
例如：

$age: 19;
.box{
    @if($age>18) {
        background-color: pink;
    }@else {
        background-color: blue;
    }
}

编译生成的css代码

.box {
  background-color: pink;
}

使用变量拼接时 语法格式：#{变量}

Sass的循环

for循环

在Sass中，我们可以使用“@for”来实现循环操作

• 方式1：@for $i from 开始值 through 结束值 （包头包尾）
• 方式2：@for $i from 开始值 to 结束值 （包头不包尾）
• 方式3：@each $item in $arr｛$index:index($arr,$item);｝=> 类似于forEach （类似于forEach循环）

例如：

/* 方式一 包头包尾 */
@for $i from 1 through 5 {
    li:nth-child(#{$i}) {
        background-color: pink;
    }
}

/* 方式二 包头不包尾 */
@for $i from 1 to 5 {
    li:nth-child(#{$i}) {
        background-color: pink;
    }
}

$arr: blue, pink, green, black, yellow, red;

/* 方式三 类似于foreach循环 */
@each $item in $arr {
    //$index => 下标
    //$arr => 就是你要遍历的数组
    //$item => 数组的每一项
    $index: index($arr, $item);

    li:nth-child(#{$index}) {
        background-color: $item;
    }
}

编译生成的css代码

@charset "UTF-8";
/* 方式一 包头包尾 */
li:nth-child(1) {
  background-color: pink;
}

li:nth-child(2) {
  background-color: pink;
}

li:nth-child(3) {
  background-color: pink;
}

li:nth-child(4) {
  background-color: pink;
}

li:nth-child(5) {
  background-color: pink;
}

/* 方式二 包头不包尾 */
li:nth-child(1) {
  background-color: pink;
}

li:nth-child(2) {
  background-color: pink;
}

li:nth-child(3) {
  background-color: pink;
}

li:nth-child(4) {
  background-color: pink;
}

/* 方式三 类似于foreach循环 */
li:nth-child(1) {
  background-color: blue;
}

li:nth-child(2) {
  background-color: pink;
}

li:nth-child(3) {
  background-color: green;
}

li:nth-child(4) {
  background-color: black;
}

li:nth-child(5) {
  background-color: yellow;
}

li:nth-child(6) {
  background-color: red;
}

while循环

在Sass中，没有类似于JavaScript的“do...while...”这种语句
Sass中while的使用，例如

$num: 12;

@while $num < 18 {
    .f-#{$num} { 
        font-size: #{$num}px; 
      }
    $num: $num + 2;
}

编译成css代码

.f-12 {
  font-size: 12px;
}

.f-14 {
  font-size: 14px;
}

.f-16 {
  font-size: 16px;
}

Sass的嵌套

选择器嵌套

.home{
    width: 100%;
    height: 100%;
    /* 后代嵌套 */
    .top{
        width: 50%;
        height: 50%;
        div{
            font-size: 20px;
        }
    }
    /* 子代嵌套 */
    >.footer{
        width: 500%;
        height: 500%;
    }
}

/* 群组嵌套 */
.box1{
    .a{
        .b{
            .c1,.c2{
                background-color: pink;
            }
        }
        .b1,.b2,.b3{
            background-color: springgreen;
        }
    }
}

编译生成的css代码

.home {
  width: 100%;
  height: 100%;
  /* 后代嵌套 */
  /* 子代嵌套 */
}

.home .top {
  width: 50%;
  height: 50%;
}

.home .top div {
  font-size: 20px;
}

.home > .footer {
  width: 500%;
  height: 500%;
}

/* 群组嵌套 */
.box1 .a .b .c1,
.box1 .a .b .c2 {
  background-color: pink;
}

.box1 .a .b1,
.box1 .a .b2,
.box1 .a .b3 {
  background-color: springgreen;
}

属性嵌套

/* 属性嵌套 */
.box{
    width: 100%;
    height: 100%;
    // font-size:20px;
    // font-family: 'Courier New';
    // font-weight: 700;
    // font-style: italic;
    /* 属性嵌套 */
    font: {
        size:20px;
        family: 'Courier New';
        weight: 700;
        style: italic;
    }
}

编译生成的css代码

.box {
  width: 100%;
  height: 100%;
  /* 属性嵌套 */
  font-size: 20px;
  font-family: 'Courier New';
  font-weight: 700;
  font-style: italic;
}

连接符嵌套

/* 连接符嵌套 */
ul{
    width: 100%;
    height: 100%;
    li{
        background-color: pink;
        // li的连接符嵌套
        &.active{
            background-color: springgreen;
        }
    }
}

编译生成的css代码

ul {
  width: 100%;
  height: 100%;
}

ul li {
  background-color: pink;
}

ul li.active {
  background-color: springgreen;
}

Sass的混入

@mixin => 混入(对应js里面的函数)
@include => (相当于js里面的调用函数)
如果有参则需要传参 无参不用传参可以不写括号
举一个具有默认参数的函数，例如

//参数默认值 => 取代arguments
@mixin fn($size:20px,$backgroundColor:pink,$color:blue){
    font-size: $size;
    background-color: $backgroundColor;
    color: $color;
}

.box{
    @include fn  //这里可以不写括号
}
.home{
    @include fn(11px,yellow,yellow)
}

编译生成的css代码

.box {
  font-size: 20px;
  background-color: pink;
  color: blue;
}

.home {
  font-size: 11px;
  background-color: yellow;
  color: yellow;
}

Sass的继承

CSS具有2大特性：继承性和层叠性。CSS的继承性，指的是子元素继承了父元素的某些样式属性，例如在父元素中定义字体颜色（color），子元素会继承父元素的字体颜色。
在Sass中，我们可以使用“@extend”来继承一个样式块，从而实现代码的重用。
例如

// @extend
.box{
    width: 100%;
    height: 100%;
    font-size: 20px;
    background-color: pink;
}
.box1{
    @extend .box;
    color:pink;
}

生成的css代码

.box, .box1 {
  width: 100%;
  height: 100%;
  font-size: 20px;
  background-color: pink;
}

.box1 {
  color: pink;
}

在新版本的Sass中，引入了“占位符%placeholder”来优化“继承@extend”的输出
%placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码

%demo1 {
    border-radius:50%;
}

%demo2 {
    background:red;
}

/* 调用 */
a{
    @extend %demo1;
    @extend %demo2;
}

编译生成的css代码

a { border-radius: 50%; }
a { background: red; }

Sass的导入（重点）

此处./01.scss文件中写了.box盒子的样式 ./02.scss文件中写了.home盒子的样式

@import "./01.scss";
@import './02.scss'

编译生成的css代码

.box {
  width: 100px;
  height: 100px;
}

.home {
  width: 100px;
  height: 100px;
}

参考文章：吃土也要学完的sass真是太强大了
参考文章：Sass - 占位符选择器(%placeholder)