1. CSSセレクタを合理化するため、継承を使用しました
主な機能の最後の繰り返しは、セレクタの継承を削減することであるとき、SASSを使用してください。オブジェクトの顔CSSのコンセプトに基づいて、セレクタの継承は、セレクタは、別のオプションが定義されているすべてのスタイルを継承することができると言われています。構文は@extend、次のコードによって達成されます
//通过选择器继承继承样式
.error {
border: 1px red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}コードの先頭には、任意の位置で.seriousErrorは、定義された.ERRORすべてのスタイル用のスタイルシートを継承します。クラス=「seriousError」と最終的な表示効果の修飾HTML要素は、クラス=「seriousErrorエラー」のようなものです。これらのスタイルは、内部.ERRORで定義されているので、光の赤色の背景があるでしょうしながら、関連する要素がないだけだろう広い3pxの境界線を持っている、との境界線が赤くなり、そしてこの要素。
全て.ERROR独自のスタイルを継承し.seriousError、.ERRORとセレクタスタイルの任意の組み合わせを継承.seriousErrorセレクタ形、次のコードの組み合わせに関連するだけでなく。
//.seriousError从.error继承样式
.error a{ //应用到.seriousError a
color: red;
font-weight: 100;
}
h1.error { //应用到hl.seriousError
font-size: 1.2rem;
}上述したように、クラス内のハイパーリンク=「seriousError」のHTML要素は太字と赤色になるであろう。
2.継承を使用して
あなたが繰り返しパターンの多くを必要とするときは、再利用する必要があります。
3.高度な使い方の継承
CSSルールは他のルールを継承することができ、ほぼすべてのCSSルールを継承することができます。ほとんどのケースでは、クラスの継承を使用することもできますが、あなたはより多くをしたいかもしれないいくつかの状況があります。最も一般的な使用方法は、HTML要素の先進的なスタイルを継承することです。デフォルトのブラウザのスタイルが継承されていないが、彼らはスタイルシートのスタイルに属していないが、あなたは継承されるHTML要素のすべてのスタイルを追加しますので。
.disabled {
color: gray;
@extend a;
}スタイルルールが複雑なセレクターを継承した場合、それが唯一のヒット要素が適用されるスタイルの複雑なセレクタを継承します。.seriousError extend.important.error @場合たとえば、その後、.important.errorとh1.important.errorスタイルは.seriousErrorを継承しますが、.important .ERRORスタイルや下に継承されることはありませんされます。この場合、あなたはおそらく、それぞれのスタイルの下で.important .seriousErrorまたは.ERRORを継承できるようにしたいでしょう。
セレクタシーケンス（.seriousError #main）@extend別のセレクタ（.ERROR）は、その後、唯一の完全#mainヒット.seriousErrorこの要素セレクタは名前を継承する単一のクラスとして、.ERRORスタイルを継承する場合。.main要素以外の要素は、クラス=「seriousError」影響されることはありませんしています。
このシーケンス選択.ERROR #mainのようにそれを継承することはできません。通常の状況下#main .ERRORから継承されたスタイルが微妙な違いがしばしば混乱し、スタイルに.ERRORから直接継承と一致するためです。
あなたが知っておくべき二つの主要な点がある@extendに関して4。
跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。
继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观:通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。