一 预处理样式
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);
}