目次
Sass では、CSS と同様に、セレクターに一致する要素のスタイルをプロパティ宣言で定義します。しかし、Sass には追加機能が追加されているため、記述や自動化が容易になります。何よりもまず、宣言の値は任意の SassScript 式にすることができ、評価されて結果に含まれます。
プロパティ宣言:
多くの CSS プロパティは、一種の名前空間として機能する同じプレフィックスで始まります。たとえば、font-family、font-size、font-weight はすべて font- で始まります。 Sass は、プロパティ宣言をネストできるようにすることで、これをより簡単にし、冗長性を減らします。外側のプロパティ名は、ハイフンで区切られて内側に追加されます。
例:
.enlarge {
font-size: 14px;
transition: {
property: font-size;
duration: 4s;
delay: 2s;
}
&:hover { font-size: 36px; }
}
これらの CSS プロパティの一部には、名前空間をプロパティ名として使用する省略形があります。これらについては、省略形の値と、より明示的なネストされたバージョンの両方を記述できます。
例:
.info-page {
margin: auto {
bottom: 10px;
top: 2px;
}
}
親セレクター:
親セレクターが内部セレクターで使用されると、対応する外部セレクターに置き換えられます。これは、通常のネスト動作の代わりに発生します。
例:
.alert {
// The parent selector can be used to add pseudo-classes to the outer
// selector.
&:hover {
font-weight: bold;
}
}
サフィックスの追加:
親セレクターを使用して、外部セレクターにサフィックスを追加することもできます。これは、高度に構造化されたクラス名を使用する BEM などの方法論を使用する場合に特に役立ちます。外側のセレクターが英数字の名前 (クラス、ID、要素セレクターなど) で終わる限り、親セレクターを使用して追加のテキストを追加できます。
例:
.accordion {
max-width: 600px;
margin: 4rem auto;
width: 90%;
font-family: "Raleway", sans-serif;
background: #f4f4f4;
&__copy {
display: none;
padding: 1rem 1.5rem 2rem 1.5rem;
color: gray;
line-height: 1.6;
font-size: 14px;
font-weight: 500;
&--open {
display: block;
}
}
}
プレースホルダ セレクタ:
Sass には、「プレースホルダー」と呼ばれる特別な種類のセレクターがあります。見た目も機能もクラス セレクターによく似ていますが、% で始まり、CSS 出力には含まれません。実際、プレースホルダー セレクターを含む複雑なセレクター (カンマ間のもの) は CSS に含まれず、すべてのセレクターにプレースホルダーが含まれるスタイル ルールも含まれません。
例:
.button{
box-sizing: border-box;
border-top: 1px rgba(#000, .12) solid;
padding: 16px 0;
width: 100%;
&:hover { border: 2px rgba(#000, .5) solid; }
}
プレースホルダー セレクターは、各スタイル ルールが使用される場合と使用されない場合がある Sass ライブラリを作成する場合に役立ちます。経験則として、独自のアプリ専用のスタイルシートを作成している場合は、クラス セレクターが利用可能であればそれを拡張する方がよい場合がよくあります。
これらはCSSのスタイルを設定するための基本的なルールの一部です。
