Scss

scss 和 less 都是 css 的预处理语言，其中有很多相似的功能，因此本文主要列出 scss 和 less 的相同和不同之处。具体可看文档。

scss 更强大，更接近编译语言。

scss 需要 ruby 环境，less 直接 npm install

变量不同

less：@

scss：$ 可以使用 !global声明全局变量

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

变量插值不同

less：

@main-top : search;
.@{ main-top } {
    font-size ： 24px；
    color : #fff;
}

scss：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

编译为：

p.foo {
  border-color: blue; 
}

混合

都有 mixin

less 将定义好的规则集，放到其它规则集中加()即可

scss 使用 @mixin 定义混入样式，使用 includes 引入混入样式

/* 定义 */
@mixin large-text {
  color: #ff0000;
}

/* 引入 */
.page-title {
  @include large-text;
  padding: 4px;
}

嵌套

都能嵌套，都有父选择器 &

scss 还可以嵌套属性

// 相同前缀的 css 属性，可以以下面的方式嵌套
.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

运算

都可以运算

条件语句与循环语句

scss 可以使用 if else 以及 for while each

/* 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;
    }
}

less 也可以，但使用的是 when、each

参考

less文档

scss文档

https://www.cnblogs.com/cntian/p/13526794.html

https://juejin.cn/post/7091644504586846216#heading-4