Sass / Scss和Less之间的区别

简述

Sass/Scss和 Less 是 CSS 预处理器，我们可以将它们看作为 CSS 的高级语法

• Sass/Scss 在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能
• Less 在 CSS 语法的基础上增加了变量、Mixin、函数等特性

Sass 和 Scss 的区别

• Sass 是以严格的缩进式语法规则来书写，使用缩进代替花括号后面不需加分号
• Scss 是在 Sass 语法基础上兼容 CSS 的写法

Sass 语法

// 定义变量
$primary-color: #FF0000

div
  width: 30%
  color: $primary-color

Scss 语法

// 定义变量
$primary-color: #FF0000;

div {
  width: 30%;
  color: $primary-color;
}

Sass/Scss 和 Less 的区别

编译环境

• Sass 的安装需要 Ruby 环境，是在服务端处理的
• Less 是引入 less.js 来处理 Less 代码后输出 css 到浏览器, Less 可以运行在 Node 或浏览器端

部分语法(变量符、条件语句)

• 变量 Less 是@，而 Sass 是$
• Sass 支持使用 if 条件和 for 循环语句, Lass 不支持

Sass 语法

// 定义变量
$primary-color: #FF0000;

div {
  @if 1 + 1 == 2 { border: 1px solid $primary-color; }
  @if 5 < 3 { border: 2px dotted $primary-color; }
  @if null  { border: 3px double $primary-color; }
}

编译后

div {
  border: 1px solid $primary-color;
}

Less 语法

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

编译后

#header {
  color: #6c94be;
}

引用外部 CSS 文件

Scss @import 引用的外部文件如果不想编译时多生成同名的 .css 文件，命名必须以 _ 开头, 文件名如果以下划线 _ 开头的话，Sass 会认为该文件是一个引用文件，不会将其编译为同名 css 文件

输出设置和工具库

• Sass提供 4 中输出选项：nested, compact, compressed 和 expanded, 而Less 没有输出设置
• Sass 有工具库 Compass, Less 有UI组件库 Bootstrap

参考

Sass中文官网

Less中文官网