简介

        本文介绍less，sass，scss的关系与区别。

相同点

简述

    less、sass、scss，它们都是为了使CSS开发更方便而产生的，都可以称为：动态样式语言。也可以称为：CSS预编译语言。

    原先我们是用原生CSS来写样式，但它不方便，比如：不支持嵌套、运算、作用域 等。

    使用less、sass或scss写样式很方便，它们都支持嵌套、运算、作用域 等，最终它们会被处理为原生的CSS来处理样式。

less和scss在语法上的相同点

  1. 混入(Mixins)
  1. class中的class；
  1. 参数混入
  1. 可以传递参数的class，就像函数一样；
  1. 嵌套规则
  1. Class中嵌套class，从而减少重复的代码；
  1. 运算
  1. CSS中用上数学；
  1. 颜色功能
  1. 可以编辑颜色；
  1. 名字空间(namespace)
  1. 分组样式，从而可以被调用；
  1. 作用域
  1. 局部修改样式；
  1. JavaScript 赋值
  1. 在CSS中使用JavaScript表达式赋值。

sass和scss的区别

        Scss(sassy css)是Sass（(Syntactically Awesome Stylesheets)的改良版本。

        Sass的语法是：使用缩进。这对于写惯css的开发者来说很不直观，也不能将css代码加入到Sass里面。因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)，与原来的语法兼容，只是用{}取代了原来的缩进。

less与sass的区别

见：less与sass(scss)的区别_IT利刃出鞘的博客

选择less还是sass？

建议：sass。

  1. Sass有更成熟的框架，比如说Compass
  2. 很多框架也使用Sass，比如：
  1. bootstrap（Web框架）最新推出的版本4，使用的是Sass
  2. vue-element-admin；
  3. Foundation；
  1. 就国外讨论的热度来说，Sass绝对优于less；