scss一文就够

什么是语法糖

“语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。”

scss是sass的一个升级版本

sass是靠缩进表示嵌套关系，scss是花括号。

 

• SCSS (Sassy CSS)，一款css预处理语言，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感，其实就和css3语法一样，其后缀名是分别为 .scss。

 

推荐官方文档https://sass.bootcss.com/guide

 

语法规则

1. 变量声明（$加变量名：变量值）eg：$primaryColor：red;   $primary_border:1px solid #ccc;调用：

   color: $primary-color;

2. 混合mixin

          

类似于js的函数，我理解为代码块的赋值运算

          

编译后的结果 scss --watch sass:css

          

关于mixin嵌套解包

        

mixin里面的参数

    

    

darken是加深函数

为固定参数设定值

3. scss extend扩展

         

       

子标签也会被继承

      

4.import “”;

5.scss注释

只有强制注释才会编译在css里面

5.scss数据类型

注意要留住一个px

6.scss函数

后面文档会有scss的函数总结

7.颜色

HSL（ ,  , ）

 

两个参数：要调整的颜色和要调整的度数