less和sass优缺点对比

1. 编译难度

sass:  node-sass安装经常报错，而且与nodejs版本绑定，不再更新，dart-sass为纯js实现，性能待提升

less:  编译容易，安装无压力

2. 语法

2.1 循环

sass有多种循环，for, each, while, 语法直观，书写方便，用来生成class非常好用

less没有循环，使用递归代替循环，语法不直观，不好用

sass循环用法

@for $var from <start> through <end>   //through是闭区间
@for $var from <start> to <end> 只包含  //to是前闭后开区间

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
/*编译为*/
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}

@each $var in <list>

/* 遍历列表 */
@each $animal in dog, cat, bird {
    .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
    }
}

/*编译为*/
.dog-icon {
    background-image: url('/images/dog.png'); 
}
.cat-icon {
    background-image: url('/images/cat.png'); 
}
.bird-icon {
    background-image: url('/images/bird.png'); 
}

/* 对象遍历，带key和value */
$colors: (
    p1: rgb(255, 113, 61),
    p2: lightblue,
    p3: lightseagreen
);

@each $key, $color in $colors {
    &.#{$key} {
         background-color: $color;
    }
}

/* 对象遍历，直接写对象 */
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
    #{$header} {
      font-size: $size;
    }
}
/*编译成*/
h1 {
    font-size: 2em; 
}
h2 {
    font-size: 1.5em; 
}
h3 {
    font-size: 1.2em; 
}

/* each多变量，多元组，按列对应 */
@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
/*编译成*/
.puma-icon {
    background-image: url('/images/puma.png');
    border: 2px solid black;
    cursor: default; 
}
.sea-slug-icon {
    background-image: url('/images/sea-slug.png');
    border: 2px solid blue;
    cursor: pointer; 
}
.egret-icon {
    background-image: url('/images/egret.png');
    border: 2px solid white;
    cursor: move; 
}

@while 循环

$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

/* 编译后 */
.while-4 {
    width: 24px;
}
.while-3 {
    width: 23px;
}
.while-2 {
    width: 22px;
}
.while-1 {
    width: 21px;
}

less循环用法

/* Less */
.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}
/* 生成后的 CSS */
.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

2.2 条件分支

sass:  有 if else 判断语句

less:   没有if else，使用when来进行条件判断

sass用法

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
/*编译为*/
p {
  color: green; 
}

less用法

/* Less */
#card{

    // and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
    .border(@width,@color,@style) when (@width>100px) and(@color=#999){
        border:@style @color @width;
    }

    // not 运算符，相当于 非运算 !，条件为 不符合才会执行
    .background(@color) when not (@color>=#222){
        background:@color;
    }

    // , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
    .font(@size:20px) when (@size>50px) , (@size<100px){
        font-size: @size;
    }
}
#main{
    #card>.border(200px,#999,solid);
    #card .background(#111);
    #card > .font(40px);
}

/* 生成后的 CSS */
#main{
  border:solid #999 200px;
  background:#111;
  font-size:40px;
}

2.3 重用

sass:  有 extend 和 @mixin

less:   有 extend  和 方法

sass的extend = less的extend

sass的@mixin = less的方法

sass和less的 extend 编译后，都会将类的重复样式进行合并，而sass的@mixin和less的方法则是直接插入代码，不合并

extend可以精简代码，减少重复代码，适用于纯静态的引用

@mixin和方法则可以传递变量，适用于动态引用代码的情景

sass 用法

/* sass extend基本用法 */
.button {  
    background: green;  
}
.button-1 {  
    @extend .button;  
}
.button-2 {  
    @extend .button;  
}

// 编译后
.button, 
.button-1, 
.button-2 {  
    background: green;  
}

/* sass继承多个类样式 */
.error {
    border: 1px #f00;
    background-color: #fdd;
}
.attention {
    font-size: 3em;
    background-color: #ff0;
}
.seriousError {
    @extend .error;
    @extend .attention;
    border-width: 3px;
}

/* sass mixin基本用法 */
@mixin button {  
    background-color: green;  
}
.button-1 {  
    @include button;  
} 
.button-2 {  
    @include button;  
}

// 编译后
.button {  
    background-color: green;  
}
.button-1 {  
    background-color: green;  
}
.button-2 {  
    background-color: green;  
}

/* sass mixin 使用判断 */
@mixin blockOrHidden($boolean:true) {
    @if $boolean {
        @debug "$boolean is #{$boolean}";
        display: block;
    }
    @else {
        @debug "$boolean is #{$boolean}";
        display: none;
    }
}

.block {
    @include blockOrHidden;
}

.hidden{
    @include blockOrHidden(false);
}

/* sass mixin 使用循环 */
$list: adam john wynn mason kuroir; //$list 就是一个列表

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}

less 用法

/* Less extend */
.animation{
    transition: all .3s ease-out;
    .hide{
      transform:scale(0);
    }
}
#main{
    &:extend(.animation);
}
#con{
    &:extend(.animation .hide);
}

/* 生成后的 CSS */
.animation,#main{
  transition: all .3s ease-out;
}
.animation .hide , #con{
    transform:scale(0);
}

/* Less 方法 */
.boxShadow(...){
    box-shadow: @arguments;
}
.textShadow(@a,...){
    text-shadow: @arguments;
}
#main{
    .boxShadow(1px,4px,30px,red);
    .textShadow(1px,4px,30px,red);
}

/* 生成后的 CSS */
#main{
  box-shadow: 1px 4px 30px red;
  text-shadow: 1px 4px 30px red;
}

参考： Less学习笔记

          scss- 条件语句 循环语句使用

          Sass的控制命令（判断、循环）