@extend

Stylus @extend 指令的靈感來自於 (且基本上與) SASS 實作相同，只有少數細微的差異。此功能大幅簡化繼承自其他語意規則集的語意規則集的維護。

使用混合「擴充」

雖然你可以使用混合來達成類似的效果，但這可能會導致重複的 CSS。典型的模式是定義幾個類別，如下所示，然後將它們組合在元素上，例如「警告訊息」。

雖然此技術運作良好，但它難以維護。

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

.warning {
  color: #E2E21E;
}

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

.warning {
  color: #E2E21E;
}

使用 `@extend`

若要使用 @extend 產生相同的輸出，只需傳遞所需的選取器（請注意，@extend 和 @extends 相同，一個只是另一個的別名）。然後，Stylus 會將 .warning 選取器附加到現有的 .message 規則集。然後，.warning 類別會繼承 .message 的屬性。

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

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

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

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

以下是一個更複雜的範例，說明 @extend 如何串接

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

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;
}

.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
        on line 6 of standard input
  Use --trace for backtrace.

form
  button
    padding: 10px

a.button
  @extend form button
Syntax error: Can't extend form button: can't extend nested selectors
        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]
    padding: 5px
    border: 1px solid #eee
    color: #ddd

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

產生

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

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

延伸多個選取器

Stylus 允許您一次延伸多個選取器，只需用逗號寫入它們即可

.a
  color: red

.b
  width: 100px

.c
  @extend .a, .b
  height: 200px

.a
  color: red

.b
  width: 100px

.c
  @extend .a, .b
  height: 200px

產生

.a,
.c {
  color: #f00;
}
.b,
.c {
  width: 100px;
}
.c {
  height: 200px;
}

.a,
.c {
  color: #f00;
}
.b,
.c {
  width: 100px;
}
.c {
  height: 200px;
}

延伸佔位符選取器

Stylus 有類似於 Sass 中的功能，也就是佔位符選取器。

這些選取器應以 $ 符號開頭（例如，$foo），且不會產生在結果的 CSS 中。但您仍然可以延伸它們

$foo
  color: #FFF

$foo2
  color: red

.bar
  background: #000
  @extends $foo

.baz
  @extends $foo

$foo
  color: #FFF

$foo2
  color: red

.bar
  background: #000
  @extends $foo

.baz
  @extends $foo

產生

.bar,
.baz {
  color: #fff;
}
.bar {
  background: #000;
}

.bar,
.baz {
  color: #fff;
}
.bar {
  background: #000;
}

請注意，如果選取器未延伸，它將不會出現在結果的 CSS 中，因此這是建立可延伸程式碼庫的有力方式。雖然您可以透過混入插入程式碼，但每次使用它們時，它們都會插入相同的程式碼，而延伸佔位符會提供精簡的輸出。

選擇性延伸

有時，根據上下文，能夠擴充可能存在或不存在的東西會很有用。你可以使用 !optional 為任何選擇器加上後綴來達成此目的

$specialDesign
  color: #FFF

.btn
  @extend .design !optional, $specialDesign !optional

$specialDesign
  color: #FFF

.btn
  @extend .design !optional, $specialDesign !optional

產生

.btn {
  color: #fff;
}

.btn {
  color: #fff;
}

@extend #

使用混合「擴充」 #

使用 @extend #

延伸多個選取器 #

延伸佔位符選取器 #