什么是LESSCSS
LESCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，也就是说，我们按照less的标准来写代码，最后编译成css的代码，更方便CSS的编写和维护。
LESS的基本语法
注释
//我是注释，而且不会被编译
/我是注释而且要被编译/
eg：
@charset "utf-8";
body{
/*把背景设置为red色（这句话在css文件里有）*/
background-color:red; //把背景设置为red色（这句话在css文件里没有）
}
## 变量
申明变量用@然后取上变量的名字冒号后跟变量值，使用的时候@和变量名一起用。
- less代码：
@charset "utf-8"
@suiBianQuMing:200px;
.div {
width:@suiBianQuMing;
height:@suiBianQuMing;
background-color:red;
}
- 输出的css代码：
@charset "utf-8"
.div {
width:200px;
height:200px;
background-color:red;
}
## 混合
- 不带参数：
.div1 {
width:200px;
height:200px;
backgorund-color;red;
}
.div2 {
border:1px solid red;
.div1
}
- 带参数，不带默认值：
.div1(@w) {
border:solid red @w;
}
.div2 {
widthz;200px;
height:200px;
.div2(30px);
}
- 带参数，带默认值：
.div1(@w:3px) {
norder:solid red @w'
}
.div2 {
widthz;200px;
height:200px;
.div2(); //不传参（但是得有小括号），默认就是3px，传参就是新值
}
## 匹配模式
- 1
.mydiv(one, @w:200px, @h:200px) {
width: @w;
height: @h;
border:1px solid red;
}
.mydiv(two, @w:200px, @h:200px) {
width:@w;
height: @h;
border: 2px solid blue;
}
.mydiv(three, @w:200px, @h:200px) {
width:@w;
height: @h;
border:3px solid pink;
}
.div2 {
background-color: green;
.div(two) //匹配第二种，后面两个参数选择默认值
}
- 匹配必带参项
1. 必带项的名字取为@_
2. 其他匹配后面的参数也得加上
.mypos(r, @w:200px, @h:200px) {
width:@w;
height:@h;
position:relative;
}
.mypos(f, @w:200px, @h:200px) {
width:@w;
height:@h;
position:fixed;
}
.mypos(@_, @w:200px,@h:200px) { //匹配必带项
background-color: green;
}
.div2 {
.mypos(r) // 匹配第一种，后面的两个参数选默认值，并且还带上了匹配必带项 注：如果匹配到了不存在了，比如参数不是r是s，这时候只会有必带项的代码翻译
}
## 运算
- 加减乘除
@testz:10px;
.div {
width:@test + 10 ; //变量有单位，运算时新数据不用带单位
color:#f011 + 10; // 颜色也可以运算，先把颜色按照16进制的算法做加法在变成对应的颜色，但是颜色的运算很少
}
## 嵌套
<ul class = "ul1">
<li><a href=”#”>测试</a><span>10:30</span></li>
<li><a href=”#”>测试</a><span>10:31</span></li>
<li><a href=”#”>测试</a><span>10:32</span></li>
<li><a href=”#”>测试</a><span>10:33</span></li>
</ul>
对于嵌套标签，以前写css时总是这样表达：
<style>
.ul1{}
.ul1 li{}
.ul1 a{}
.ul1 span{}
</style>
- less的嵌套这样写（a写在li里面还是.ui1里面？ 看生成的css的代码有什么不同）
.ul1 {
xxxx
li {
xxxx
a {
xxxx
}
}
}
- &
&代表嵌套的上一级选择器
css hover 写法：
a{}
a:hover{}
less 写法：
a{
&:hover {} //这里&代表它的上一级就是a
}
## arguments
.div (@w:1px, @c:red, @s:solid) {
border: @w @c @s;
}
.div1 {
.div(2px)
}
用 arguments 效果一样
.div(@w:1px, @c:red, @s:solid) {
border:@arguments;
}
.div1 {
.div(2px)
}
