less简单用法

Posted 2020-08-21

http://less.bootcss.com
less工具：koala
工具url:http://koala-app.com/index-zh.html
// less import:

// less 文件
1 @charset ‘utf-8‘;
2 //导入less文件
3 @import "m";  
4 //导入css文件:
5 //注意导入的css文件位置与编译后css的位置是一致的
6 @import (less) "b.css";

//m.less
1 .cless{
2     @red:red;
3     color:@red;
4 }

//b.css
1 .bcss{
2   color:#ccc;
3 }

//编译后的css文件
@charset ‘utf-8‘;
.cless {
  color: #ff0000;
}
.bcss {
  color: #ccc;
}

// 变量

 //less文件：
 1 @charset ‘utf-8‘;
 2 /* 这是一个编译后看见的注释*/
 3 //这是一个编译后看不见的注释
 4 @_width:300px;
 5 @red:red;
 6 
 7 .col{
 8   //可重复声明使用不影响外调用
 9   @red:#ccc;
10   color: @red;
11 }
12 .col2{
13   color: @red;
14 }

//less编译后的对应css文件：
@charset ‘utf-8‘;
/* 这是一个编译后看见的注释*/
.col {
  color: #cccccc;
}
.col2 {
  color: #ff0000;
}

1. 混合

 1 .bord{
 2   border: 1px solid #000;
 3 }
 4 //例：
 5 .box{
 6     width: @_width;
 7     height: @_width;
 8     background-color: @red;
 9     .bord;//混合
10 }

.bord {
  border: 1px solid #000;
}
.box {
  width: 300px;
  height: 300px;
  background-color: #ff0000;
  border: 1px solid #000;
}

2. 混合-带参数

1 .border_02(@border_width){
2     border: solid yellow @border_width;
3 }
4 //例：
5 .border_hunhe{
6     width: @_width;
7     height: @_width;
8     .border_02(20px);
9 }

.border_hunhe {
  width: 300px;
  height: 300px;
  border: solid #ffff00 20px;
}

3.1 混合-默认值

 1 .border_03(@border_width:10px){
 2     border: @border_width solid green;
 3 }
 4 //例： 混合 不传值
 5 .border_hunhe2{
 6     .border_03();
 7 }
 8 //例： 混合 传值
 9 .border_hunhe21{
10     .border_03(12px);
11 }

.border_hunhe2 {
  border: 10px solid #008000;
}
.border_hunhe21 {
  border: 12px solid #008000;
}

3.2 混合用法:默认值为变量

 1 @bdr:10px;
 2 .border_04(@border_width:@bdr){
 3     border: @border_width solid @red;
 4 }
 5 //例： 混合 不传值
 6 .border_hunhe3{
 7     .border_04();
 8 }
 9 //例： 混合 传值
10 .border_hunhe31{
11     .border_04(13px);
12 }

.border_hunhe3 {
  border: 10px solid #ff0000;
}
.border_hunhe31 {
  border: 13px solid #ff0000;
}

4. 匹配模式

 1 /* 三角形 border */
 2 // 原文url:http://www.cnblogs.com/blosaa/p/3823695.html
 3 //上
 4 .trangle(top,@w:5px,@c:#ccc){
 5     border-width: @w;
 6     border-color: transparent transparent @c transparent ;
 7     border-style: dashed dashed solid dashed ;
 8 }
 9 //右
10 .trangle(right,@w:5px,@c:#ccc){
11     border-width: @w;
12     border-color: transparent transparent transparent @c;
13     border-style: dashed dashed dashed solid;
14 }
15 //下
16 .trangle(bottom,@w:5px,@c:#ccc){
17     border-width: @w;
18     border-color:@c transparent transparent transparent;
19     border-style:solid dashed dashed dashed;
20 }
21 //左
22 .trangle(left,@w:5px,@c:#ccc){
23     border-width: @w;
24     border-color: transparent @c transparent transparent;
25     border-style: dashed solid dashed dashed ;
26 }
27 //匹配通用格式
28 .trangle(@_,@w:5px,@c:#ccc){
29     width: 0;
30     height: 0;
31     overflow: hidden;
32 }
33 //例：
34 .sanjiao{
35   .trangle(right,50px);
36 }
37 
38 //例：传入错误值
39 .sanjiao1{
40     .trangle(dsa,20px);
41 }

/* 三角形 border */
.sanjiao {
  border-width: 50px;
  border-color: transparent transparent transparent #cccccc;
  border-style: dashed dashed dashed solid;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sanjiao1 {
  width: 0;
  height: 0;
  overflow: hidden;
}

5. 运算: 其中一个带单位即可
注意:减法之间的格式;命名变量在运算中不可添加单位

 1 @w10:100px;
 2 @h10:120;
 3 .add{
 4   width: @w10 + 10;
 5   height:@h10 - 10px;
 6   color: #666 / 2;  //可用,不建议
 7 }
 8 .add2{
 9   width: @w10 + 12/2;
10   height:(@h10 - 10)*2px;
11 }
12 
13 .add3{
14   width: @w10 + 10px;
15   height: @h10/3*3px - 6+4;
16 }

.add {
  width: 110px;
  height: 110px;
  color: #333333;
}
.add2 {
  width: 106px;
  height: 220px;
}
.add3 {
  width: 110px;
  height: 118px;
}

6. 嵌套用法

 1 ul{
 2   width: 100px;
 3   //margin: 10px auto;
 4   li{
 5     width: 100px;
 6     float: left;
 7     border-bottom: 1px solid #ccc /2;
 8   }
 9   a{
10     width: 100px;
11     color: red;
12     display: block;
13     //& 上一层选择器的名
14     &:hover{
15       color: blue;
16     }
17     span{
18       font-weight: bold;
19       font-size: 18px;
20       float: right;
21       color: #85ada7;
22     }
23   }
24 }
25  // $的用法
26 .tit{
27   width: 100px;
28   &_n{
29   width: 100px;
30  }
31 }

 1 ul {
 2   width: 100px;
 3 }
 4 ul li {
 5   width: 100px;
 6   float: left;
 7   border-bottom: 1px solid #666666;
 8 }
 9 ul a {
10   width: 100px;
11   color: red;
12   display: block;
13 }
14 ul a:hover {
15   color: blue;
16 }
17 ul a span {
18   font-weight: bold;
19   font-size: 18px;
20   float: right;
21   color: #85ada7;
22 }
23 .tit {
24   width: 100px;
25 }
26 .tit_n {
27   width: 100px;
28 }

7. argument用法

 1 .brd2(@c:#ccc,@w:10px,@solid:solid){
 2   border:@arguments;
 3 }
 4 .bor2{
 5   .brd2();
 6 }
 7 //注意参数对应
 8 .bor21{
 9   .brd2(red);
10 }

.bor2 {
  border: #cccccc 10px solid;
}
.bor21 {
  border: #ff0000 10px solid;
}

8. 避免编译

1 .wid{
2   width:~‘calc(100px - 20px)‘;
3 }

.wid {
  width: calc(100px - 20px);
}

9. important用法

1 .impor(@w:10px,@h:10px){
2   width:@w;
3   height:@h;
4 }
5 .im_a{
6   .impor()!important;
7 }

.im_a {
  width: 10px !important;
  height: 10px !important;
}