less和sass优缺点对比

Posted 2023-03-16 等风来

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的控制命令（判断、循环）