less
less可以说是动态化的css语言,主要是因为他的代码可以复用
less的使用:
- 在全局npm 安装less ,并执行
lessc less文件路径 编译完成后的css路径
,然后把编译后的css文件引入到html就可以了 - bootCDN搜索less,然后在html引入
less的功能:
-
生成变量(并且变量是可以运算的)
@变量名:变量值;
@color:#fff+#111
-
混入
-
就是把一个类的样式,混入到另一个类中
-
并且在此过程中还可以传递参数
-
.test{ font-size:10px } .abc(@color){ color:@color } .base{ .test() .abc(red) }
-
-
循环
循环一个**.col-md-1到.col-md-12**的类并且每个类的宽度都是不同值。
.loop(@n,@i:1) when (@i<=@n){}
就相等于写了一个if判断
.loop(@n,(@i+1))
就相当于写了一个for循环
总结:这个函数整体就是一个带if判断的for循环