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'
    

推荐阅读更多精彩内容