Q15-less基础

参考：https://less.bootcss.com/

---

一、变量

@width: 10px;

@height: @width + 10px;

#header {

      width: @width;

      height: @height;

}

---

二、混合        （将一组属性从一个规则集包含到另一个规则集的方法）

.bordered {

  border-top: dotted 1px black;

  border-bottom: solid 2px black;

}

如果我们想要在其他规则集中使用该样式，就使用 .bordered() 即可；

#menu a {

      color: #111;

      .bordered();

}

.post a {

      color: red;

      .bordered();

}

---

三、嵌套

将原来的

#header {

          color: black;

}

#header .navigation {

          font-size: 12px;

}

#header .logo {

          width: 300px;

}

改写成：

 #header {

          color: black;

          .navigation {

                font-size: 12px;

           }

          .logo {

                width: 300px;

          }

}

用& 表示当前选择器的父级；

.clearfix {

      display: block;

      zoom: 1;

      &:after {

            content: " ";

           display: block;

            font-size: 0;

            height: 0;

            clear: both;

            visibility: hidden;

      }

}

---

四、运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

@conversion-1: 5cm + 10mm; // 结果是 6cm

@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

@base: 5%;@filler: @base * 2; // 结果是 10%

@other: @base + @filler; // 结果是 15%

calc() 在写原来的写法中是这样的：

div {

        width : calc(100%- 30px);

}

但是在less中是不允许的；可以写成 width: calc(~"100% - 30px"); 

或者这样：

div {

        @diff : 30px;

        width : calc(~"100% - @{diff}");

}