预处理样式less介绍

一 预处理样式
Css预处理器定义了一种新的语言，其基本思想是用一种专门的编程语言，为Css增加一些编程的特性，将Css作为目标生成文件，然后开发者使用这种语言进行Css编码工作(用一种专门的编程语言.
www.lesscass.cn 中文网址
https://less.bootcss.com/
二 less使用
一)在浏览器上直接使用
1.通过less.js代码解析 要放在less代码之下

2.内部使用less或外部引用less 要加说明字段 type=’text/less’

3.以 http形式打开

4.less.watch()可以无刷新预览样式.
缺点:浪费浏览器性能

二)在本地使用
借用编辑器插件,可以直接把less转为css代码

三 变量
一)基本格式:
@变量名:变量值

使用变量:  普通变量: @变量值 ,        其它变量  : @{变量名}

ps:变量名没有绝对要求
二)变量类型:
1)普通变量:
2)选择器变量:
3)url变量
4)属性变量
5)嵌套变量 @@
6)延迟加载 重新赋值 内部的变量会赋值给外部的变量

四 Mixin混合

1.类似于 类 ,可以把多个样式定义为一个属性,由其它样式使用

例:
.wbs{
Width:200px;
Height:200px;
}
#one{
Color:red;
.wbs;
}

2.带参混合 , 不同的参数用逗号
类似于函数

3.层级混合
例:
A{
B{

}
}

五 导引表达式 类似于判断

混合 when (条件){ 样式 }

认识函数:

单位函数: unit(数值,单位)

六 运算
在less中, 颜色与单位都可以运算
例: 5px+1 结果为 6px
#888/4 结果为 #222

七 循环 类似于for循环
遍历使用的是for循环
less没有循环语法
使用函数的迭代 死循环
根据数组的长度去停止当前循环
给函数的执行附加条件

. loop(@counter) when (@counter > 0) {
.loop((@counter - 1));
width: (10px * @counter);

div {
.loop(5);
}