-
它们是什么?
它们是 CSS 预处理器。它是 CSS 上的一种抽象层。它们是一种特殊的语法/语言编译成 CSS。
例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性,如变量,继承,运算, 函数. Less 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox),也可以在服务端运行 (借助 Node.js)。 -
有什么区别?
1、关于变量在Less和Sass中的唯一区别就是Less用@,Sass用$
2、Less环境较Sass简单:Sass的安装需要安装Ruby环境,Less基于JavaScript,是需要引入Less.js来处理代码输出css到浏览器,也可以在开发环节使用Less,然后编译成css文件,直接放在项目中。
3、从功能出发,Sass较Less略强大一些
①sass有变量和作用域。
- $variable,like php;
- #{$variable}like ruby;
- 变量有全局和局部之分,并且有优先级。
②sass有函数的概念; - @function和@return以及函数参数(还有不定参)可以让你像js开发那样封装你想要的逻辑。
-@mixin类似function但缺少像function的编程逻辑,更多的是提高css代码段的复用性和模块化,这个用的人也是最多的。
-ruby提供了非常丰富的内置原生api。
③进程控制:
-条件:@if @else;
-循环遍历:@for @each @while
-继承:@extend
-引用:@import
④数据结构:
- l i s t 类 型 = 数 组 ; − list类型=数组; - list类型=数组;−map类型=object;
其余的也有string、number、function等类型
4、Less与Sass处理机制不一样
前者是通过客户端处理的,后者是通过服务端处理,相比较之下前者解析会比后者慢一点
- 为什么要使用它们?
结构清晰,便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说,封装对浏览器语法差异的重复处理,减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码,可以方便地应用到老项目中。Less 只是在 CSS 语法上做了扩展,所以老的 CSS 代码也可以与 Less 代码一同编译。