Less 基础与高级用法

由 Less v4.1.3 官方教程和文档总结而成，几乎涵盖所有知识点 本导图大量使用示例，并高亮显示，帮助更好地入门和进阶 Less

Less 高级特性

• 变量
  • 使用 @identifier: value; 定义，@identifier 调用
    • 变量插入
      • 选择器例：@my-selector: banner; .@{my-selector} { ... }
      • URL例：@images: "../img";...background: url("@{images}/white-sand.png");
      • Import例：@themes: "../../src/themes"; @import "@{themes}/tidal-wave.less";
      • 属性例：@property: color;...@{property}: #0ee;
    • 变量搜索规则
      • 选择最近的值，在当前作用域由下往上搜索
        • 例：@var: 0;.class { @var: 1; .brass { @var: 2; three: @var; @var: 3; } one: @var;}
          • =>
            • .class { one: 1;}.class .brass { three: 3;}
    • 使用属性 ( v3.0 + )
      • 语法：$property
      • 例：.widget { color: #efefef; background-color: $color;}
    • * Variable Variables: 使用变量定义另一个变量
      • 例：@primary: green;@secondary: blue; .section { @color: primary; .element { color: @@color; }}
• 父选择器
  • 在嵌套的子选择器中使用 & 来指代父选择器
    • 例：a { color: blue; &:hover { color: green; }}
    • & 可以理解为字面量，例：.button { &-ok { background-image: url("ok.png"); }}
      • =>
        • .button-ok { background-image: url("ok.png");}
    • 注意，& 指代的是 所有 父选择器，例：.grand { .parent { && { color: blue; } }}
      • =>
        • .grand .parent.grand .parent { color: blue;}
    • 根据以上特性，可以实现更改选择器顺序的功能，例：.header { .menu { .foobar & { background-image: url('images/button-background.png'); } }}
      • =>
        • .foobar .header .menu { background-image: url('images/button-background.png');}
    • 使用 + (选取兄弟) 可以创建所有排列的选择器，例：p, a, ul, li { border-top: 2px dotted #366; & + & { border-top: 0; }}
      • =>
        • p, a, ul, li { border-top: 2px dotted #366;}p + p, p + a, p + ul, p + li,a + p, a + a, a + ul, a + li,ul + p, ul + a, ul + ul, ul + li,li + p, li + a, li + ul, li + li { border-top: 0;}
• 拓展
  • 类似于复用/继承，也可以按一些语言的 extension 来理解
    • 例：.inline { color: red;}nav ul { &:extend(.inline); background: blue;}
      • =>
        • .inline,nav ul { color: red;}nav ul { background: blue;}或者更直观一点nav ul { color: red; background: blue;}.inline { color: red;}
  • :extend 是 Less 的一个伪类
    • .a:extend(.b) {}
      • ===
        • .a { &:extend(.b);}
    • .e:extend(.f, .g) {}
      • ===
        • .e:extend(.f) {}.e:extend(.g) {}
  • 注意：1. extend 必须为最后一个，在 :hover, .nth-child 等的后面2. 不允许使用多个 :extend， 例如 pre:hover:extend(div pre):extend(.bucket tr)，这样的等同于 pre:hover:extend(div pre, .bucket tr)3. 选择器和 :extend 之间可以有空格
  • 在嵌套中
    • 例：.bucket { tr & { color: blue; }}.some-class:extend(tr .bucket) {}
      • =>
        • tr .bucket,.some-class { color: blue;}
  • 注意： extend 为精准匹配
    • 例：*.class { color: blue;}.foobar:extend(.class) {}
      • =>
        • *.class { color: blue;}// .foobar 匹配的是 .class 而非 *.class，所以这里不会出现 .foobar
    • 例：（说明： Nth 表达式中 1n+3 与 n+3 相等，但 extend 仍然不匹配）:nth-child(1n+3) { color: blue;}.child:extend(:nth-child(n+3)) {}
      • =>
        • :nth-child(1n+3) { color: blue;}// 没有 .child
    • 但是，属性中的引号却是不紧要的extend 认为 [title=identifier] [title='identifier'] [title="identifier"] 是一样的
  • extend 的 all 关键字
    • 用于匹配一切相关的选择器，相当于替换
      • 例：a.b.test,.test.c { color: orange;}.test { &:hover { color: green; }} .replacement:extend(.test all) {}
        • =>
          • .a.b.test,.test.c,.a.b.replacement,.replacement.c { color: orange;}.test:hover,.replacement:hover { color: green;}
  • 注意：在 extend 中使用变量是无效的
    • 例如：@variable: .bucket;@{variable} { color: blue;}.some-class:extend(.bucket) {} // 无效
    • 例如：.bucket { color: blue;}.some-class:extend(@{variable}) {} // 无效@variable: .bucket;
    • 但是，extend 前使用是可以的.bucket { color: blue;}@{variable}:extend(.bucket) {} // 有效@variable: .selector;
  • * 在 @media 作用域内的 extend
    • 1. 在一个@media中，只匹配该 @media 中的内容（不向上也不向下）2. 在一个@media中，不匹配该 @media 嵌套的 @media 内容3. 顶层的(Global) extend 会匹配 @media 中的所有内容（包括嵌套的@media）
  • 使用场景
    • 继承、复用；与 mixin 相比，减少生成的 CSS 大小；作为更高级的 mixin
• 合并
  • 在属性后加 + 号可以在生成 CSS 时使用 ',' 加上当前内容
    • 例：.mixin() { box-shadow+: inset 0 0 10px #555;}.myclass { .mixin(); box-shadow+: 0 0 20px black;}
      • =>
        • .myclass { box-shadow: inset 0 0 10px #555, 0 0 20px black;}
  • 在属性后加 +_ 可以在生成 CSS 时使用 空格 加上当前内容 (transform 等很常用)
    • 例：.mixin() { transform+_: scale(2);}.myclass { .mixin(); transform+_: rotate(15deg);}
      • =>
        • .myclass { transform: scale(2) rotate(15deg);}
• Mixin
  • 使用 selector() 来使用已存在的样式
    • 例如：.a { color: red;}.mixin-class { .a();}
  • 若样式不存在，可以使用 identifier() 声明
    • 例如：.my-mixin { color: black;}.my-other-mixin() { background: white;}.class { .my-mixin(); .my-other-mixin();}
      • =>
        • .my-mixin { color: black;}.class { color: black; background: white;}
  • Mixin 内部选择器
    • 例：.my-hover-mixin() { &:hover { border: 1px solid red; }}button { .my-hover-mixin();}
      • =>
        • button:hover { border: 1px solid red;}
  • 命名空间
    • 例：#outer() { .inner { color: red; }} .c { #outer.inner();}
  • 参数
    • 无默认值
      • 声明
        • .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}
      • 调用
        • #header { .border-radius(4px);}
    • 有默认值
      • 声明
        • .border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}
      • 调用
        • #header { .border-radius();}
    • 命名参数（使用 ;）
      • 声明
        • .mixin(@color: black; @margin: 10px; @padding: 20px) { color: @color; margin: @margin; padding: @padding;}
      • 调用
        • .class1 { .mixin(@margin: 20px; @color: #33acfe);}.class2 { .mixin(#efca44; @padding: 40px);}
    • 参数分割符
      • ';' 用来分割 css list
      • v4.0+ 可以使用 ~(css list)
    • 重载
    • @arguments
      • 用来获取所有参数
    • Pattern Matching
      • 例：// 定义.mixin(dark, @color) { color: darken(@color, 10%);}.mixin(light, @color) { color: lighten(@color, 10%);}.mixin(@_, @color) { display: block;}// 调用@switch: light; .class { .mixin(@switch, #888);}
    • * 可变参数与 @rest
      • 例：.mixin(@a, @rest...) { // @rest 指代 @a 后的所有参数}
  • * 递归
  • * 别名
  • * 在调用 Mixin 时加上 !important 会将其所有属性都加上 !important
• 插件
  • https://lesscss.org/features/#plugin-atrules-feature
• import
  • 语法 @import "somefile";
  • 更深入解释请看 https://lesscss.org/features/#import-atrules-feature
• 函数
  • https://lesscss.org/functions/
  • if, boolean, escape, %, replace, each, max, min, ceil, floor, image-size, hsl 等
• 注释
  • 可以使用 /* comments */ 或 // comments
• when
  • 类似于 if, 当条件成立时使用该样式
  • 可以应用到 mixin, selector, namespace 等上
    • 例如：// 注意 使用 '='button when (@my-option = true) { color: white;}
• Detached Rulesets
  • https://lesscss.org/features/#detached-rulesets-feature
  • ruleset 是形如@sizes: { // 使用冒号 : mobile: 320px; tablet: 768px; desktop: 1024px;}的块或集合
• 映射
  • v3.5+
  • 利用 [identifier] 来获取 ruleset 或 mixin 中指定属性或变量的值
    • 例：@sizes: { mobile: 320px; tablet: 768px; desktop: 1024px;} .navbar { display: block; @media (min-width: @sizes[tablet]) { display: inline-block; }}