一.定义
1.浏览器只会认HTML,css,JavaScript;而完全不认识less;所以在写less后要对它进行编译,让浏览器认识他。
2.less特点:语法简单
3.使用less的三种方法:
(1)在node中使用;
(2)在浏览器的环境中使用less
(3)可以使用客户端(koala工具)
(补充:在less文件是以.less结尾的插件)
二.less的语法
1.定义变量 ——@后加变量名:
@testwidth:100px;
div{
width:@testwdith;
}
(变量名可以被调用)——补充:less支持双斜线注释,但是编写css的时候会自动过滤掉
2.混合(mixins)
ul{
div;( 可以直接把上面定义好的变量拿来用)
}
3.带参数混合(象函数一样定义一个参数的属性集合)
.border-radius(@radius){
.border-radius:@radius;
}
.header{
.border-radius(5px)——实参转入
}
还可以给参数设置默认值
.border-radius(@radius;5px);
4.匹配模式(它相当于但又不完全是JS中的if,只有满足条件后才能匹配)
- 定义一些浮动方向的样式:
// 传参 r ,对应 右浮 ;
.flo(r){
float: right;
}
// 传参 l ,对应匹配 左浮动;
.flo(l){
float: left;
}
5.嵌套规则
ul{
width:300px;
height:300px;
li{
(在ul标签中嵌套一个li标签)
}
}
6.符号&;
在元素中使用&符号就表示元素本身
a {
color: red;
text-decoration: none;
&:hover {// 有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素
color: black;
text-decoration: underline;
}
}
7.运算:
@num:30px;
.d{
width:100px +@num (有一个带单位即可)
}(width:130px)
8.避免编译
示例如下
.left,.right{
float: left;
height: 300px;
}
.left{
width: 300px;
background-color: #f00
}
.right{
不想被编译,拿给浏览器进行运算
width: ~"calc(100% - 300px)";//calc这个运算是给浏览器运算的,不是运算好的
background-color: #0f0;
}
通过calc函数来让浏览器进行运算