less 变量
css中的颜色和字号使用less 变量来存储less 变量的命名 @color:red;变量命名的规则： 1）必须@符号开头 2）名字不能是数字 3）名字不能包含特殊字符 @a#! @~col 4) 区分大小写@color:red; @n:100px; @font:font-szie:100px;
less 嵌套
css写法：
#header {
color: black
;
}
#header .navigation {
font-size: 12px
;
}
#header .logo {
width: 300px
;
}
less写法：
#header {
color: black
;
.navigation {
font-size: 12px
;
}
.logo {
width: 300px
;
}
}
伪类或者伪类元素的写法必须加&符号
css写法：
a:hover{
color:blue
;
}
less写法：
a{
&:hover{
color:blue
;
}
}
运算 + - * / （）
有括号先算括号按照运算的优先级运算单单位会按照单位显示 60px/2=30px 60/20rem=3rem双单位会按照前面值的单位显示 60rem/20px=3rem字号，宽高，背景色都可以运算运算过程中，运算符号两边必须加空格
混合（Mixins）
混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。
普通混合 举例： less
.w(){
width: 400px
;
height: 400px
;
}
.a{
.
w();
background: red
;
}
.b{
.
w();
background: yellow
;
}
css
.a {
width: 400px
;
height: 400px
;
background: red
;
}
.b {
width: 400px
;
height: 400px
;
background: yellow
;
}
参数混合 less 举例1：.
w(@a,@b){
width: @a;
height: @b;
}
.a{
.
w(100px,200px
);
background: red
;
}
.b{
.
w(300px,400px
);
background: yellow
;
}
举例2：.
w(@a:100px,@b:200px){
width: @a;
height: @b;
}
.a{
.
w();
background: red
;
}
.b{
.
w(300px,400px
);
background: yellow
;
}
less注释符号：
单行注释//多行注释 /**/
