今天學(xué)了什么
變量
$bg:pink;
.header{background:$bg};
$place:top;
如果變量需要鑲嵌在字符串之中,就必須需要寫(xiě)在#{}之中串纺。
.header{
margin-#{$place}:20px;
}
計(jì)算功能
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
嵌套
div h{
color:red;
}
可以改寫(xiě)為
div {
hi{
color:red;
}
}
繼承
SASS允許一個(gè)選擇器,繼承另一個(gè)選擇器幸缕。比如兔朦,現(xiàn)有class1:
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
Mixin
可以重用的代碼塊
@mixin left {
float: left;
margin-left: 10px;
}
div {
@include left;
}