欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

SASS - 霸气侧漏小红花

程序员文章站 2022-04-24 20:49:51
...
文件后缀名
sass有两种后缀名文件:一种后缀名为sass,不使用大括
号和分号;另一种就是我们这里使用的scss文件,这种和我们
平时写的css文件格式差不多,使用大括号和分号。而本教程中
所说的所有sass文件都指后缀名为scss的文件。在此也建议使
用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错

导入
sass的导入(@import)规则和CSS的有所不同,编译时会将@import
的scss文件合并进来只生成一个CSS文件。但是如果你在sass
文件中导入css文件如@import 'reset.css',那效果跟普通
CSS导入样式文件一样,导入的css文件不会合并到编译后的文
件中,而是以@import方式存在。
所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的
文件命名方法以_开头,如_mixin.scss。这种文件在导入的时
候可以不写下划线,可写成@import "mixin"。

注释
sass有两种注释方式,一种是标准的css注释方式/* */,另一
种则是//双斜杆形式的单行注释,不过这种单行注释不会被转译
出来。

双斜杆单行注释
单行注释跟JavaScript语言中的注释一样,使用又斜杠(//)
,但单行注释不会输入到CSS中。

变量
sass的变量必须是$开头,后面紧跟变量名,而变量值和变量名
之间就需要使用冒号(:)分隔开(就像CSS属性设置一样),如
果值后面加上!default则表示默认值。

混合(mixin)
sass中使用@mixin声明混合,可以传递参数,参数名以$符号
开始,多个参数以逗号分开,也可以给参数设置默认值。声明的
@mixin通过@include来调用。

多个参数mixin
调用时可直接传入值,如@include传入参数的个数小于@mixin
定义参数的个数,则按照顺序表示,后面不足的使用默认值,如
不足的没有默认值则报错。除此之外还可以选择性的传入参数,
使用参数名与值同时传入。