less的使用

注：

1.类名的继承方法，只能继承兄弟级别的类名；

 

用法：

1.变量的使用：

@color: yellow;
.block{
    color: @color; // 变量的继承方法；
}

2.对函数的继承和对类名的继承的区别：

// 函数
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

.fontsize{

    font-size: 50px;

   span{

         color: red;

   }

}

#header:extend(.fontsize){
  background: #00BFFF;
  .rounded-corners; //函数的继承方法
  &:extend(.fontsize span);// 类名的继承方法，也可以使用函数的继承方法
//&:extend(.rounded-corners); //函数的继承不能使用这种方式
}

3.在URL后面加上'#!watch'开启监听模式：既在编辑器中修改的样式在浏览器中会自动响应；

4..mixin模式匹配：根据mixin（）的第一个参数进行匹配，再进行渲染：

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

// 运行代码
@switch: light;

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

// 就会得到下列CSS:

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

5.嵌套规则

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

 注意 & 符号的使用:效果为串联选择器，而不是写后代选择器；

6.往字符串中插入变量

使用@{name}这样的结构:

@base-url: "http://fgdd.com";
background-image: url("@{base-url}/image/bg.png");