less和scss以及sass的区别精简提炼

最新推荐文章于 2024-06-10 00:05:20 发布

原创最新推荐文章于 2024-06-10 00:05:20 发布 · 956 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

本文详细对比了Less和Sass两种CSS预处理器。Less功能相对简单，易于上手，而Sass则提供了更丰富的特性，如采用缩进格式、支持条件语句和循环。Sass的变量使用$，Less使用@。两者在混合、嵌套、运算和导入方面相似，但在函数和处理方式上有所不同：Less内置多种函数，Sass支持自定义函数并在服务器端处理。Sass还提供四种不同的输出格式选项。对于开发者来说，选择适合自己的CSS预处理器至关重要。

1.less功能相对少，上手比较简单。

2.所谓的sass是scss的前身

3.sass采用缩进格式（缩进和换行替代了花括号和分号），比较精简

4.变量：less为@，sass为$

5.混合，嵌套，运算，导入，注释: 两者基本一致

6.函数，less内置多种函数可以直接使用，Sass 支持自定义函数，使用@function和@return

7.less拥有转义，命名空间和访问符，映射等等

8.sass拥有条件语句，支持@if、@else、@for、@while循环等等

9.sass支持输出格式设置，共四种

Nested	嵌套，默认的输出格式
Expanded	展开，一般的css形式，多行css代码
Compact	紧凑，一行显示
Compressed	压缩，同样一行，但删去了空格、注释等

10.Less是基于JavaScript，在客户端处理；Sass是基于Ruby的，在服务器端处理

其他细节具体查看官网