less 使用特性-变量

1. 变量

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

output:

#header {
  color: #6c94be;
}

1.1. 选择器

// Variables
@my-selector: banner;

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

output:

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

1.2. URLs

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

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

1.3. Import Statements

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

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

1.4 属性

@property: color;

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

output:

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

2. Mixins

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

output:

button:hover {
  border: 1px solid red;
}

3. 作用域

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}