Less 中变量的使用（详解）

Posted 2023-04-04 小张同学IT

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中变量使用的总结，如其他小伙伴还有什么问题欢迎评论区留言讨论，谢谢~~

详解less中的变量

变量是less入门基础知识，他适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET（重置样式表），在 Web 开发中，我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为，这里可以使用 LESS 的变量特性，这样就可以在不同的项目间重用样式表，我们仅需要在不同的项目样式表中，根据需求重新给变量赋值即可。

 @border-color : #b5bcc7;

 

 .mythemes tableBorder{

   border : 1px solid @border-color;

 }

 .mythemes tableBorder {

  border: 1px solid #b5bcc7;

 }

生命周期

局部变量还是全局变量
查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局

 @width : 20px;

 #homeDiv {

   @width : 30px;

   #centerDiv{

       width : @width;// 此处应该取最近定义的变量 width 的值 30px

              }

 }

 #leftDiv {

     width : @width; // 此处应该取最上面定义的变量 width 的值 20px

 

 }

 #homeDiv #centerDiv {

  width: 30px;

 } 

 #leftDiv {

  width: 20px;

 }

列表类型

@colors: #FFF, #0F0, #F0F;.skin{color: extract(@colors,0);height: 12px*length(@colors);

}

.skin{color: #FFF;height: 36px;

}

mixins

在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样

  定义一个样式选择器

 .roundedCorners(@radius:5px) {

   -moz-border-radius: @radius;

   -webkit-border-radius: @radius;

   border-radius: @radius;

 }

 

 在另外的样式选择器中使用

 #header {

   .roundedCorners;

 }

 #footer {

   .roundedCorners(10px);

 }

 #header {

 -moz-border-radius:5px;

 -webkit-border-radius:5px;

 border-radius:5px;

 } 

 #footer {

 -moz-border-radius:10px;

 -webkit-border-radius:10px;

 border-radius:10px;

 }

Mixins 其实是一种嵌套，它允许将一个类嵌入到另外一个类中使用，被嵌入的类也可以称作变量，简单的讲，Mixins 其实是规则级别的复用。

Mixins 还有一种形式叫做 Parametric Mixins（混入参数），LESS 也支持这一特性

// 定义一个样式选择器

 .borderRadius(@radius){

 -moz-border-radius: @radius;

 -webkit-border-radius: @radius;

 border-radius: @radius;

 }

 // 使用已定义的样式选择器

 #header {

 .borderRadius(10px); // 把 10px 作为参数传递给样式选择器

 }

 .btn {

 .borderRadius(3px);// // 把 3px 作为参数传递给样式选择器

 

 }

 #header {

 -moz-border-radius: 10px;

 -webkit-border-radius: 10px;

 border-radius: 10px;

 } 

 .btn {

 -moz-border-radius: 3px;

 -webkit-border-radius: 3px;

 border-radius: 3px;

 }

像 JavaScript 中 arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。

 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){

 -moz-box-shadow: @arguments;

 -webkit-box-shadow: @arguments;

 box-shadow: @arguments;

 }

 #header {

 .boxShadow(2px,2px,3px,#f36);

 }

 #header {

 -moz-box-shadow: 2px 2px 3px #FF36;

 -webkit-box-shadow: 2px 2px 3px #FF36;

 box-shadow: 2px 2px 3px #FF36;

 }

当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？

采用了命名空间的方法来避免重名问题

 #mynamespace {

 .home {...}

 .user {...}

 }

这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user。

#bundle {

  .button () {

   display: block;

   border: 1px solid black;

   background-color: grey;

  &:hover { background-color: white

 }

}

 .tab { ... }

 .citation { ... }

}

引入.button

#header a {

 color: orange;

 #bundle > .button;

}

嵌套的规则

 <div id="home"> 

    <div id="top">top</div> 

    <div id="center"> 

        <div id="left">left</div> 

        <div id="right">right</div> 

    </div> 

 </div>

#home{

   color : blue;

   width : 600px;

   height : 500px;

   border:outset;

   #top{

        border:outset;

        width : 90%;

   }

   #center{

        border:outset;

        height : 300px;

        width : 90%;

        #left{

          border:outset;

          float : left;

  width : 40%;

        }

        #right{

          border:outset;

          float : left;

  width : 40%;

        }

    }

 }

 #home {

  color: blue;

  width: 600px;

  height: 500px;

  border: outset;

 } 

 #home #top {

  border: outset;

  width: 90%;

 } 

 #home #center {

  border: outset;

  height: 300px;

  width: 90%;

 } 

 #home #center #left {

  border: outset;

  float: left;

  width: 40%;

 } 

 #home #center #right {

  border: outset;

  float: left;

  width: 40%;

 }

对伪元素

a {

 color: red;

 text-decoration: none;

 &:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素

  color: black;

  text-decoration: underline;

 }

 }

 a {

 color: red;

 text-decoration: none;

 } 

 a:hover {

 color: black;

 text-decoration: underline;

 }

 

原文来自：简书／dadadahui