Sass基础

Sass基础

1、什么是Sass

Sass是世界上最好的css扩展语言。在正常的编写css的基础上，增加了很多变量，函数，循环，判断等类似编程语言的代码模式。极大的提高了编写样式的效率。还有许多的内置函数（如颜色加深，颜色淡化）用于高效的属性设置。使得css也可以用类似脚本的方式进行编写。

（1）css编写时权重难以控制，嵌套层级多导致代码编写不方便。sass的出现就是为了解决css的缺点。

（2）sass不能直接被浏览器识别，所以需要进行编译成正常的css文件才能被浏览器使用(vue可以直接使用)。

2、Sass的优点

（1）可维护性：Sass使用缩进和注释来组织代码，使得代码更易于阅读和理解。这使得团队可以更容易地维护大型和复杂的样式表。

（2）变量和混合宏：Sass使用变量来存储颜色、字体、边距等常见值，并在样式表中重复使用这些值。此外，Sass还允许你创建可重用的混合宏，这些宏可以包含一组相关的CSS声明。

（3）嵌套规则：Sass允许你嵌套规则，这意味着你可以在一个规则中定义另一个规则。这可以使你的CSS代码更加简洁和组织良好。

（4）函数和运算：Sass提供了一些内置函数，可以进行颜色运算、字符串操作等。此外，你还可以编写自己的函数来处理特定的任务。

（5）导入和继承：Sass允许你导入其他Sass文件，这使得你可以将你的样式表分解为更小的部分，并使它们更加模块化。此外，Sass还支持继承，这意味着你可以创建一个通用的样式表，并将其应用于多个元素或组件。

（6）自动编译：Sass可以自动编译成CSS文件，你只需要在浏览器中查看编译后的CSS文件即可。

3、Sass环境的安装

（1）安装全局 sass 环境：npm install sass -g

（2）检查是否安装成功：sass --version

4、编译教程

（1）有了全局的 sass 环境以后，我们就可以对 sass 的文件进行编译了

（2）sass 的文件后缀有两种，一种是 .sass 一种是 .scss

（3）他们两个的区别就是有没有 {} 和 ;

scss文件

h1 {
    width: 100px;
    height: 200px;
}

sass文件

h1 
    width: 100px
    height: 200px