Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass有助于更好地组织管理样式文件,以及更高效地开发项目。
- 变量
sass使用$符号来标识变量,你可以把反复使用的css属性值定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值,这对于维护来说很方便,只需修改一处即可。
sass源文件$highlight-color: #f90 !default; // !default表示变量默认值 $highlight-border: 1px solid $highlight-color; .selected { border: $highlight-border; }
编译之后的css
.selected { border: 1px solid #f90; }
- 嵌套
sass 允许将一套css样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器。&代表父选择器。
sass源文件#content { article { h1 { color: #333; } p { margin-bottom: 1.4em; } } aside { background-color: #eee; } article a { color: blue; &:hover { color: red; } }
编译之后的css
#content article h1 { color: #333; } #content article p { margin-bottom: 1.4em; } #content aside { background-color: #eee; } article a { color: blue; } article a:hover { color: red; }
- 混合器
sass的混合器实现大段样式的重用,混合器使用@mixin标识符定义。然后就可以在你的样式表中通过@include来使用这个混合器,放在你希望的任何地方。
sass源文件@mixin rounded-corners { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } notice { background-color: green; border: 2px solid #00aa00; @include rounded-corners; }
编译之后的css
notice { background-color: green; border: 2px solid #00aa00; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
- 继承
sass使用@extend来实现继承。@extend背后最基本的想法是,如果.seriousError @extend .error, 那么样式表中的任何一处.error
都用.error ,.seriousError
这一选择器组进行替换。
sass源文件.error { border: 1px solid red; background-color: #fdd; } .error a { color: red; font-weight: 100; } .seriousError { @extend .error; border-width: 3px; }
编译之后的css
.error, .seriousError { border: 1px solid red; background-color: #fdd; } .error a, .seriousError a { color: red; font-weight: 100; } .seriousError { border-width: 3px; }
- 注释
body { color: #333; // 这种注释内容不会出现在生成的css文件中 padding: 0; /* 这种注释内容会出现在生成的css文件中 */ }
编译之后的css
body { color: #333; padding: 0; /* 这种注释内容会出现在生成的css文件中 */ }
- 导入
sass也有一个@import规则,那些专门为@import命令而编写的sass文件,并不需要生成对应的独立css文件,这样的sass文件称为局部文件。sass局部文件的文件名以下划线开头。当你@import一个局部文件时,还可以不写文件的全名,即省略文件名开头的下划线。//2.scss .center { text-align: center; } //1.scss @import "2";
编译之后的css
.center { text-align: center; }
- 后缀
sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号;另一种就是我们这里使用的 scss 文件,使用大括号和分号。建议使用后缀名为 scss 的文件。 - 函数
使用@function定义函数,可以含有多条语句,需要调用 @return 输出结果。建议在自定义函数前添加前缀避免命名冲突。@function c_pxToem($px) { @return $px/16px + em; } .title { width: c_pxToem(32px); }
编译之后的css
.title { width: 2em; }
- 运算
- 支持数字的加减乘除、取整等运算。
- +可用于连接字符串。
-
#{}
插值语句可以在选择器或属性名中使用变量。 - 注意:/ 被视为除法运算符号只有三种情况
- 如果值被圆括号包裹
- 如果值,或值的一部分,是变量或者函数的返回值
- 如果值是算数表达式的一部分
$border: 2px; .title { height: 20px + 10px; width: 100px - 50px; line-height: 15 * 2px; padding: 10px / (2); margin: 5px + 10px/2; border: $border/2 solid red; } p:before { content: "Foo " + Bar; font-family: sans- + "serif"; } p:after { content: "I ate #{$border} pies!"; }
编译之后的css
.title { height: 30px; width: 50px; line-height: 30px; padding: 5px; margin: 10px; border: 1px solid red; } p:before { content: "Foo Bar"; font-family: sans-serif; } p:after { content: "I ate 2px pies!"; }