less的基本使用

// 变量

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

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

// ------------------------------

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

// 混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

// ==>  编译后的css

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

// ------------------------------

@base: #f04615;
@width: 0.5;

/*  函数  这是利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 的用法 */
.class {
  width: percentage(@width);
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

// ==> 编译后的css

.class {
  width: 50%;
  color: #f6430f;
  background-color: #f8b38d;
}

// ------------------------------

// 命名空间和访问符

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: rgb(236, 160, 160);
    }
  }
}

// 现在就是把 .button 类混合到 #header a 如此：

#header a {
  color: orange;
  #bundle.button();
  // 还可以书写为 #bundle > .button 形式
}

// ==> 编译后的css

#header a {
  color: orange;
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#header a:hover {
  background-color: #eca0a0;
}

// ------------------------------

// 映射（Maps）
/* 从 Less 3.5 版本开始，还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。 */

#colors() {
  primary: blue;
  secondary: green;
}
.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

// ==> 编译后的css

.button {
  color: blue;
  border: 1px solid green;
}

// ------------------------------

// 可以进行传递参数
.icon-basic(@bgColor) {
  display: flex;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  color: #fff;
  font-size: 12px;
  background-color: @bgColor;
}

.icon-arrow {
  .icon-basic(#409ffa);
}

.icon-test {
  .icon-basic(red);
}

// ==> 编译后的css

.icon-arrow {
  display: flex;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  color: #fff;
  font-size: 12px;
  background-color: #409ffa;
}

.icon-test {
  display: flex;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  color: #fff;
  font-size: 12px;
  background-color: red;
}