Sass总结笔记 基础入门（超级直观细节）

一.什么是sass：

1. Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。
2. SASS是对CSS3(层叠样式表)的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用，也就是说它本身的语法并不太容易让浏览器识别(虽然它和CSS的语法非常的像，几乎一样)，因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。
3. 工程越大，css文件越大，重复代码越来越多，会变得难以维护，借助Sass可以提高写css的效率。

二. 安装：

cmd打开本地命令控制窗口，输入下面字符串然后回车就装好了。

npm install -g sass

更多安装方法可以点我Sass去官网。

三.编译.scss文件为.css文件：

Sass使用.scss作为文件后缀名，不能直接在< link >标签里使用，需要编译为 .css文件。
演示：

1. 建一个html文件，随便写个h1标签：
   
2. 建一个.scss后缀的文件，如input.scss，写点基本样式sass的语法：
   
3. 在html文件所在的路径下打开cmd命令控制符，输入：

sass input.scss ouput.css

表示把名字为 input.scss 转换成名字为 ouput.css 的文件（名字自己随意起）。

回车后，接下来发现就得到了css的文件。

css文件内容如下，可以看出转换好了：

接下来就是老操作了，在HTML里用 < link >标签把css文件引入就行。

4. 但是不可能说写一句.scss语句就转换一次，太麻烦，所以可以自动转换，当我在.scss里写一句，.css就自动生成一句。在cmd输入以下：

sass --watch input.scss:ouput.css

表示监视变化，当input.scss一变化，output.css就变化:

5. 如果一个html文件里有多个css文件呢？那么可以直接监视文件夹变化：
如：

sass  --watch  yuan:bian

表示：当名字为yuan这个文件夹里任意一个.scss后缀的文件变化时，就将其编译到名字bian这个文件夹里面（会自动生成相应的.css文件）

四.基础用法与功能：

目录：

1.变量；
2.嵌套；
3.mixin；
4.继承；
5. import；
6. 计算；
7. 颜色函数；
8. Interpolation；
9. if 判断；
10. for循环；
11. 列表循环；
12. while循环；
13.function自定义函数；
…待更新…

详细用法：

1. 变量（定义变量后，在选择器里可以直接引用）：

如：我定义一个变量名为 $yanse，值为颜色rgb(223, 148, 148)

$yanse: rgb(223, 148, 148);

直接在选择器引用：

h1{
   
   
        color: $yanse；
    }

当然变量也可以套娃，比如我定义一个变量名为 $kuang，里面引用了 $yanse

$yanse: rgb(223, 148, 148);
$kuang: 1px solid $yanse;

然后也直接用：

 h1{
   
   
        border: $kuang;
    }

2. 嵌套（父选择器里可以嵌套子选择器）

如：有以下标签

 <div>
        <ul>
            <li></li>
        </ul>     
    </div>

可以直接这样写：

div{
   
   
    height: 100px;
    ul{
   
   
        height: 80px;
        li{
   
   
           height: 50px;
        }
    }
}

相当于：

div {
   
   
  height: 100px;
}
div ul {
   
   
  height: 80px;
}
div ul li {
   
   
  height: 50px;
}

若 li 有伪类选择器：hover可以这样写（里面添加&：hover{}）：

div{
   
   
    height: