Stylus@extend
Stylus の @extend ディレクティブは、SASS の実装に影響を受けており、本質的には同じですが、いくつかの微妙な違いがあります。この機能は、他のセマンティックなルールセットから継承するセマンティックなルールセットのメンテナンスを大幅に簡素化します。
ミックスインによる「拡張」
ミックスインを使用しても同様の効果を得ることはできますが、これは重複したCSSにつながる可能性があります。一般的なパターンは、以下に示すようにいくつかのクラスを定義し、それらを「warning message」などの要素に結合することです。
このテクニックはうまく機能しますが、メンテナンスが困難です。
.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 は、既存の .message ルールセットに .warning セレクターを追加します。.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;
}