LESS、SCSS相同与区别

2022-05-03 460 阅读1分钟

LESS和SCSS的区别

相同点

LESS和SCSS都是css的预处理器，可以拥有变量，运算，继承，嵌套的功能，使用两者可以使代码更加的便于阅读和维护
都可以通过自带的插件，转成相应的css文件
都可以参数混入，可以传递参数的class，就像函数一样 4，嵌套规则相同，都是class嵌套class

不同点

声明和变量使用。 LESS使用@符号定义变量，SCSS用$符号表示

// LESS
@link-color: red;
.main {
    color: @link-color
}

// SCSS
$scss-color: red;
.main {
    color: $scss-color;
}

变量插值。LESS采用@{xxxx}的形式，SCSS采用${xxxx}的形式
作用：可以采用LESS和SCSS声明变量，变量作为css的选择器
定义类，类选择器选中span标签，给其设置css样式。

// LESS
@main-top: span;
@{ main-top } {
    font-size: 24px;
    color: #fff;
}

// SCSS
$main-top: span;
.@{ main-top } {
    font-size: 24px;
    color: #fff;
}

SCSS支持条件语句，LESS不支持。SCSS可以使用if(){}else{},for循环等等，LESS不支持

@if lightness($color) > 30% {

} @else {}

@for $1 from 1 to 10 {
    .$border-#{$1} {
        border: #{$1}px solid bulue
    }
}

颜色函数。调整色相的话，LESS使用spin()函数，SCSS使用adjust_hue()的函数

// LESS
@state-scuccess-border: darken(spin(@state-success-bg, -10), 5%);

// SCSS
@state-scuccess-border: darken(adjust_hue(@state-success-bg, -10), 5%);