【前端】Sass/Scss入门

“Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。”

首先sass是由ruby语言编写的一款css预处理语言，和html一样有严格的缩进风格，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。
那么后来就出现了scss。
SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。

可以使用以下的这个网站，作用就是可以将sass在线编译成css,便于学习。

https://www.sassmeister.com/

Scss 有三大特性： 变量 嵌套 混合器

变量

关于变量的写法就是$符号加上变量名，目的是为减少相同的代码的，比如我要将class为a和id为b的元素都指定为红色，就可以使用变量，这样修改起来很方便。

变量不仅是可以使用常用的字符串，数字等类型，他还支持map的功能，那比如说需要修改字体的大小时

之前学过python或者其他语言的话，可以发现这个map很眼熟，他的用法就是

$name:(
key1 : content1,
key2 : content2
)

在css中使用内置函数

map-get($name,key1)

嵌套

有的时候我们想修改div里包含p 那么可以写成

直接内套在里面，写代码的时候就很方便。那么假如想在这个div本身使用css的话，就可以采用&符号

混合器

混合器就是当css有相同的代码时 我们可以使用mixin
如：

a和b他们的内容相似，那么就可以改成：

@mix定义，@include使用
当然混合器还能传参使用

就相当于python的函数。

那么以上的功能大多是为提高代码的复用性，具体可以参见官网教程：
https://www.sass.hk/