Less 快速入门（二）

谁借莪１个温暖的怀抱￠ 2023-10-18 17:37 147阅读 0赞

#### **文档：**[https://less.bootcss.com/\#overview][https_less.bootcss.com_overview] ####

## **函数（Functions）** ##

@import "imp"; //导入imp.less文件
    @base:#f04615;
    @width:0.1;
    
    //
    .dv{
        width:percentage(@width);  // percentage 函数将 0.5 转换为 50%
        color:saturate(@base,5%);  //颜色饱和度增加 5%
        background: spin(lighten(@base,25%),8);  //色相值增加 8  
        //lighten(@base,25%)颜色亮度降低 25%
    }
    .p1{
        
        background: @base;
    }
    
    .p2{
        background: spin(@base,30);
    }
    
    
    .p3{
        background: spin(@base,-30);
    }
    
    #bundle() {
      .button {
        width:percentage(@width);  //60%
        height: 50px;
        display: block;
        border: 1px solid black;
        background-color: grey;
        &:hover {
          background-color: white;
        }
      }
    
    }
    
    a{
        color: brown;
        #bundle.button();
    }
    
    /* 块注释*/
    #map{
        primary:red;   //key=value
        second:blue;
    }
    
    .btn{
        background: #map[primary];
        border:4px solid #map[second];
    }
    
    
    
    
    @all:yellow;   //全局有效
    
    #my{
        //导入的文件变量 imp.less
        width: @size;
        height: @height;
        background: @bg;
        
        
    //  @all:blue;    //局部有效
        h1{
            color:@all;
        };
       // @all:red;  //局部有效
    }

![20190424154736900.png][]

![20190424154933625.png][]

#### 参考函数手册：[https://less.bootcss.com/functions/][https_less.bootcss.com_functions] ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

## Namespaces and Accessors ##

![20190424155112631.png][] ![20190424155058857.png][]

## Maps ##

![20190424155212895.png][]

## 作用域（Scope） ##

<div id="my">
    			<h1>作用域Scope</h1>
    		</div>

@all:yellow;   //全局有效
    #my{
        
        @all:blue;    //局部有效
        h1{
            color:@all;
        };
       // @all:red;  //局部有效
    }

![20190424155306798.png][] ![20190424155335165.png][]

## 注释（Comments） ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

## 导入（Importing） ##

“导入”的工作方式和你预期的一样。你可以导入一个 `.less` 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 `.less` 扩展名，则可以将扩展名省略掉：

@import "imp"; //导入imp.less文件

@height:300px;
    @bg:black;
    @size:300px;

#### 在 fun.less使用这个文件: ####

#my{
        //导入的文件变量 imp.less
        width: @size;
        height: @height;
        background: @bg;
        
        
        @all:blue;    //局部有效
        h1{
            color:@all;
        };
       // @all:red;  //局部有效
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2][]

[https_less.bootcss.com_overview]: https://less.bootcss.com/#overview
[20190424154736900.png]: https://img-blog.csdnimg.cn/20190424154736900.png
[20190424154933625.png]: https://img-blog.csdnimg.cn/20190424154933625.png
[https_less.bootcss.com_functions]: https://less.bootcss.com/functions/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190424155937749.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[20190424155112631.png]: https://img-blog.csdnimg.cn/20190424155112631.png
[20190424155058857.png]: https://img-blog.csdnimg.cn/20190424155058857.png
[20190424155212895.png]: https://img-blog.csdnimg.cn/20190424155212895.png
[20190424155306798.png]: https://img-blog.csdnimg.cn/20190424155306798.png
[20190424155335165.png]: https://img-blog.csdnimg.cn/20190424155335165.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190424155500647.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190424155711401.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70