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