0


LESS 和 SCSS 的区别

LESS 和 SCSS 的区别

相同点:

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

不同点:

声明和使用变量

LESS用@符号,SCSS用$符号表示

示范:

@link-color:#632bca
$to-color:#632bca
.main{
      color:@link-color    //#632bca颜色LESS
    background-color:$to-color    //#632bca颜色SCSS
}

变量插值

LESS采用@{XXXX}的形式,SCSS采用${XXXX}的形式

作用: 可以用为LESS和SCSS声明变量,变量作为css的选择器

示范:

LESS:

@main-top : search;
.@{ main-top } {
    font-size : 24px;
    color : #fff;
}
// 是用LESS,定义类,类选择器选中search标签,给其设置css样式

SCSS:

$main-top : search;
.@{ main-top } {
    font-size : 24px;
    color : #fff;
}
// 是用scss,定义类,类选择器选中search标签,给其设置css样式

SCSS支持条件语句,LESS不支持

SCSS可以使用if{}else,for循环等等,LESS不支持

示范:

/* Sample Sass “if” statement */
 
@if lightness($color) > 30% {
 
} @else {
 
}
 
/* Sample Sass “for” loop */
 
@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }

应用外部css文件方式不同

SCSS应用的css文件名必须以‘_’开头(下划线),文件名如果以下划线开头的话,sass会认为改文件是一个应用文件,不会将它转成css文件

示范:

// 源代码:
@import "_main.css";
@import "_layout.css";
@import "_text.css";

颜色函数

调整色相的话,LESS使用spin()的函数;SCSS使用名为adjust_hue()的函数

示范:

LESS:

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

SCSS:

$state-success-border: darken(adjust_hue($state-success-bg, -10), 5%);

引用父选择器&符号的使用

LESS和SCSS都可以使用&符号表示父选择器,但是SCSS的&符号只能出现在一个组合选择器的开始位置,LESS则没有这个限制

示范:

LESS:

.bg-variant(@color) {
  background-color: @color;
  a&:hover,
  a&:focus {
    background-color: darken(@color, 10%);
  }
}

SCSS:

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

总结:

SCSS和LESS都是一种基于css之上的高级语言,两者之间各有优点,sass在功能上面比LESS更强大,LESS比较的清晰明了,容易上手,主要是看大家的工作中,更倾向于使用那个进行开发,两者都能够大大提高书写代码的效率

标签: 前端 less sass

本文转载自: https://blog.csdn.net/sky89299/article/details/124484021
版权归原作者 前端楠戈 所有, 如有侵权,请联系我们删除。

“LESS 和 SCSS 的区别”的评论:

还没有评论