less 和 scss 对比使用

概念：

变量 语句 函数 继承

1. 变量和插值 作用域

   less:
   @number:123px;
    
   @key:margin;
   
   @i :3;
   
   .box@{i}{
       width:@number;
       @{key}:auto;
   }
   
   sass:
   $number:123px;
   
   $key:margin;
   
   $i :3;
   
   .box#{$i}{
       width: $number;
       #{$key}:auto;
   }
   

2. 嵌套 属性（sass）

   less:
   ul{
       list-style: none;
       li{
           float: left;
           div{
               width: 200px;
           }
       }
       &:hover{ //去除空格
           color:red;
       }
   }
   sass:
   ul{
       list-style: none;
       li{
           float: left;
           div{
               width: 200px;
           }
       }
       &:hover{ //去除空格
           color:red;
           font:{
               size:10px;
               weight:bold;
               family:宋体
           }
       }
   
   }
   

3. 计算

   less:
   
   .box4{
       width: @number*3;
       height:@number+10;
       height:@number+10px;
   }
   
   .box4{
       width: @number*3;
       height:@number+10;
       height:@number+10px;
       height:@number + 10em; //不同单位运算，以运算符前面一个为准
       height:10em+@number;
       font:20px/1.5;
       padding:~"20px/1.5"; //禁止转义
       color:#010203*2;
   }
   
   sass:
   .box4{
        width: $number * 3;
       // height: $number + 10em;//报错 单位不同不能运算
       font: 20px / 1.5; //默认不支持
       padding:(20px/1.5); //可以添加小括号
       color:#010203*2;
    }
   

4. 函数

   less:
   .box4{
       width: round(3.4px);
       height: percentage(0.2);
   }
   
   .box4{
       width: round(3.4px);
       height: percentage(0.2);
       margin: random();
       padding:sqrt(0.25px)
   }
   
   自定义函数：
   sass
   @function sum($n,$m){
       @return $n + $m;
   }
   
   .box5{
       font-size: sum(4px, 5px);
   }
   

5. 混入

   less:
   
   .show{
       display: block;
   }
   
   .hide(){ //加括号后，不会被编译
       display: none;
   }
   
   .colorMy(@color){ //加括号后，不会被编译
       display: none;
       background-color: @color;
   }
   .box6{
       width:100px;
       .show;
       .hide;
       .colorMy(blue);
   }
   
   sass:
   @mixin show {
       display: block;
   }
   @mixin hide($color) {
       display: none;
       color:$color;
   }
   
   .block6{
       width: 100px;
       @include show;
       @include hide(red)
   }
   

6. 命名空间

   less:
   #nm(){
       .show{
           display: inline-block;
       }
   }
   
   .box7{
       #nm.show;
   }
   

7. 继承

   less:
   
   .line{
       display: inline;
   }
   .box8{
       &:extend(.line);
   }
   .box9{
       &:extend(.line);
   }
   以分组的形式编译：
   .line,
   .box8,
   .box9 {
     display: inline;
   }
   
   sass:
   .line{
       display: inline;
   }
   .box8{
       @extend .line;
   }
   .box9{
       @extend .line;
   }
   
   编译结果：
   .line, .box8, .box9 {
     display: inline;
   }
   
   
   %line{
       display: inline;
   }
   .box8{
       @extend %line;
   }
   .box9{
       @extend %line;
   }
   
   编译结果：
   .box8, .box9 {
     display: inline;
   }
   

8. 合并与媒体查询

   less:
   .box10{
       background+: url(./1.jpg);
       background+: url(./2.jpg);
       transform+_: scale(2);
       transform+_: round(30deg);
   }
   编译后：
   .box10 {
     background: url(./1.jpg), url(./2.jpg);
     transform: scale(2) rotate(30deg);
   }
   
   sass:
   $background : (
       a : url(./1.jpg),
       b : url(./2.jpg)
   );
   $tramsform : (
       a : scale(2),
       b : rotate(30deg)
   );
   
   .box10{
       background : map-values($background);
       transform: zip(map-values($tramsform)...);
   }
   
   编译后：
   .box10 {
     background: url(./1.jpg), url(./2.jpg);
     transform: scale(2) rotate(30deg);
   }
   

9. 媒体查询

   .box10{
       width: 100px;
       @media all and (min-width : 768px){
           width:600px;
       }
       @media all and (min-width : 1440px){
           width:900px;
       }
   }
   编译后：
   .box10 {
     width: 100px;
   }
   
   @media all and (min-width: 768px) {
     .box10 {
       width: 600px;
     }
   }
   
   @media all and (min-width: 1440px) {
     .box10 {
       width: 900px;
     }
   }
   

10. 条件和 循环

    less:
    
    @count:5;
    .g(@cn) when (@cn>4){
        width: 100px + @cn;
    }
    
    .g(@cn) when (@cn<4){
        width:100px+@cn;
    }
    
    .box1{
        .g(@count);
    }
    
    sass:
    $count:5;
    .box11{
        @if ($count>4) {
           width:100px + $count; 
        }
        @else{
            width: 10px;
        }
    }
    
    less 循环： 递归调用
    @count2 : 0;
    .get2(@cn)when(@cn<3){
        .get2(@cn+1);
        .box-@{cn}{
            width:100px + @cn;
        }
    }
    
    .get2(@count2);
    
    sass:
    @for $i from 0 through 2 {
        .box-#{$i}{
            width:100px+$i;
        }
    }
    

11. 导入

    @import './reset.scss'