avatar

目录
less和sass的区别

一、何为less和sass

less和sass都是css的预处理器。为何称之为预处理器呢,它们两者都能为css层叠样式表提供一些编程的特性,比如:定义一个颜色作为变量、函数形式写css等。在less和sass上编写样式完后,最终都会编译生成css文件,然后开发者引入就能展现相应的样式内容了。


转化成通俗易懂的话来说就是“用一种专门的编程语言,进行 Web 页面样式设计,再通过编译器转化为正常的 CSS 文件,以供项目使用”。
——《博客园:云奕》

二、为何使用less和sass

css只是个标记语言,不能自定义变量和嵌套编写等等,如此下来会大大加长开发时间,开发效率得不到提升。

css在一般的开发过程中有以下几个缺点:

  • 语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器
  • 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。

在前端的开发过程中,如果在视图样式方面花过多时间去折腾显然是不行的,所以我们需要一些便捷的开发工具去辅助地去提升开发效率。

三、Sass和Less的比较

1.less环境较sass简单

sass的是基于Ruby环境开发的,在服务端处理,因此需要安装此环境。而less是基于JavaScript开发的(Less和Sass在Ruby中构建相似,但它已被移植到JavaScript中),在客户端处理,是需要引入Less.js来处理代码输出css到浏览器,也可以在开发环节使用Less,然后编译成css文件,直接放在项目中,有less.appSimpleLessCodeKit.app这样的工具,也有在线编辑地址。

2.Less使用较Sass简单

LESS 并没有裁剪 CSS 原有的特性,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。只要你了解 CSS 基础就可以很容易上手。

3.Sass较Less略强大一些

  1. sass有变量和作用域

    • $variable,like php;
    • #{$variable}like ruby;
    • 变量有全局和局部之分,并且有优先级。
  2. sass有函数的概念

    • @function和@return以及函数参数(还有不定参)可以让你像js开发那样封装你想要的逻辑。
    • @mixin类似function但缺少像function的编程逻辑,更多的是提高css代码段的复用性和模块化,这个用的人也是最多的。
    • ruby提供了非常丰富的内置原生api。
  3. 进程控制

    • 条件:@if @else;
    • 循环遍历:@for @each @while
    • 继承:@extend
    • 引用:@import
  4. 数据结构

    • $list类型=数组;
    • $map类型=object;
    • 其他string、number、function等类型

四、其他说明

  1. Sass在市面上有一些成熟的框架,比如说Compass,而且有很多框架也在使用Sass,比如说Foundation。
  2. 就国外讨论的热度来说,Sass绝对优于LESS。
  3. 就学习教程来说,Sass的教程要优于LESS。在国内LESS集中的教程是LESS中文官网,而Sass的中文教程,慢慢在国内也较为普遍。
  4. Sass也是成熟的CSS预处理器之一,而且有一个稳定,强大的团队在维护。
  5. 同时还有Scss对sass语法进行了改良,Sass 3就变成了Scss(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进。
  6. bootstrap(Web框架)最新推出的版本4,使用的就是Sass。

内容参考自——《博客园云奕》

文章作者: Bee
文章链接: http://thebee.fun/2020/07/15/bee54/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 The Bee
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论