Sass是一款强化css的辅助工具,完全兼容css3
在css基础上增加了变量、嵌套(nesting)、混合(mixins)、导入
Sass有两种语法:一种是scss,一种是sass。一般我们倾向于scss,
两种格式可以相互转换。
变量
当有了变量之后,如果要改变颜色代码,只要修改变量的值就好了
/* 定义颜色变量,要修改颜色值,修改这里就可以了 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* 使用变量 */
.main-header {
background-color: $primary_1;
}
.menu-left {
background-color: $primary_2;
}
.menu-right {
background-color: $primary_3;
}
嵌套
Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器
父选择器
在嵌套 CSS 规则时,有时也需要直接使用嵌套外层的父选择器,例如,当给某个元素设定 hover
样式时,或者当 body
元素有某个 classname 时,可以用 &
代表嵌套规则外层的父选择器。
编译后的 CSS 文件中 &
将被替换成嵌套外层的父选择器,如果含有多层嵌套,最外层的父选择器会一层一层向下传递。
&
必须作为选择器的第一个字符,其后可以跟随后缀生成复合的选择器。
属性嵌套 (Nested Properties)
有些 CSS 属性遵循相同的命名空间 (namespace),比如 font-family, font-size, font-weight
都以 font
作为属性的命名空间。为了便于管理这样的属性,同时也为了避免了重复输入,Sass 允许将属性嵌套在命名空间中。
注释
Sass 支持标准的 CSS 多行注释 /* */
,以及单行注释 //
,前者会 被完整输出到编译后的 CSS 文件中,而后者则不会
变量
SassScript 最普遍的用法就是变量,变量以美元符号开头,赋值方法与 CSS 属性的写法一样
变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加 !global
声明
@import
Sass 拓展了 @import
的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
Sass 在当前地址,或 Rack, Rails, Merb 的 Sass 文件地址寻找 Sass 文件,如果需要设定其他地址,可以用 :load_paths
选项,或者在命令行中输入 --load-path
命令。
通常,@import
寻找 Sass 文件并将其导入,但在以下情况下,@import
仅作为普通的 CSS 语句,不会导入任何 Sass 文件。
- 文件拓展名是
.css
; - 文件名以
http://
开头; - 文件名是
url()
; @import
包含 media queries。