用less编写可维护的css

less-tips.md

0 引言

1. less循环
2. 内置函数`unit` `percentage` `image-width` `image-height`
3. `/`在background中的异常
4. 变量有作用域，不同的作用域可以使用同名的名字，（乱入：padding单位为%是相对宽度的）

1 嵌套

与html结构对应，便于维护

1.1 html结构变化

.agreement {
    > label {
        width: 39px;
        > em {
            display: block;
            width: 12px;
            height: 12px;
            margin: 14px 0 0 15px;
            border: 1px solid #ccc;
            border-radius: 50%;
            position: relative;
        }
        &.checked > em {
            border-color: #57bd77;
            &::before {
                content: "";
                position: absolute;
                width: 4px;
                height: 4px;
                left: 4px;
                top: 4px;
                background-color: #57bd77;
                border-radius: 50%;
            }
        }
    }
    > span {
        flex: 1;
        padding: 12px 0;
        font-size: 12px;
        color: #9fafbd;
        > a {
            color: #10c172;
        }
    }
}

推荐使用子选择器（>）而不是后代选择器，因为更具体，可以减少干扰。

1.2 并选择器

1.3 选择器的层级容易过多，可以通过给模块添加类名减少层级

2 父选择器引用（&）

2.1 伪类选择器，交选择器

2.2 用作前缀

.cloud-2- {
    &1 {
        position: absolute;
        left: percentage(-195px/@base-width);
        top: percentage(-174px/@base-height);
        width: percentage(310px/@base-width);
        transition: all .65s ease;
    }
    &2 {
        position: absolute;
        left: percentage(-178px/@base-width);
        bottom: percentage(-32px/@base-height);
        width: percentage(186px/@base-width);
        transition: all .65s ease;
    }
}

2.3 可通过追加和预追加的方式加工，从而生成新的选择器

.foo, .bar{
   & + &{
   　　font-size: 12px;
   }
}

.foo + .foo,
.foo + .bar,
.bar + .foo,
.bar + .bar {
  font-size: 12px;
}

3 使用变量

3.1 @作为变量的起始符，变量名由字母、数字、_和-组成

3.2 定义@变量名: 变量值;，使用@变量名，在选择器里使用需要加大括号@{变量名}

3.3 可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接

3.4 存在作用域，局部作用域优先级高于全局作用域；（好处：可以使用同名变量）

.reimburse-tips > div {
    @image-width: image-width("../img/tips-bg-2.png");
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: percentage(66px/@image-width) percentage(44px/@image-width) 0 percentage(34px/@image-width);
    font-size: 1rem;
    line-height: 1.42;
}

3.5 没有先定义后使用的规则

3.6 以最后定义的值为最终值

3.7 列表类型

索引从1开始

@list-num: "①", "②", "③";
.set-list-num(@begin, @end) when (@begin <= @end) {
    .reimburse-tips > div > ol > li:nth-child(@{begin})::before {
        content: extract(@list-num, @begin);
    }
    .set-list-num(@begin + 1, @end);
}
.set-list-num(1, length(@list-num));

4 导入

import "file.less";

4.1 如果是less文件，文件后缀名可以省略，但是不推荐

4.2 可以出现在文件的任何位置

4.3 @import还提供了6个可选配置项(分别为reference,inline,less,css,once,multiple)

5 继承（extend）

.selector:extend(.parent-selector) {
}

.selector {
    &:extend(.parent-selector>);
}

5.1 父选择器必须严格匹配，除了属性选择器中属性值引号不必匹配外，或添加all关键字外

5.2 父选择器不支持变量形式

5.3 media query影响继承的作用域

1. media query内的extend操作，近能继承当前块的其他选择器样式；
2. 非media query内的extend操作，将会继承所有media query中匹配的选择器样式；
3. 增强的mixin定义mixin时仅能使用类选择器和ID选择器，而extend操作可对应所有的选择器，因此当没有动态入参而又需要类选择器和ID选择器以外的选择器时，可使用extend来实现mixin的功能。

6 混合

mixin相当于macro，会将样式规则内联到调用的位置中。而less中的mixin有以下的注意点；

6.1 类选择器、ID选择器自动被定义为mixin，而且具有命名空间

6.2 显示定义不带参数和带参数的样式库（mixin库），不会输出到最终输出中，仅供调用

6.3 mixin内置两个特殊的对象@arguments和@reset。@arguments代表mixin的所有实参，而@reset代表mixin的...实参

6.4 mixin的重载可定义多个同名mixin，调用时只要参数数量匹配就会执行相应的mixin

7 选择

less中通过混合（Mixin）后的when关键字来提供选择的作业控制，when只接受boolean值   1. 类型判断函数   1. 关系运算符： = > >= < <=   1. 逻辑运算符： and or not

8 循环

.set-html-font-size(@width, @width-step, @font-size, @font-size-step, @max-font-size) when (@font-size <= @max-font-size) {
    @media (min-width: @width) {
        html {
            font-size: @font-size;
        }
    }
    .set-html-font-size(@width + @width-step, @width-step, @font-size + @font-size-step, @font-size-step, @max-font-size);
}
.set-html-font-size(320px, 25px, 10px, 1px, 15px);

9 运算符

less还支持 + - * / 运算符。但对单位不一致的运算数进行运算要注意以下两点：

1. 运算数与运算符间必须用空格分隔；
2. 以第一个运算数的单位作为运算结果的单位；

/在background中异常

background: url(../assets/fertility-wish/logo.png) no-repeat 0 0 / 100% 100%;

background: url(../assets/fertility-wish/logo.png) no-repeat left top / 100% 100%;

background: url(../assets/fertility-wish/logo.png) no-repeat 0 0;
background-size: 100% 100%;

10 内置函数

unit percentage image-width image-height

.logo {
    position: absolute;
    width: unit(image-width("../assets/fertility-wish/logo.png") / 2 / @base-font-size, rem);
    height: unit(image-height("../assets/fertility-wish/logo.png") / 2 / @base-font-size, rem);;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    bottom: unit(12px / @base-font-size, rem);
    background: url(../assets/fertility-wish/logo.png) no-repeat 0 0;
    background-size: 100% 100%;
}
.cradle {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../img/baby.png) no-repeat 0 0;
    background-size: 100% 100%;
    transform-origin: percentage(376.5px / @base-width) percentage(594px / @base-height);
    animation: baby-shake 2.8s ease-in-out infinite;
}