sass知识点总结

1、什么是CSS预处理器，什么是Sass
（1） CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。
（2） Sass是一种最早出现的“CSS预编译处理器”，
进行网页样式设计，然后再编译成正常的CSS文件。
Sass提供了许多便利的写法，大大节省了设计者的时间，
使得CSS开发，变得简单和可维护

2、Sass与SCSS有什么区别
sass后缀名为sass，是sass的老式语法，不使用大括号和分号进行缩进；
scss后缀名为scss,使用大括号和分号进行缩进，是sass的新式语法。
建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。

4、Sass/SCSS和纯CSS对比
CSS没有语句，无法编程，只是单纯的描述

5、了解sass前世和它安装的前提条件
（1）sass 是基于ruby来发明的 这也决定了他前期的语法结构类似ruby的严格缩进的风格
（2）我们想利用sass语言 必须要安装ruby的安装包 以ruby为开发环境 来编写sass
(3) 在ruby环境下使用 gem install sass(网络安装方式)
gem install 本地sass安装包的路径

6. sass的编译
   （1）命令编译
   sass .scss:.css
   （2）GUI图形化界面操作编译
   koala
   (特别注意：)注意ruby 和 koala 安装目录下的核心配置文件的编码格式 为“UTF-8”

7、输出方式
nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。
compressed：压缩后的css代码。

8、普通变量与默认变量
普通变量: $变量名：值;
默认变量: $变量名：值 ！default;

7、局部变量和全局变量
核心内容: 变量名称相同下 局部变量称之为全局变量的影子，
局部变量只在局部区域覆盖全部变量。

8、嵌套：
选择器嵌套，
属性嵌套，
伪类嵌套

9、混合宏的声明、调用、参数
(1)@mixin:声明混合宏的关键字
（2）@include：调用混合宏的关键字
（3）混合宏的传参有三种写法
①. 只传变量名，调用的时候再去传值
②. 变量直接在混合宏中赋值
③. 基于前两种我们也可以传多个参数 注意“ ... ”

10、Sass扩展/继承
继承关键字：@extend
继承特点： 为了减少冗余的css代码

11、占位符
占位符声明关键字：%placeholder
特点：不被继承就不会编译成css代码

12、插值
·是指变量插值，或者变量替换。

        $a:(margin,padding);                //声明一个变量
        @mixin set-value($side,$value){     //声明一个混合宏 和两个形参
            @each $b in $a{                 //遍历语句  $a是被遍历的对象   $b遍历中当前取到的值
                #{$b}-#{$side}:$value;      //动态生成我们想要的属性
            }
        }
        .box{
            @include set-value(top,14px);
        }
        ***编译后的CSS***
        .box{
            margin-top:14px;
            padding-top:14px;
        }
    ·当想设置属性值的时候你可以使用字符串插入进来，另一个有用的用法是构建一个选择器。
        @mixin size($class, $small, $medium, $big){
            .#{$class}-small { font-size:$small; }
            .#{$class}-medium{ font-size: $medium; }
            .#{$class}-big{ font-size: $big; }
        }
        @include size("header-text",12px,20px,40px);
        ***编译后的CSS***
        .header-text-small{ font-size: 12px; }
        .header-text-medium{ font-size: 20px; }
        .header-text-big{ font-size: 40px; }

13、Sass的基本特性-运算

    加法：可以做各种运算，但对于不同类型的单位，在计算时会报错
        .box {
             width: 20px + 8in;
        }   //width: 788px;
    
    减法：和加法类似，碰到不同类型的单位也会报错
        $a:50px;
        $b:10px;
        .box{
            width: $a - $b
        }   //width: 40px;
    
    乘法：能够支持多种单位，但当一个单位同时声明两个值会报错,碰到不同类型的单位也会报错。
        .box {
             width: 10px * 2;
        }   //width: 20px;
        
    除法：除法用/代替  运算的时候要加括号
        .box {
             width: (100px / 2);  
        }   //width:50px;

变量运算
·可以使用变量进行运算

        $a:20px;
        $b:10px;
        $c:5px;
        .box{
            width:$a + $b + $c
        }   //width:35px;
    ```
颜色运算

·红绿蓝各颜色分段单独运算
    p {
        color: #010203 + #040506;
    }   //color: #050709;

字符运算

·用"+"对字符串拼接
    div {
        cursor: e + -resize;
    }   //cursor: e-resize;
```

数字运算

    ·和数学运算一样
        .box {
            width: ((220px + 720px) - 11 * 20 ) / 12 ;  
        }   // width: 60px;