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!";
- }
来源: http://www.jianshu.com/p/0738f2d67a18