变量声明用美刀

$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;
}