less学习笔记三

1、嵌套规则

Less使用嵌套规则来代替或者结合css的级联样式

<section class="section-nested">
    <h2 class="h-nested">this is a nested head</h2>
    <article class="article-nested">
     this is a nested article.
    </article>
</section>
    
.section-nested{color:@light-blue;}
.section-nested .h-nested{font-size:16px;}
.section-nested .article-nested{background-color:@nice-blue;}

Less中嵌套写法如下，更加简洁，并且能模仿出HTML中的结构。

.section-nested{
    color:@light-blue;
    .h-nested{
            font-size:16px;
        }
    .article-nested{
            background-color:@nice-blue;
        }
}                

可以使用这种方法将伪选择器绑定到混合类中，如下典型的clearfix

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

&代表当前选择器的父级。

2、嵌套指令和冒泡

指令media或者keyframe等可以使用选择器一样嵌套方式。指令放在上面，作用于同一规则集合中的其他元素的相关命令保持不变，这就是冒泡的含义。

条件指令例如@Media, @supports 和 @document同样可以有选择器复制在它们的内容体中。

.section-nested{
    @media screen{
        color:green;
        @media(min-768px){
            .h-nested{color:red;}
        }
    }
    @media tv{
        color:black;
    }
}
/**outputs**/
@media screen {
  .section-nested {
    color: green;
  }
}
@media screen and (min- 768px) {
  .section-nested .h-nested {
    color: red;
  }
}
@media tv {
  .section-nested {
    color: black;
  }
}

其余的非条件指令例如 font-face或keyframes，同样可以冒泡，内容体不发生改变。

.meng{
    color:yellow;
    @font-face{
        src:made-up-url;
    }
    padding:2px;
}

/**outputs**/
.meng {
  color: yellow;
  padding: 2px;
}
@font-face {
  src: made-up-url;
}

3、运算

数学运算+, -, *, / 可在任何数字，颜色或变量中应用。可能的话，数学运算会把单位考虑进去，在加、减或者比较之前转化成数字。结果中会使用运算表达式中最左边明确规定的单位类型。如果转换不能实现或者没有意义，单位会被忽略。不能转换的例子：px to cm or rad to %.

// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 5 - 3cm - 5mm; // result is 1.5cm，第一个5没有单位，结果使用的是最左边第一次出现的单位cm，5mm也被转换为0.5cm来参与运算

// conversion is impossible
@incompatible-units: 5 + 5px - 1mm; // result is 6.22047244px

// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

.conversion{
    @conversion-1;
    height:@conversion-2;
    margin:@base @filler @other;
    padding:@incompatible-units;
}
/**outputs*/
.conversion {
     6cm;
    height: 1.5cm;
    margin: 5% 10% 15%;
    padding: 6.22047244px;
}

乘法和除法运算时不会转换数字。多数情况下做乘除法时没有意义的，一个长度乘以另一个长度，得到一个面积，css不支持制定的面积样式。

less会在数字上做运算，并把明确规定的单位赋值给结果。

@multiply: 1cm * 3mm; // result is 3cm
.conversion{
    @conversion-1;
    height:@conversion-2;
    margin:@base @filler @other;
    padding:@incompatible-units;
    border:@multiply solid black;
}
/**outputs**/
.conversion {
     6cm;
    height: 1.5cm;
    margin: 5% 10% 15%;
    padding: 6.22047244px;
    border: 3cm solid black;
}

颜色colors会被分割为红，绿，蓝，透明度四个维度。运算时在每一个维度单独进行计算。

例如，用户对两个颜色做加法运算，结果中的绿色维度等于输入颜色的绿色维度数据之和。用户用一个数字乘以颜色数据，每一个颜色维度的数据都得以与之相乘。

颜色的运算经常会产生不合法的数据。如果某个颜色数据的结果大于ff或者小于00,此数据将会四舍五入为ff或00.如果透明度的运算结果大于1.0或者小于0.0，它也会四舍五入为1.0或0.0.

@color1: #224488 / 2; //results in #112244
@color2: #112244 + #111; // result is #223355
@color3: #fff+#555;
.conversion{
    color:@color1;
    background-color:@color2;
    border-color:@color3;
}

/**outputs**/
.conversion {
    color: #112244;
    background-color: #223355;
    border-color: #ffffff;
}

4、Escaping,转义，允许你使用任意字符作为变量或属性的值

5、Function,函数

Less提供了各种各样的函数，用来转换颜色，操纵字符和做数据运算。函数参考中有相关的文档。

@basecolor: #f04615;
@ 0.5;

.conversion {
   percentage(@width); // returns `50%`
  color: saturate(@basecolor, 5%);
  background-color: spin(lighten(@basecolor, 25%), 8);
}

/**outputs**/
.conversion {
     50%;
    color: #f6430f;
    background-color: #f8b38d;
}

6、Scope 变量范围，变量和混合类首先在本地查找，找不到时编译器会在它的父级范围内查找。

@var: red;

header {
  @var: white;
  h1 {
    color: @var; // white
  }
}

/**outputs**/
.header {
    color: #6c94be;
}
header h1 {
    color: white;
}

变量和混合类不需要在它被使用之前定义，也可以在被引用之后定义，上面等价于

@var: red;

header {

  h1 {
    color: @var; // white
  }
  @var: white;
}

这是一种懒加载的处理方式：变量是懒加载的，不需要在被引用之前定义。

一个变量被定义多次时，从当前范围中向上查找，最后一个定义的将被使用。

@var: red;

header {
  @var: white;
  h1 {
    @var:blue;
    color: @var;
  }
  @var:yellow;
}
/**outputs**/

header h1 {
    color: blue;
}