sass和less sass和less

都是css的拓展语言，less和sass最主要的区别是less是通过Javascript编译，而sass是通过ruby编译的，如果没有引入前端工程化，less会消耗客户端性能，sass会消耗服务端性能，但是引入前端工程化的话，gunt，gulp，webpack等，less和sass在打包阶段都会转化成css，所以不会有区别，只是sass是基于ruby，所以每次npm的时候相对慢一点点

CSS特性 CSS是一种标记性语言。如果没有calc()方法，CSS是不能进行真正意义上的计算的，更不提函数、变量这些了。早期网页开发还处于刀耕火种的时期，每一个样式都需要手写或复制，不能调用。有一个时期，“同一样式多处调用”的需求产生了“原子样式”的写法，类似于：

.center { text-align: center; }

Less特性 Less是晚些产生的语言，基于JS进行开发，在Node中进行编译。所以使用时不需要安装其他语言，不过要记得先导入less文件，然后导入less.js。提供CDN地址在这里：

当然Less也提供服务器端的编译功能。
基本语法：

1. 变量
  Sass: $var
  Less: @var
  两种语言都会有作用域的问题。一个变量只能在它被定义的代码块中使用。重复定义的变量会报错。
1. 运算赋值：
  只要保持单位统一或可相互转换，就可以进行运算，包括颜色在内：

Sass:

p { cursor: e + -resize; } // 编译为 // p { //cursor: e-resize; // }body { margin: (14px/2); top: 50px + 100px; right: $var * 10%; }

【sass和less】Less:

@base: 5%; @filler: @base * 2; @other: @base + @filler; color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler; @var: 1px + 5; width: (@var + 5) * 2; border: (@width * 2) solid black;