简单说说Less 与 Sass 区别,技术选型时如何取舍

Sass:

是一种动态样式语言,Sass语法属于缩排语法, 比css比多出很多功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。

Less:

是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量、继承、运算、函数。 Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可在服务端运行。

共同点

1、混入(Mixins)——class中的class;

2、参数混入——可以传递参数的class,就像函数一样;

3、嵌套规则——Class中嵌套class,从而减少重复的代码;

4、运算——CSS中用上数学;

5、颜色功能——可以编辑颜色;

6、名字空间(namespace)——分组样式,从而可以被调用;

7、作用域——局部修改样式;

8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

区别

1、Less和Sass的主要不同就在于他们的编译环境和方式。

Less是基于JavaScript,可由客户端处理,当然更多的是结合webpacknode环境中进行编译。

Sass是基于Ruby的,所以只能在服务器端(Ruby环境)中进行编译。

2、语法结构

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

Less则是传统的{}嵌套结构,比Sass来的更加直观

3、输出设置,Sass提供4中输出选项:

  • nested 嵌套缩进(默认)
  • compact 展开的多行
  • compressed 简洁格式
  • expanded 压缩后

而Less则没有输出设置,只能使用webpack的loader进行处理

4、Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持。

WRITTEN BY

lidong

鄂ICP备20003892号Copyright © 2017-2023 leedong.cn

ABOUT ME

Hello,这里是「我的心情永不立冬」
一个想到什么就做什么的个人站点,所有内容纯主观、有偏见