sass/scss 和less 都是在css 的基础上增加了一些更高级的功能，这些功能的扩展使我们更简单高效的开发项目。

Sass(Syntactically Awesome StyleSheets)

Syntactically Awesome StyleSheets:直译————语法上令人吃惊的样式表

Sass是一款强化CSS的辅助工具，它在css语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，通过函数进行颜色值和属性值的运算，也提供控制指令等高级功能和自定义的输出样式； Scss也使用Sass使用的缩进格式，他仅仅在世CSS3的语法上进行扩展，所有的CSS3的语法在Scss上通用。同时SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。

sass和scss的区别

扩展名的不同；Sass 使用的扩展名是.sass,而Scss使用的是.scss。

<style lang="sass" scoped></style> 
<style lang="scss" scoped></style>

2.语法格式不同；Sass使用缩进代替大括号表示属性的某个选择器，用换行代替分号的分割属性。Scss 的写法在CSS3的基础上增加了Sass的缩进格式。

<style lang="scss" scoped>           
    .el-form {
      .test {
        color: red;
        font-size: 20px;
      }
    }
</style>

<style lang="sass" scoped>
$fontS:20px
.el-form
  .test
    color: red
    font-size: $fontS
</style>

less(Learn Style Sheets)

Less 是一门 CSS 预处理语言，向后兼容的css的扩展语言。less使用JavaScript将CSS转换成Less.js的工具。它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Sass和Scss的区别 1.编译环境；Sass安装Ruby环境，在服务端处理。而Less需要引入Less.js文件来处理less代码后输出CSS到浏览器。Less 可以运行在Node或者浏览器端。 2.语法有差异；less 使用@定义一个变量，而sass使用$定义一个变量。Sass 支持使用 if 条件和 for 循环语句, 而less不支持。

// 定义变量
$primary-color: blue;
$danger-color:red;

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


//编译之后
div { border: 1px solid $primary-color; }

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111; 
span { 
   color: @light-blue; 
}

// 编译后---变量也可以进行简单的运算
span{
  color: #6c94be; 
}

最后

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

sass文档官网

less文档官网

sass/scss 和 less 的区别

Sass(Syntactically Awesome StyleSheets)

less(Learn Style Sheets)

最后