对于开发者来说css对于开发者来说都是最基础的，也是最简单的一门语言，无论你是WEB前端开发者还是后端开发者，都是一门必将掌握的语言。但它并不支持变量、函数、混合等功能，但是sass和less解决了这个问题。不管是sass还是less都可以视为一种基于css之上的高级语言，其目的是使得css开发更灵活和更强大，sass的功能比less强大，基本上可以说是一种真正的编程语言了，less则相对清晰明白了，易于上手，对编译环境要求比较宽松。Less与sass有着很多相同之处，也有着较大的差异，今天分享一下它们相同与区别，希望对你的学习与工作有帮助。
一．Less和Sass的定义
1. Less
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。
2. Sass
Sass是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。基于ruby在服务端进行处理。
二．Less和Sass相同之处
Less和Sass在语法上有些共性，比如下面这些：
1、混入(Mixins)——class中的class；
2、参数混入——可以传递参数的class，就像函数一样；
3、嵌套规则——Class中嵌套class，从而减少重复的代码；
4、运算——CSS中用上数学；
5、颜色功能——可以编辑颜色；
6、名字空间(namespace)——分组样式，从而可以被调用；
7、作用域——局部修改样式；
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
三．Less和Sass区别
1. less是基于javascript在客户端进行处理；sass是基于ruby在服务端进行处理；
2. 变量的声明，less用@，sass用$
@color:#f00
.main {
color:@color
}
/************SASS****************/
$color:#f00
.main {
color:$color
}
复制代码
3. sass支持条件语句【if/else/for循环等】，less不支持
@if****
这个@if就不用解释吧，一看都知道是条件判断。这个东西对于浏览器兼容这块可以出不少力量；然后对于写一些基础的scss，控制样式的输出也是一大利器；当然还有很多很多了，反正是个必备的好东西就是了。先来个简单的例子吧：
*//inline-block***
*//ie6-7 *display: inline;*zoom:1;***
@mixin inline-block {
display: inline-block;
@if $lte7 {
*display: inline;*zoom:1;
}
}
复制代码
如果变量$lte7为真，就输出*display: inline;*zoom:1;。
既然有@if，那肯定有@else
*//背景色半透明***
@mixin bgcolor-alpha($bgcolor: rgba(0,0,0,.5)){
color:#fff;
@if $filter{
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#{ie-hex-str($bgcolor)}', endColorstr='#{ie-hex-str($bgcolor)}');
}@else{
background-color: #333;
}
background-color:$bgcolor;
}
复制代码
这是半透明rgba背景的一段代码，高级浏览器用rgba，ie6-8如果开启滤镜用滤镜，不开启滤镜就用纯色，常用于图片下方浮现标题。
**@for******
*// class span1-$gridColumns***
*// span的class循环输出，通过变量$gridSpanSwitch来控制是否输出***
*//-----------------------------------------------------***
$gridColumns: 12 **!default**;
$gridcolumnWidth: 60px **!default**;
$gridGutter: 20px **!default**;
%span-base{
float:left;
margin-left:$gridGutter / 2;
margin-right:$gridGutter / 2;
}
@for $i from 1 through $gridColumns {
.span#{$i} {
@extend %span-base;
width:($gridcolumnWidth + $gridGutter) * $i - $gridGutter;
}
}
复制代码
解析后的css：
float: left;
margin-left: 10px;
margin-right: 10px;
}
.span1 {width: 60px;}
.span2 {width: 140px;}
.span3 {width: 220px;}
.span4 {width: 300px;}
.span5 {width: 380px;}
.span6 {width: 460px;}
.span7 {width: 540px;}
.span8 {width: 620px;}
.span9 {width: 700px;}
.span10 {width: 780px;}
.span11 {width: 860px;}
.span12 {width: 940px;}
复制代码
这样一循环，比一个个写爽多了吧，因为float和margin什么的都一样，所以我们使用占位选择器申明，然后@extend调用，那样就是组合申明了。
4. 变量插值【 less：@{} sass:#{}】
@selector:info
@{selector}{
color:#f00
}
/*************SASS***************/
#{selector}{ color:#f00 }
复制代码
5. 定义，参数的使用
.center(){
text-align:center;
}
#main{
.center
}
/*************SASS***************/
@mixin center{
text-align:center;
}
#main{
@include center
}
复制代码
总结：以上就是less与sass的相同之处与区别，总体来说各有优缺点，使用哪一个还要根据项目而定，不建议两个混合使用，这样的代码比较凌乱。 查看完整附件
作者：CRMEB技术团队
链接：juejin.cn/post/713350…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
