LESS 与 SCSS

变量

LESS：变量使用 @ 进行标识

less

@mycolor: red;

div {
  width: 100px;
  height: 100px;
  background-color: @mycolor;
}

SCSS：变量使用 $ 进行标识

scss

$mycolor: red;

div {
  width: 100px;
  height: 100px;
  background-color: $mycolor;
}

嵌套

嵌套语法 LESS 与 SCSS 相同

less

// 常规嵌套
ul {
  li {
    color: red;
  }
}

// 伪类/伪元素的嵌套
a {
  &:hover {
    color: red;
  }
}

// BEM 下的嵌套
.header {
  // 效果同 .header__nav {}
  &__nav {
    color: blue;
  }
}

模块化

将公共样式、变量、Minxin 等公用部分定义在同一文件内，使用 @import 的语法进行导入，实现代码的复用。

LESS：建议使用 @import "./base.less"; 引入。
SCSS：建议使用 @import "./base.scss"; 引入。

Mixin

LESS：声明时，像类选择器一样；使用时直接调用即可

less

// 声明
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 调用
div {
  .ellipsis;
}

SCSS：使用 @mixin 声明；使用 @include 调用

scss

// 声明
@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 调用
div {
  @include ellipsis;
}

转换为 CSS

LESS 转换为 CSS：Easy LESS

json

"less.compile": {
      "compress": false,//是否压缩
      "sourceMap": false,//是否生成 map 文件，有了这个可以在调试台看到 less 行数
      "out": "${workspaceRoot}\\css\\", // 是否输出 css 文件，false 为不输出，千万不要是 false
      "outExt": ".css", // 输出文件的后缀，小程序可以写'.wxss'
    },

SCSS 转换为 CSS：Easy Sass

json

"easysass.formats": [
  {
    "format": "compressed", // 压缩
    "extension": ".min.css"
  },
  {
    "format": "expanded", // 未压缩  推荐使用
    "extension": ".css"
  }
],
"easysass.targetDir": "css/", // 自定义 css 输出文件路径 当前目录下
"easysass.compileAfterSave": true, // 为 false 避免这类文件编辑保存后被编译无效

LESS 与 SCSS ​

变量 ​

嵌套 ​

模块化 ​

Mixin ​

转换为 CSS ​

LESS 与 SCSS

变量

嵌套

模块化

Mixin

转换为 CSS