Less 变量

概念

使用 @ 符号定义变量，变量分配使用 : 完成。 

声明格式：@变量名：变量值 。

通常看到很多重复的相同的值，我们可以通过使用变量来避免。Less中的变量和其他编程语言一样，可以实现值的复用，同样的它也有作用域，简单的来说就是变量的作用域就是局部变量和全局变量的概念；变量作用域采用的是就近原则，也就是说我们需要先查找自己本身是否有这个变量，如果有就使用自身变量，没有的话就查找上一级父元素，以此类推。

 

可变插值

• 选择器名插值（可以引用任何变量）
• 属性名插值（可以引用任何变量）
• URL插值（用来保存URL，并在url()中使用它）
• import 插值（import语句中，用来保存路径的变量）
• 媒体查询插值

 

导入语句

版本：1.4.0

句法： @import "@{themes}/tidal-wave.less";

注意：在v2.0.0之前，我们仅考虑在根范围或者当前范围内声明的变量，并且在查找变量时仅考虑当前文件和调用文件。

    // 变量
    @themes: "../../src/themes";
    
    // 用法
    @import "@{themes}/tidal-wave.less";

 

属性

版本：1.6.0

    @property: color;
    
    .widget {
      @{property}: #0ee;
      background-@{property}: #999;
    }
    
    // 编译为
    .widget{
        color: #0ee;
        background: #999;
    }

电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

变量名

可以使用变量名称定义变量。

    @fnord:  "I am fnord.";
    @var:    "fnord";
    content: @@var;
    
    // 编译为
    content: "I am fnord.";

 

延迟加载

变量是延迟加载的，无需在使用前声明。

    .lazy-eval-scope {
      width: @var;
      @a: 9%;
    }
    
    @var: @a;
    @a: 100%;
    
    // 编译为
    .lazy-eval-scope {
      width: 9%;
    }

 

默认变量

有时候我们会请求默认变量：一种仅在尚未设置变量的情况下才可以设置的功能，不需要这个功能是因为我们可以通过在后面放置定义来轻松覆盖变量。