工具：koala 下載完成后將含有l(wèi)ess文件的文件夾拖入，指出導(dǎo)出的css文件的路徑既可以進(jìn)行編譯脸甘。
下面是less的一些基本的語(yǔ)法：
@border_width: 20px;
/寬度可以計(jì)算/
.border {
width: @border_width+29;
height: @border_width;
background-color: red;
.border_2(7px);
}
.border_2(@width_m) {
border: @width_m solid black;
}
/這個(gè)相當(dāng)于if選擇/
.triangle(top, @w: 5px, @c: yellow) {
border-style: solid;
border-color: transparent transparent @c transparent;
border-width: @w @w @w @w;
}
.triangle(left, @w: 5px, @c: yellow) {
border-style: solid;
border-color: transparent transparent @c transparent;
border-width: 0 0 @w 0;
}
.triangle(right, @w: 5px, @c: yellow) {
border-style: solid;
border-color: transparent transparent @c transparent;
border-width: 0 0 @w 0;
}
.triangle(bottom, @w: 5px, @c: yellow) {
border-style: solid;
border-color: transparent transparent @c transparent;
border-width: 0 0 @w 0;
}
/這個(gè)是他們公共的部分@_必須有惹资，剩下的@也需要帶著/
.triangle(@_, @w: 5px, @c: yellow) {
height: 0;
width: 0;
}
.tr {
.triangle(top, 10px, red)
}
/嵌套/
.list {
width: 300px;
background-color: lightpink;
margin: auto;
padding: 20px;
li {
background-color: yellow;
}
a {
color: blue;
&:hover {
background-color: green;
}
}
}
/當(dāng)所有的屬性都需要使用的時(shí)候可以偷懶使用@arguments/
.test(@color: red ,@wid:30px,@sty:solid){
border:@arguments;
}
.testtt{
.test();
}
/避免編譯/
/已經(jīng)被編譯/
.test_033{
width:calc(300px-30px);
}
/避免編譯/
.test_03{
width:~'calc(300px-30px)';
}
/!important會(huì)給它里面所有的樣式都加上important/
.test_09{
.testtt!important;
}
/有括號(hào)表示這是一個(gè)函數(shù)/
/需要被調(diào)用才能被編譯進(jìn)入css文件里面/
.font-size(){
font-size: 12px;
}
編譯得到的css文件：
/寬度可以計(jì)算/
.border {
width: 49px;
height: 20px;
background-color: red;
border: 7px solid #000000;
}
/這個(gè)相當(dāng)于if選擇/
/這個(gè)是他們公共的部分@_必須有，剩下的@也需要帶著/
.tr {
border-style: solid;
border-color: transparent transparent #ff0000 transparent;
border-width: 10px 10px 10px 10px;
height: 0;
width: 0;
}
/嵌套/
.list {
width: 300px;
background-color: lightpink;
margin: auto;
padding: 20px;
}
.list li {
background-color: yellow;
}
.list a {
color: blue;
}
.list a:hover {
background-color: green;
}
/當(dāng)所有的屬性都需要使用的時(shí)候可以偷懶使用@arguments/
.testtt {
border: #ff0000 30px solid;
}
/避免編譯/
/已經(jīng)被編譯/
.test_033 {
width: calc(270px);
}
/避免編譯/
.test_03 {
width: calc(300px-30px);
}
/!important會(huì)給它里面所有的樣式都加上important/
.test_09 {
border: #ff0000 30px solid !important;
}
/有括號(hào)表示這是一個(gè)函數(shù)/
/需要被調(diào)用才能被編譯進(jìn)入css文件里面/
下面是html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="border">
</div>
<div class="tr"></div>
<ul class="list">
<li><a href="">nihaoaoao</a></li>
<li><a href="">nihaoaoao</a></li>
<li><a href="">nihaoaoao</a></li>
<li><a href="">nihaoaoao</a></li>
<li><a href="">nihaoaoao</a></li>
<li><a href="">nihaoaoao</a></li>
</ul>
</body>
</html>
