今天学了什么
变量
$bg:pink;
.header{background:$bg};
$place:top;
如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
.header{
margin-#{$place}:20px;
}
计算功能
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
嵌套
div h{
color:red;
}
可以改写为
div {
hi{
color:red;
}
}
继承
SASS允许一个选择器,继承另一个选择器。比如,现有class1:
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
Mixin
可以重用的代码块
@mixin left {
float: left;
margin-left: 10px;
}
div {
@include left;
}
网友评论