## 继承 ### 继承的使用规则 继承主要使用less的伪类:extend,用法如下 1.extend 继承 ~~~ .b{ color:red; } .a:extend(.b){} ~~~ 等同于css ~~~ .b, .a { color: red; } ~~~ 2. extend 和all的继承 ~~~ .b{ color:red; } .c .b { font-size:14px; } // 跟.b相关的所有选择器样式都会被继承 .a:extend(.b all){} ~~~ 等同于css ~~~ .b, .a { color: red; } .c .b, .c .a { font-size: 14px; } ~~~ 3.多条件继承 ~~~ .b{ color:red; } .c { font-size:14px; } .a:extend(.b, .c){} ~~~ 等同于css ~~~ .b, .a { color: red; } .c, .a { font-size: 14px; } ~~~ 4.嵌套写法 ~~~ a { color:red } .div { &:extend(a); } ~~~ 等同于css ~~~ a, .div { color: red; } ~~~ 5.嵌套选择器 ~~~ .a { b{ color:red; } } .div { &:extend(.a b); } ~~~ 等同于css ~~~ .a b, .div { color: red; } ~~~ 6.精准匹配 ~~~ .a .c { color:red } .a { font-size:4px; } // 只会继承只有单独.a选择器的样式定义 .div { &:extend(.a); } ~~~ 等同于css ~~~ .a .c { color: red; } .a, .div { font-size: 4px; } ~~~ 7.变量模式 ~~~ @a:.test; @{a}{ color:red; } .c:extend(.test){} //无法继承 .c:extend(@{a}){}// 无法继承 ~~~ 等同于css ~~~ .test { color: red; } //通过变量定义的.test不会被继承 ~~~ ~~~ .a { color:red; } @{selector}:extend(.a){}//可以继承 @selector:.c; ~~~ 等同于css ~~~ .a, .c { color: red; } ~~~ 8.继承作用域 ~~~ @media print { .screenClass:extend(.selector) {} .selector { // 会被匹配到 color: black; } } .selector { // 不会被匹配到 color: red; } @media screen { .selector { //不会被匹配到 color: blue; } } ~~~ 等同于css ~~~ @media print { .selector, .screenClass { color: black; } } .selector { color: red; } @media screen { .selector { color: blue; } } ~~~ 再举一个例子 ~~~ @media screen { .selector { //可以被继承 color: blue; } @media (min-width: 1023px) { .selector { //可以被继承 color: blue; } } } .topLevel:extend(.selector) {} //在最外围的选择器中可以继承一切 ~~~ 等同于css ~~~ @media screen { .selector, .topLevel { color: blue; } } @media screen and (min-width: 1023px) { .selector, .topLevel { color: blue; } } ~~~ ### 课后习题 1.下面的less代码转换成css是什么？ ~~~ .a { color:red; } div .a { font-size:18px; } .b:extend(.a){} .c:extend(.a all){} ~~~ 2.请用less改写下面的css代码 ~~~ div{ .a{ font-size:18px; color:red; } } .a { font-size:14px; color:black; } .b{ font-size:18px; color:red; } .c{ font-size:14px; color:black; } ~~~