less笔记-变量

柔情只为你懂 2022-09-25 13:24 154阅读 0赞

一、less变量的直观优点

比较下面CSS 写法与 less写法：

css：

a,
    .link {
      	color: #428bca;
    }
    .widget {
      	color: #fff;
      	background: #428bca;
    }

less：

// Variables
    @link-color: #428bca; // sea blue
    @link-color-hover:  darken(@link-color, 10%);
    
    // Usage
    a,
    .link {
      	color: @link-color;
    }
    a:hover {
      	color: @link-color-hover;
    }
    .widget {
      	color: #fff;
      	background: @link-color;
    }

从上面可看出，虽然less多了个变量的定义，但其定义的位置是确定的，便于修改维护（maintain），尤其在需要的样式值使用地方较多时。而css 若要修改某个样式，则只能在每个出现的地方逐一修改。

二、less变量的其它用法

less变量除了可用于属性值外，还能用于selector name、property name、url、@import statement。（基础版本1.60）

1、用于selector name：

@mySelector: banner;
    
    // Usage
    .@{mySelector} {
      	font-weight: bold;
      	line-height: 40px;
      	margin: 0 auto;
    }

编译后为：

.banner {
      	font-weight: bold;
     	line-height: 40px;
      	margin: 0 auto;
    }

2、用于property name：

@property: color;
    
    .widget {
     <span style="white-space:pre">	</span>@{property}: #0ee;
      <span style="white-space:pre">	</span>background-@{property}: #999;
    }

编译后：

@\{property\}代替为color。

3、用于URL

// Variables
    @images: "../img";
    
    // Usage
    body {
      	color: #444;
      	background: url("@{images}/white-sand.png");
    }

编译为：

body {
      	color: #444;
      	background: url("../image/white-sand.png");
    }

4、用于@import语句

同理。

**共同点：变量用于此四种情况下，引用时格式均为：@\{变量名\}。**

三、变量的lazy loading

@var: 0;
    .class {
      	 @var: 1;
      	 .brass {
        		@var: 2;
       		three: @var;
       		@var: 3;
      	}
      	one: @var;
    }

lazy loading的含义在于变量的定义位置不必要在其使用位置之前，但其使用范围仍然满足内层优先的原则，且同级定义的相同变量，后一个生效（即将会前一个覆盖）。

上面的代码编译后为：

.class {
      	one: 1; 
    }
    .class .brass {
     	three: 3;
    }

one值为1，因为该处仅有可能访问到值为0和1的变量var，值为1的优先。three为3，因为此处可能访问到所有定义的变量var，值为2与3的var优先级较高，且值为3的var后定义，覆盖了值为2的var，最终使用的var值即为3。

四、默认值

使用变量后定义的覆盖先定义的及lazy loading特性，可在变量未定义（位置上）之前使用某个变量。

// library
    @base-color: green;
    @dark-color: darken(@base-color, 10%);
    
    // use of library
    @import "library.less";
    @base-color: red;

编译后，dark-color为红黑，而非绿黑。表达的含义即，即使将@base-color：green去掉，变量dark-color也能引用到此位置之前还未定义的base-color变量。

笔记参考：*http://www.runoob.com/manual/lessguide/features/\#variables-feature-variable-interpolation*