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地址在这里:

<script src="https://cdn.bootcss.com/less.js/3.0.4/less.js"></script>
<script src="https://cdn.bootcss.com/less.js/3.0.4/less.min.js"></script>

当然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%;
}

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;
  1. 嵌套
    Sass和Less均允许元素嵌套。如果父子选择器均用逗号分开,那么编译时会按结合律拆开编译。
    Sass和Less指代上层元素均使用&符号。
  2. 继承
    Sass中,写好的选择器进行集成,需要@extend关键字。
    Less中,直接写入即可:.be-extend-class;
  3. Mixin
    Sass中,需要进行Mixin操作的选择器需要@mixin关键字,选择器后可以传入变量和默认值。