less学习笔记

小咪咪 2021-09-30 01:28 299阅读 0赞

## 1.less的注释 ##

1.  // 嵌套语法 只想给开发人员看到得注释
2.  /*包裹注释 会被编译到css文件中*/

## 2.变量/及变量运算 ##

@width:300px;
    @color:blue;
    @height:@width + 100px;

## 3.作用域/块级作用域 ##

@size:10px;
     body{ 
         background-color:#ccc;
         @size:20px;
         .wrapper{ 
             width:@width;
             height:@height;
             border:1px solid #000;
             @size:30px;
             .box{ 
                 background-color: @color;
                 li{ 
                     @size:40px;
                     font-size:@size;
                     width:80%;
                     height:20px;
                     background-color:#fff;
                     border:1px solid #000;
                     list-style: none;
                     @size:5px;
                     // 变量&符号 &:hover{ 
                         background-color:#000;
                     }
                 }
                 // li:hover{ 
                 // }
             }
         }
     }

## 4.less的混合(将相同样式抽出) ##

.border{ 
         border-top:2px solid #000;
         border-bottom:2px solid red;
     }
    
     body{ 
         background-color:#ccc; .wrapper{ 
             margin:50px auto;
             width:500px;
             height:500px;
             .border; .box{ 
                 margin-top:30px;
                 width:200px;
                 height: 200px;
                 background-color: @color;
                 .border; li{ 
                     width:80%;
                     height:20px;
                     background-color:#fff;
                     border:1px solid #000;
                     list-style: none;
                 }
             }
         }
     }

## 5.带参数的混合 ##

.border(@w,@color){ 
         border:@w solid @color;
     }
     body{ 
         background-color:#ccc; .wrapper{ 
             margin:50px auto;
             width:500px;
             height:500px;
             .border(5px,red); .box{ 
                 margin-top:30px;
                 width:200px;
                 height: 200px;
                 background-color: @color;
                 .border(5px,pink); li{ 
                     width:80%;
                     height:20px;
                     background-color:#fff;
                     border:1px solid #000;
                     list-style: none;
                 }
             }
         }
     }

## 6.带默认值的参数(不传值得时候取默认值) ##

.border(@w:1px,@color:#000){ 
        border:@w solid @color;
    }
    body{ 
        background-color:#ccc; .wrapper{ 
            margin:50px auto;
            width:500px;
            height:500px;
            .border(5px,red); .box{ 
                margin-top:30px;
                width:200px;
                height: 200px;
                background-color: @color;
                .border(); li{ 
                    width:80%;
                    height:20px;
                    background-color:#fff;
                    border:1px solid #000;
                    list-style: none;
                }
            }
        }
    }

## 7.在less中引入模块 ##

@import './triangle.less';
    .wrapper{ 
        width:400px;
        height:400px;
        margin:50px auto; // .box{ 
            .triangleTop(50px,blue) 
        }
    }

## 8.运算 ##

.box{ 
        width:(100+100px);
        height:300px;
        border:3px solid #000;
    }

## 9.变量的延迟加载 ##

延迟加载：变量是延迟加载的，在使用前不一定要预先说明。 意思是指：在前面用了这个变量，但没有定义，但可以在后面给他定义出来，不影响输出。

// 如：编译前： 编译后： div{                                        div { 
    			width: 100px; 								width: 100px;
    			height: 200px;								height: 200px;
    			font-size: @size;							font-size: 20px;
    			color: @color;								color: #333333;
    			}                                      }
    		@size: 20px;