sass语法

分类:Web前端, 发布于 2021-06-05 10:18:25,浏览(182),评论(0)

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; }


评论: