LESS 与 SASS

2018-04-12
  • 1685
  • 0

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

SassSass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。

二者的区别可以从字面上来看,Less运行在客户端,而Sass运行在客户端,Less依赖于JavaScript环境,而Sass依赖于Ruby

他们的共性:

混合(Mixins):class中的class;

参数混合(Parametric):可以像函数一样传递参数的class;

嵌套规则(Nested Rules):class中嵌套class,从而减少重复的代码;

运算(Operations):css中的数学计算;

颜色功能(Color function):可以编辑你的颜色;

命名空间(Namespaces):样式分组,从而方便被调用;

作用域(Scope):局部修改样式;

JavaScript表达式(Javascript evaluation):在CSS样式中使用Javascript表达式赋值。

我在项目中的实践:

mac中本身支持Sass ,只需要一行代码就可以将 Sass 安装到你的项目当中:

sudo gem install sass,在Less 最好用的就是变量了,可能对于水平比较菜的我来讲是一个福音吧。一套样式表,可以切换不同的主题,我会把公共颜色分成若干个变量,一般不超过5个颜色,因为设计中颜色的总数不会太多,但是主题风格是一整套的设计。这样一来,我们可以随心所欲的切换样式,达到更好的用户体验,更能为开发节省时间,减少代码量,增加代码的可读性。