Less

css
@horizontal-default-color: #fff;
@horizontal-inverse-color: #000;

.horizontal-variant(@variant) {
  @color: "horizontal-@{variant}-color";
  color: @@color;
}

.horizontal-default{
  .horizontal-variant(~"default");
}
.horizontal-inverse{
  .horizontal-variant(~"inverse");
}

Sass

%占位符

定义的样式，不会出现在css中

css
%icon {
  color:red;
  margin: 0 .5em;
}

default

默认值，若在当前覆盖定义，则以新的为主

css
$primary: $blue !default;

@import

1.css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

2.scss也有一个@import规则，但不同的是，scss的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载。

Postcss

工具：postcss-cli

相关插件（列举几个常用的）：

• autoprefixer：添加前缀
• css-import：将import css 内联到当前文件，减少请求数量
• cssnano：压缩css代码
• cssnext：提前使用css的新特性
• precss：和sass，less预处理器类似