sass语法
分类:Web前端, 发布于 2021-06-05 10:18:25,评论(0),浏览(714)
1 @import 指令可以让我们导入其他文件等内容。
2 包含文件时不需要指定文件后缀,Sass 会自动添加后缀 .scss
3 如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件,你可以在文件名的开头添加一个下4 划线。这将告诉 Sass 不要将其编译到 CSS 文件
5 如果要导入该文件,则不需要使用下划线
6 注意:请不要将带下划线与不带下划线的同名文件放置在同一个目录下,比如,_colors.scss 和 colors.scss 不能同时存在于同一个目录下,否则带下划线的文件将会被忽略。
7 @mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
8 @extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。
9 Sass 支持标准的 CSS 多行注释 /* */,以及单行注释 //,前者会 被完整输出到编译后的 CSS 文件中,而后者则不会
10 将局部变量转换为全局变量可以添加 !global 声明:
#main { $width: 5em !global; width: $width; } #sidebar { width: $width; }
11 SassScript 支持 6 种主要的数据类型:
数字,1, 2, 13, 10px
字符串,有引号字符串与无引号字符串,"foo", 'bar', baz
颜色,blue, #04a3f9, rgba(255,0,0,0.5)
布尔型,true, false
空值,null
数组 (list),用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)
12 SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值。
关系运算 <, >, <=, >= 也可用于数字运算,相等运算 ==, != 可用于所有数据类型。
+ 可用于连接字符串
p {
cursor: e + -resize;
}
编译为
p { cursor: e-resize; }
13 通过 #{}
插值语句可以在选择器或属性名中使用变量:
$name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; }
编译为
p.foo { border-color: blue; }