sass的用法指南笔记

变量：

$blue:#1875e7;  
.box{color:$blue;}  
$r:right;       
.box{border-#{$r}-radius:5px;}

算术计算：

.box{margin:50px*10%;}

包裹嵌套：

元素：
body{
  .bod{
     color:$blue;
  }
}

属性：
p{
   background：{
     color：red；
   }
}


$父级：
a{ 
   color:red;
   $:hover{
       color:yellow
   }
}

代码注释：

/块注释编译后保留/ // 行内注释忽略省去

样式继承： @extent

     classB{@extent .classA}  //classB继承classA

代码块重用：@mixin

    //定义：
    @mixin left($x,$y){float:left; margin-left:$x;margin-top:$y;}
    //调用：
    .box{ @include left(20px ,30px); }

颜色：

 高亮20%  lighten（#333，20%）
 变暗     darken（）
 灰度     grayscale（#333）
          complement（#cc3） //#33c

@import 插入外部文件

条件语句：@if{} @else{} 循环语句：@for @while each命令：作用与for类似

可编写自定义函数 定义：@function double（$n）{ @return $sn*2; }

调用：#sidebar{ width：dublue（10px）；}