Less基础语法学习

Less（Leaner Style Sheet）是一门向后兼容的CSS扩展语言

1 变量

less可以定义变量，在编译时自动将变量名替换为用户定义的值。使用@定义和使用变量，变量声明可以在开头，也可以在使用变量后，不一定需要预先声明：

// 变量
@link-color: #428bca;  //sea blue

// 用法
.link {
  color: @link-color;
}

.link {
  color: @link-color;
}

// 变量
@link-color: #428bca;  //sea blue

---

除了在值中使用变量，在选择器名称、属性名、URL和@import语句，甚至是其他变量名中都能使用变量：

@mySelector: banner;

.@{mySelector} {
  font-weight: bold;
}

@images: "../img";

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

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

@import "@{themes}/tidal-wave.less";  //导入less文件

@property: color;

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

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

//将会编译为
content: "I am fnord.";

2 嵌套

less文件可以嵌套样式，使代码更符合html结构，更加简洁

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

可以用以下形式编写：

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

3 混合

less可以混合样式（类选择器或id选择器）：

.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}

编译为：

.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

---

如果你不想输出混合集，可以在定义时加上一个括号：

.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

编译为：

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

---

混合集不仅可以包含各种属性，还可以包含各种选择器:

.my-hover-mixin() {
  &:hover {       // &表示父选择器
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

编译为：

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

可以在混合集中嵌套多层id和class选择器，在使用时进行指定，相当于命名空间：

#my-library {
  .my-mixin() {
    color: black;
  }
}
// 可以这样调用
.class {
  #my-library > .my-mixin();
}

下面四种写法效果一样：

#outer > .inner;
#outer > .inner();
#outer.inner;
#outer.inner();

4 函数

可以在混合集中设置参数，变为函数，在它进行混入操作时，会将变量传递给选择器代码块：

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

甚至可以设置参数的默认值:

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

#header {
  .border-radius;
}

如果带有多个参数，可用；分隔：

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding: 2) {
  color-2: @color;
  padding-2: @padding;
}

.some .selector div {
  .mixin(#008000);
}

编译为：

.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

参数可以为命名参数：

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}

.class2 {
  .mixin(#efca44; @padding: 40px);
}

编译为：

.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

---

你可以通过传递给混合集的参数，进行模式匹配，改变混合集的行为：

.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {   //@_为任何值
  display: block;
}

@switch: light;

.class {
  .mixin(@switch; #888);
}

上述进行模式匹配，只有第二个和第三个模式匹配成功，编译为：

.class {
  color: #a2a2a2;
  display: block;
}

---

可以将混合用作函数使用，所有定义在一个mixin中的变量都是可见的，还可以用于调用它的作用域中（除非调用它的作用域定义了同名变量）

.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}

编译为：

div {
  padding: 33px;
}

5 扩展（继承）

扩展与混合相似，但混合编译后的css相当于新增一块相同的样式内容，而扩展是在选择器的后面增加了一个你要引用的选择器名，所以扩展相比要节省更多的资源。

扩展有两种语法，效果一样，可以放置在选择器最后面（一定要在最后），也可以放置在规则集中：

.a:extend(.b) {}

// 上面的代码块与下面这个做一样的事情
.a {
  &:extend(.b);
}

示例：

nav ul {
  &:extend(.inline);
  background: blue;
}

.inline {
  color: red;
}

ul继承了类inline的属性，编译为：

nav ul {
  background: blue;
}

.inline,
nav ul {
  color: red;
}

如果要继承多个类，用逗号分隔：

.e:extend(.f, .g) {}

---

可以嵌套选择器中的扩展：

.bucket {
  tr { 
    color: blue;
  }
}
.some-class:extend(.bucket tr) {} 

编译为：

.bucket tr,
.some-class {
  color: blue;
}

---

扩展为精确匹配，它不管选择器是否以星号开头：

*.class {
  color: blue;
}
.noStar:extend(.class) {} // 不会匹配*.class选择器

6 导入

less文件可以导入其他less或css文件，将其包含进来

@import "foo";      // foo.less is imported
@import "foo.less"; // foo.less is imported
@import "foo.php";  // foo.php imported as a less file
@import "foo.css";  // statement left in place, as-is

除此之外less还支持循环、合并、条件以及众多内置函数功能，详情可见官网