scss详解

阅读前说明：
左窗口为编译前，右是编译成css后

• 编译前

.box{
    background:red;
    //只有sass可以，less不行
    font:{
        size:12px;
        weight:bold;
    }
}
$num:100px;
.box4{
    width:$num * 3;
   // height: $num+20em;单位不同无法计算
   font:20px /1.5;
   padding:20px / 1.5;//分割操作
   padding:(20px / 1.5);//计算操作
   color:#010101 *2;
}
@function sum($n,$m){//自定义函数
    @return $n+$m;
}
.box5{
    width:round(3.5px);//四舍五入
    height: percentage($number: 0.2);
    margin:random($limit: (100));//随机数乘上100
    padding:random();
    margin-left:sqrt(25%);
    font-size: sum(4px,5px);
}
.show{
    display: block;
}
.box6{
    width:100px;
}
.line{
    display: inline;
}
.box8{
    @extend .line;
}
%line{
    display: block;
}
.box9{
    @extend %line;
}
$background:(
    a:url(a.png),
    b:url(b.png)
);//分号切记别忘了
.box10{
    background:map-values($map: $background);
}
$transform:(
    a:scale(2),
    b:rotate(30deg)
);
.box11{
    background:map-values($map: $background);//有逗号
    transform: zip(map-values($transform)...);//没逗号
}
//tonight begin
.box{
    width:100px;
    @media all and (min-width:768px){
        width:600px;
    }
    @media all and (min-width:1440px){
        width:900px;
    }
}
$count:3;
.box12{
    @if($count>4){
      width:100px+$count;
    }
    @else{
        width:10px+$count;
    }
}
@for $i from 0 through 2{
    .box-#{$i}{//$i就是0到2
        width:100px+$i;
    }
}
@import './beimport';

• 编译后

.box {
  background: red;
  font-size: 12px;
  font-weight: bold;
}

.box4 {
  width: 300px;
  font: 20px /1.5;
  padding: 20px / 1.5;
  padding: 13.33333px;
  color: #020202;
}

.box5 {
  width: 4px;
  height: 20%;
  margin: 98;
  padding: 0.90321;
  margin-left: sqrt(25%);
  font-size: 9px;
}

.show {
  display: block;
}

.box6 {
  width: 100px;
}

.line, .box8 {
  display: inline;
}

.box9 {
  display: block;
}

.box10 {
  background: url(a.png), url(b.png);
}

.box11 {
  background: url(a.png), url(b.png);
  transform: scale(2) rotate(30deg);
}

.box {
  width: 100px;
}

@media all and (min-width: 768px) {
  .box {
    width: 600px;
  }
}

@media all and (min-width: 1440px) {
  .box {
    width: 900px;
  }
}

.box12 {
  width: 13px;
}

.box-0 {
  width: 100px;
}

.box-1 {
  width: 101px;
}

.box-2 {
  width: 102px;
}

.beimport {
  background: red;
}