Less 中各种符号的作用

Less 中各种符号的作用

@ 定义变量

1. 变量在属性值中应用

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

最终编译为:

#header {
    width: 10px;
    height: 20px;
}

2. 变量在属性中应用

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

最终编译为：

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

3. 变量在选择器中应用

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

最终编译为：

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

4. 变量在 URL 中应用

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

最终编译为：

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

5. 导入语句中应用

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

6. 用变量定义变量

@primary: green;
.section {
@color: primary;
  .element {
  color: @@color;
  }
}

最终编译成：

.section .element {
color: green;
}

$ 把现成的属性作为变量

.widget {
color: #efefef;
background-color: $color;
}

最终编译成：

.widget {
color: #efefef;
background-color: #efefef;
}

&

1. 父选择器

a {
color: blue;
&:hover {
color: green;
}
}

最终编译成：

a {
color: blue;
}
a:hover {
color: green;
}

2. 多次使用

.link { 
& + & { 
color: red; 
} 
& & { 
color: green; 
} 
&& { 
color: blue; 
} 
&, &ish { 
color: cyan; 
} 
}

最终编译成：

.link + .link {
color: red;
}
.link .link {
color: green;
}
.link.link {
color: blue;
}
.link, .linkish {
color:cyan;
}

未完待续……