LESS 与 SCSS

变量

LESS：变量使用 @ 进行标识

@mycolor: red;

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

SCSS：变量使用 $ 进行标识

$mycolor: red;

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

嵌套

嵌套语法 LESS 与 SCSS 相同

// 常规嵌套
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：声明时，像类选择器一样；使用时直接调用即可

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

// 调用
div {
  .ellipsis;
}

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

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

// 调用
div {
  @include ellipsis;
}

转换为CSS

LESS 转换为 CSS：Easy LESS

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

SCSS 转换为 CSS：Easy Sass

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