变量声明用美刀
$blue:#1875e7;
div{
color:$blue;
}
变量镶嵌在字符串之中,必须写在#{}
$side:left;
.rounded{
border-#{$side}:1px solid $blue;
}
局部变量和全局变量即定义的位置
嵌套可以使用&表示父元素选择器
属性嵌套,注意冒号
.box{
border:{
left:1px solid #000;
top:2px solid #333;
bottom:2px solid #666;
}
}
混合宏:可以重用的代码块
@mixin fl{
float:left;
}
//通过使用@include来调用混合宏
.box2{
@include fl;
}
占位符
%mt5 {
margin-top:5px;
}
.blcok{
@extend %mt5;
}
继承
.class1{
color:red;
}
.class2{
@extend .class1;
}
使用运算符
$num: '1' + '1';
.box3{
top:10px+ 10px;
left:10px-2px;
right:100px * 2;
bottom:(100px/2);//这里/除号在css中有特殊意义,需要在外面加()
}
条件判断@if
@mixin blockOrHidden($boolean:true) {
@if $boolean {
display: block;
}
@else {
display: none;
}
}
.block1 {
@include blockOrHidden;
}
