less基础入门

工具：koala 下载完成后将含有less文件的文件夹拖入，指出导出的css文件的路径既可以进行编译。
下面是less的一些基本的语法：

@border_width: 20px;

/宽度可以计算/

.border {
width: @border_width+29;
height: @border_width;
background-color: red;
.border_2(7px);
}

.border_2(@width_m) {
border: @width_m solid black;
}

/这个相当于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;
}

/这个是他们公共的部分@_必须有，剩下的@也需要带着/

.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;
}
}
}
/当所有的属性都需要使用的时候可以偷懒使用@arguments/
.test(@color: red ,@wid:30px,@sty:solid){
border:@arguments;
}
.testtt{
.test();
}

/避免编译/
/已经被编译/
.test_033{
width:calc(300px-30px);
}
/避免编译/
.test_03{
width:~'calc(300px-30px)';
}
/!important会给它里面所有的样式都加上important/
.test_09{
.testtt!important;
}
/有括号表示这是一个函数/
/需要被调用才能被编译进入css文件里面/
.font-size(){
font-size: 12px;
}

编译得到的css文件：
/宽度可以计算/
.border {
width: 49px;
height: 20px;
background-color: red;
border: 7px solid #000000;
}
/这个相当于if选择/
/这个是他们公共的部分@_必须有，剩下的@也需要带着/
.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;
}
/当所有的属性都需要使用的时候可以偷懒使用@arguments/
.testtt {
border: #ff0000 30px solid;
}
/避免编译/
/已经被编译/
.test_033 {
width: calc(270px);
}
/避免编译/
.test_03 {
width: calc(300px-30px);
}
/!important会给它里面所有的样式都加上important/
.test_09 {
border: #ff0000 30px solid !important;
}
/有括号表示这是一个函数/
/需要被调用才能被编译进入css文件里面/

下面是html文件

• nihaoaoao


• nihaoaoao


• nihaoaoao


• nihaoaoao


• nihaoaoao


• nihaoaoao