繼承(@extend)

繼承

Stylus的@extend指令受SASS實(shí)現(xiàn)的啟發(fā)，基本一致，除了些輕微差異。此功能大大簡(jiǎn)化了繼承其他語(yǔ)義規(guī)則集的語(yǔ)義規(guī)則集的維護(hù)。

混合書(shū)寫(xiě)下的“繼承”

盡管你可以使用混寫(xiě)實(shí)現(xiàn)類(lèi)似效果，但會(huì)導(dǎo)致重復(fù)的CSS. 典型的模式式定義如下的幾個(gè)類(lèi)名，然后歸結(jié)到一個(gè)元素中，例如"warning message".

該技術(shù)實(shí)現(xiàn)是沒(méi)什么問(wèn)題，但是維護(hù)就比較麻煩了。

message,
.warning {
  padding: 10px;
  border: 1px solid #eee;
}

.warning {
  color: #E2E21E;
}

使用__@extend__

使用__@extend__得到同樣的輸出，只要把對(duì)應(yīng)的選擇器傳給@extend即可。然后.warning選擇器就會(huì)繼承已經(jīng)存在的.message規(guī)則。

.message {
  padding: 10px;
  border: 1px solid #eee;
}

.warning {
  @extend .message;
  color: #E2E21E;
}

這兒是個(gè)更復(fù)雜的例子，演示了__@extend__如何級(jí)聯(lián)。

red = #E33E1E
yellow = #E2E21E

.message
  padding: 10px
  font: 14px Helvetica
  border: 1px solid #eee

.warning
  @extends .message
  border-color: yellow
  background: yellow + 70%

.error
  @extends .message
  border-color: red
  background: red + 70%

.fatal
  @extends .error
  font-weight: bold
  color: red

生成CSS如下：

.message,
.warning,
.error,
.fatal {
  padding: 10px;
  font: 14px Helvetica;
  border: 1px solid #eee;
}
.warning {
  border-color: #e2e21e;
  background: #f6f6bc;
}
.error,
.fatal {
  border-color: #e33e1e;
  background: #f7c5bc;
}
.fatal {
  font-weight: bold;
  color: #e33e1e;
}

目前Stylus與SASS不同之處在于SASS不允許__@extend__嵌套選擇器。

form
  button
    padding: 10px

a.button
  @extend form button 
Syntax error: Can't extend form button: can't extend nested selectors
// 解析錯(cuò)誤： 無(wú)法繼承自 button: 不能繼承嵌套選擇器
        on line 6 of standard input
  Use --trace for backtrace.

Stylus中，只要選擇器匹配，就可以生效：

form
 input[type=text]
   padding: 5px
   border: 1px solid #eee
   color: #ddd

textarea
 @extends form input[type=text]
 padding: 10px

生成：

form input[type=text],
form textarea {
  padding: 5px;
  border: 1px solid #eee;
  color: #ddd;
}
textarea {
  padding: 10px;
}