sass 速查手册(part1)
(1)变量$符号来标识变量
$nav-color:#F90;
nav{
$width:100px;
width;$width;
color:$nav-color;
}
(2)嵌套 这里就不阐述了
(3)父选择器的标识符&
article a{
color:blue;
&:hover{
color:red;
}
}
编译后：
article a{
color:blue;
}
article a:hover{
color:red;
}
2-2. 群组选择器的嵌套;
nav, aside {
a{ color:blue}
}
编译后
nav a, aside a{
color:blue;
}
2-3. 子组合选择器和同层组合选择器：>、+和~;
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 }
2-4. 嵌套属性;
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:0;
}
3-3. 嵌套导入;
//blue-theme.scss
aside {
background:blue;
color:white;
}
.blue-theme{
@import "blue-theme"
}
////--------------
.blue-theme{
aside{
background:blue;
color:#fff;
}
}
5. 混合器;
@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;
}
/////
.notice{
background-color:green;
border:2px solid #00aa00;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
5-3. 给混合器传参;
@mixin link-colors($normal, $hover, $visited) {
color:$normal;
&:hover{ color: $hover; }
&:visited{ color:$visited; }
}
a{
@include link-colors(blue, red, green);
}
//------
a{ color:blue;}
a:hover{ color:red;}
a:visited{ color:green;}
5-4. 默认参数值;
@mixin link-colors(
$normal,
$hover:$normal,
$visited:$normal
)
{
color:$normal;
&:hover {color:$hover;}
&:visited{ color:$visited;}
}
如果像下边这样调用：@include link-colors(red) $hover和$visited也会被自动赋值为red。
