less的学习

less笔记

1. 变量

   1	@color: blue;

2. mixin
   将相同的代码分离出来通过函数参数的方式改变对应的值

   1 2 3 4

   .common(@font_size, @color){ font-size: @font_size; color: @color; }

3. extend
   将相同的代码分离出来，通过extend去扩展，可以使得编译后的css文件少一点

   1 2 3 4 5 6 7 8 9 10 11 12

   .common{ font-size: 16px; color: blue; } .div1{ &:extend(.common); font-weight: 400; } .div2{ &:extend(.common); font-weight: 500; }

4. 循环(loop)
   循环的输出class类名，适用于在做响应式布局使用, 该方式是采用循环递归调用自身

   1 2 3 4 5 6 7

   .gen-col(@n) when (@n > 0){ .gen-col(@n - 1); .col-@{n} { width: 1000px / 12*@n; } } .gen-col(12);

5. @import
   less中的import与css不一样之处是css中的import会需要加载多份，less中的import会编译后将所有需要import代码放到一个文件中，降低http请求数

   1	@import "./footer";

6. less预处理框架的解决方案
   est