less设置变量（Less 中变量的使用（详解））

less是css的扩展 
    
    
    
。他扩展了变量    
    
    
、mixin  


     


     


     、函数等功能 
    
    
    
，使得css代码写的更有效率
     


     


     


，本篇主要先介绍less的变量
     


     


     


。

一


 




 




 



、变量正常用法（variables）

.less 文件中

@link-color: #000; .btn { color: @link-color; }

编译后的css文件

.btn { color: #000; }

二   

   

   

、变量作为选择器名称使用

语法：变量声明：@变量：值 --------使用：.@{变量}

.less 文件中

@my-selector: btn; .@{my-selector} { color: #000; }

编译后的css文件

.btn { color: #000; }

三   

     

     

    、变量作为属性名称使用

使用方法与作为选择器名称使用一样：

.less 文件中

@property: color; .@{property} { @{property}: red; background-@{property}: green; }

编译后的css文件

.color { color: red; background-color: green; }

四



  




  




  


、变量作为变量名使用

在.less文件中 




 




 




 ，可以使用变量定义另一个变量

.less 文件中

@primary: red; @secondary: blue; .section { @color: primary; .element { color: @@color; } p { color: @secondary; } }

编译后的css文件

.section .element { color: red; } .section p { color: blue; }

五  


  


  


、变量的Lazy Evaluation

变量在使用之前可以不必声明 

   

   

   
，可以在使用之后声明
     

     

     

，如果存在局部变量  




  




  




 ，那么该作用域的属性会引用局部变量 


  


  


  
，如果不存在局部变量
     
     
     
，那么后面声明的变量会覆盖前面声明的变量（如果声明了两个局部变量   




   




   




 ，同理）

.less文件中

.lazy-eval { width: @var; @a: 100px; } @var: @a; @a: 80px; @a: 40px;

编译后的css文件

.lazy-eval { width: 100px; }

六    
     
     
   、属性作为变量

使用$prop语法将属性当作变量来使用

.less文件中

.widget { color: red; background-color: $color; } .ul { height: 20px; .li { padding: $height; } height: 40px; }

编译后的css文件

.widget { color: red; background-color: red; } .ul { height: 20px; height: 40px; } .ul .li { padding: 40px; }

以上就是我对Less中变量使用的总结 



 



 



 
，如其他小伙伴还有什么问题欢迎评论区留言讨论               ，谢谢~~