Less 快速入门（二）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hlx20080808/article/details/89495073

文档：https://less.bootcss.com/#overview  

函数（Functions）

	    <link type="text/css" rel="stylesheet/less" href="css/fun1.less" />
		<script src="https://cdn.bootcss.com/less.js/3.9.0/less.js"></script>

	    <div class="dv">函数(Function)</div>

@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;  //局部有效
}

	   <p class="p1">颜色叠加</p>
		<p class="p2">颜色叠加</p>
		<p class="p3">颜色叠加</p>

参考函数手册：https://less.bootcss.com/functions/

Namespaces and Accessors

	<a href="#">查看</a>
		<p/>

            

Maps

<button class="btn">单击按钮</button>

作用域（Scope）

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

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

  

注释（Comments）

导入（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;  //局部有效
}