Sass
1.使用变量
- 变量声明
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
//编译后
nav {
width: 100px;
color: #F90;
}
- 变量引用
$highlight-color: #F90;
.selected {
border: 1px solid $highlight-color;
}
//编译后
.selected {
border: 1px solid #F90;
}
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
//编译后
.selected {
border: 1px solid #F90;
}
- 变量名用中划线还是下划线分隔
$link-color: blue;
a {
color: $link_color;
}
//编译后
a {
color: blue;
}
$link-color和$link_color其实指向的是同一个变量。
2.嵌套CSS 规则
- 父选择器的标识符&
article a {
color: blue;
&:hover { color: red }
}
//编译后
article a { color: blue }
article a:hover { color: red }
- 群组选择器的嵌套
.container {
h1, h2, h3 {margin-bottom: .8em}
}
// 编译后
.container h1, .container h2, .container h3 { margin-bottom: .8em }
- 子组合选择器和同层组合选择器：>、+和~
可以用子组合选择器>选择一个元素的直接子元素。
可以用同层相邻组合选择器+选择header元素后紧跟的p元素。
也可以用同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素。
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
//编译后
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
- 嵌套属性
在sass中，除了CSS选择器，属性也可以进行嵌套。
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
//等价于
nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
对于属性的缩写形式，可以像下边这样来嵌套，指明例外规则
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
//等价于
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
3.导入SASS文件
- 使用sass部分文件
想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";
- 默认变量值
$link-color: blue;
$link-color: red;
a {
color: $link-color;
}
- 嵌套导入
有一个名为_blue-theme.scss的局部文件：
aside {
background: blue;
color: white;
}
然后把它导入到一个CSS规则内，如下所示：
.blue-theme {@import "blue-theme"}
//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
aside {
background: blue;
color: #fff;
}
}
- 原生的CSS导入 4.静默注释
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
5.混合器
下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//sass最终生成：
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
- 何时使用混合器
判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如rounded-cornersfancy-font或者no-bullets，那么往往能够构造一个合适的混合器。 - 混合器中的CSS规则
混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
当一个包含css规则的混合器通过@include包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则。
- 给混合器传参
混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
当混合器被@include时，你可以把它当作一个css函数来传参。
a {
@include link-colors(blue, red, green);
}
//Sass最终生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
当你@include混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可：
a {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
);
}
- 默认参数值
@mixin link-colors(
$normal,
$hover: $normal,
$visited: $normal
)
{
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
6.使用选择器继承来精简CSS
使用sass的时候，最后一个减少重复的主要特性就是选择器继承。
//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
