欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Less 快速入门(二)

程序员文章站 2022-07-03 09:06:16
...

文档: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;  //局部有效
}

Less 快速入门(二)

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

Less 快速入门(二)

 

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

Less 快速入门(二)

Namespaces and Accessors

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

    Less 快速入门(二)        Less 快速入门(二)

 

Maps

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

Less 快速入门(二)

作用域(Scope)

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

 

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

 

Less 快速入门(二)  Less 快速入门(二)

注释(Comments)

Less 快速入门(二)

 

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

Less 快速入门(二)