## 繼承 ### 繼承的使用規則 繼承主要使用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; } ~~~