less与sass区别

less与sass区别

1.编译环境不同

• Less是基于JavaScript，是在客户端处理的。
• Sass是基于Ruby的，是在服务器端处理的。

2.变量符不一样

• 变量在Less和Sass中的唯一区别就是Less用@，Sass用$

3.输出设置

• Less没有输出设置，Sass提供4中输出选项：nested（嵌套输出）, compact（紧凑输出）, compressed（压缩输出） 和 expanded（展开输出）

举个例子：.scss

nav {  
  ul {  
    margin: 0;  
    padding: 0;  
    list-style: none;  
  }  
  
  li { display: inline-block; }  
  
  a {  
    display: block;  
    padding: 6px 12px;  
    text-decoration: none;  
  }  
}

复制代码

1>nested（嵌套输出）:

nav ul {  
  margin: 0;  
  padding: 0;  
  list-style: none; }  
nav li {  
  display: inline-block; }  
nav a {  
  display: block;  
  padding: 6px 12px;  
  text-decoration: none; } 
复制代码

2>expanded(展开输出)：

nav ul {  
  margin: 0;  
  padding: 0;  
  list-style: none;  
}  
nav li {  
  display: inline-block;  
}  
nav a {  
  display: block;  
  padding: 6px 12px;  
  text-decoration: none;  
} 

复制代码

3> compact(紧凑输出):

nav ul { margin: 0; padding: 0; list-style: none; }  
nav li { display: inline-block; }  
nav a { display: block; padding: 6px 12px; text-decoration: none; }  
复制代码

4>compressed(压缩输出)：

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}  
复制代码

4.条件语句不同

• sass支持条件语句，可以使用if{}else{},for{}循环等等。而less不支持

5.Sass和Less的工具库不同

• Sass有工具库Compass, 简单说，Sass和Compass的关系类似于像Javascript和jQuery的关系,Compass在Sass的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。
• Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。