less的应用

今天药忘吃喽~ 2021-09-11 05:32 483阅读 0赞

## less的应用 ##

### 目录 ###

*   *  less的应用
        
         *  目录
         *  注释的用法
         *  less中的变量 声明变量格式为 变量名
         *  混合的用法
         *  匹配模式
         *  匹配模式的简易用法
         *  支持运算
         *  嵌套功能
            
             *  list嵌套的使用
             *  hover的写法
         *  避免编译功能
         *  imporant关键字

### 注释的用法 ###

*使用koala工具来进行编译，把less文件变成css文件*

> 1.  //这种注释在less中可用，在css中不可用。less文件中的//注释不会被编译到生成的css文件中。
> 2.  /\*\*/传统注释，less和css都可以使用

--------------------

### less中的变量, 声明变量格式为 @变量名 ###

1.声明一个变量：

@test_width:300px;

2.使用一个变量：

.box{ widht:@test_width; height:@test_width; }

3.通过koala工具，编译后的css内容为：

.box{ widht:300px; height:300px; }

--------------------

### ‘混合’的用法 ###

1.css之间的套用：

@test_width:300px; .box{
        widht:300px;
        height:300px;
        .border;
    }
    //可以直接调用border属性。
    .border{ border:solid 5px pink; }
    //可以直接调用box的css属性，节约代码
    .box2{ .box; margin:100px; }

2.css传参使用：

.border02(@test_border){ border:solid red @test_border;
    }
    //传入参数调用css
    .test_border{ .border01(30px); //参数传值为30px }

3.css传参，默认可带值

.border03(@test_borer:10px){ border:solid red @test_border;
    }
    //默认值是10px，不传参值就为10px
    .test_border02{ .border03(); } //默认值是10px，传参值就为50px,则效果为50px .test_border02{ .border03(50px); }

--------------------

### 匹配模式 ###

**加强的混合用法**  
*相当于js中的if语句，如果参数为left，则调用left的css样式。如果参数为right，则调用right的css样式。*  
1.声明css部分

//括号内的参数，第一个为left，为定值。第二个width，默认为5px，不传值就为5px，传入新参数就为新参数值。@color同理 .sanjiao(left,@width:5px,@color:red){
        border-width:@width; border-color:@color transparent transparent transparent;
        border-style:solid dashed dashed dashed;
    }
    //括号内的参数，第一个为right，为定值。第二个width，默认为5px，不传值就为5px，传入新参数就为新参数值。@color同理 .sanjiao(right,@width:5px,@color:red){
        border-width:@width; border-color:transparent transparent transparent @color;
        border-style:dashed dashed dashed solid;
    }
    //声明名字为sanjiao的css样式中的公共部分，第一个参数用"@_", 括号后面的参数还是要的 .sanjiao(@_,@width:5px,@color:red){
        width:0;
        heihgt:0;
        overflow:hidden;
    }

2.调用css部分

//根据传入css样式sanjiao的参数来判定调用哪个css样式，“left”或者“right”
    //第二个和第三个参数，如果不传值，则为默认值。传入新参数，则赋值为新参数值。
    .use_sanjiao01{ .sanjiao(left) } .use_sanjiao02{ .sanjiao(right,100px) }

3.实际编译后生成的css样式为：

.use_sanjiao01{ border-width:5px; border-color:red transparent transparent transparent; border-style:solid dashed dashed dashed; //以下的三条为公共部分 width:0; heihgt:0; overflow:hidden; }
    .use_sanjiao02{ //因为传了新参数100px，所以border-width的值为100px border-width:100px; border-color:transparent transparent transparent red; border-style:dashed dashed dashed solid; //以下的三条为公共部分 width:0; heihgt:0; overflow:hidden; }

--------------------

### 匹配模式的简易用法 ###

1.声明部分

.position(f){ position:fixed; }
    .position(r){ position:relative; }
    .position(a){ position:absolute; }

2.调用部分

.div{ width:200px; height:200px; .position(a); }

--------------------

### 支持运算 ###

**less中支持简单的运算**  
1.编译之前的less文件

@test_width:200px; .div{
        width:@test_width + 20;
    }

2.编译之后的css内容

.div{ width:220px; }

--------------------

### 嵌套功能 ###

#### list嵌套的使用 ####

1.没有less之前，原生css对于嵌套的写法，比较繁琐，代码大概如下：

//需要一层一层的定义css样式
    .list{ ...} .list li{...} .list li a{...} .list li span{...}

2.使用less之后。  
假设html的结构如下：  
![这里写图片描述][SouthEast]

在less中编写css乔套样式如下：  
![这里写图片描述][SouthEast 1]

编译过后，生成的css代码如下：  
![这里写图片描述][SouthEast 2]

--------------------

#### hover的写法 ####

1.没用less之前，原生css如下：

.list a{ float:left; }
    .list a:hover{ color:red; }

2.使用less处理css之后，代码如下：

.list{ a{ float:left; //&代表它的上一层选择器，在这里代表 .list a &:hover:{ color:red; }
        }
    }

--------------------

### 避免编译功能 ###

1.less中可以使用 ~” 的方法把代码包含在内，这样 ~” 内部的代码，less就不会进行编译。如下图：  
![这里写图片描述][SouthEast 3]  
我们不需要less来计算calc中的内容，只需要它原封不动的传给css就可以。

--------------------

### ！imporant关键字 ###

1.编译之前代码为：  
![这里写图片描述][SouthEast 4]  
2.编译之后的代码为：  
![这里写图片描述][SouthEast 5]  
**所有的.borer\_radius()样式里面的css样式，都会被加上！imporant属性。**  
*用处：调试css样式的时候可以用到*

--------------------

[SouthEast]: /images/20210813/d6782e7066f24051812817c3a8136d9d.png
[SouthEast 1]: /images/20210813/0a61d45f2968401b9e316916f9cb8adf.png
[SouthEast 2]: /images/20210813/5f9eba5839a8430eb4a124affbbcb5f1.png
[SouthEast 3]: /images/20210813/92839a62229e4690be6e7d5096e74d0e.png
[SouthEast 4]: /images/20210813/69bf07fe1b99419a90b34ff1bfb1c73c.png
[SouthEast 5]: /images/20210813/4d03cc27e27b463c8d2b4e21f8e56091.png