css less学习变量

1. 变量用法：

　　所有变量都以@开头

　　1.1 选择器：

// Variables
@my-selector: banner;

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

//Compiles to:

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

　　1.2 url

// Variables
@images: "../img";

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

　　1.3 import 导入

// Variables
@themes: "../../src/themes";

// Usage
@import "@{themes}/tidal-wave.less";

　　1.4 属性名替换：

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

//Compiles to:

.widget {
  color: #0ee;
  background-color: #999;
}

　1.5 变量名替换

@fnord:  "I am fnord.";
@var:    "fnord";
content: @@var;

//Which compiles to:

content: "I am fnord.";

　1.6 变量的lazy loading

　　　变量是lazy loading,因而不用再使用前命名。

　　　变量查找方法：现在只了解本地文件的变量查找，方式如下：类似C++，每一个大括号下是一个作用域，通常会有一个大的作用域下面会有多个小的作用域，形成一个作用域链，如最外层 -> .class -> .brass ，变量查找时，首先会查找当前作用域，如果当前作用域有，则选最后一个，如果没有，则往上一层作用域查找，直到找到最上面一层。如果都没有，则会报错并提示该变量没有定义。

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

//Compiles to:

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

参考文章：http://lesscss.org/features/#variables-feature

css less学习 变量

css less学习变量