less基本语法笔记

1、less中的注释：

以//开头的注释，不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中

2、less中的变量：

a、使用@来声明一个变量：例 @red:red

#main {
  @width: 5em;
  width: @width;
}

b、作为普通属性值来使用：直接使用@red
c、作为选择器和属性名使用：#@{selector}的形式

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

d、作为url：@{url}
e、变量是延迟加载的

3、less中的嵌套规则

a、基本嵌套规则
b、&的使用

4、less中的混合：

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

• Mixin定义：LESS 使用 dot 符号（也就是句点）来定义一个 Mixin，并且可以把任意的 CSS 规则作为 Mixin 使用

.alert-variant(@background; @border; @text-color) {
  background-color: @background;
  border-color: @border;
  color: @text-color;
 
  hr {
    border-top-color: darken(@border, 5%);
  }
  .alert-link {
    color: darken(@text-color, 10%);
  }
}

• Mixin使用：LESS 仍是使用 dot 符号（句点），如果 Mixin 没有参数的话可以省略后面的圆括号

.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
.a {
    .center-block;
}

• Mixin参数形式：如果存在多个参数的话，LESS 使用分号分隔

@state-success-text:             #3c763d;
@state-success-bg:               #dff0d8;
@state-success-border:           darken(spin(@state-success-bg, -10), 5%);

.has-success {
  .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
}

a、普通混合（编译到原生css中）
b、不带输出的混合（加双括号）
c、带参数的混合
d、带参数并且有默认值的混合
e、带多个参数的混合
f、命名参数
g、匹配参数
h、arguments变量

5、less继承

性能比混合要高，灵活度比混合低。