SCSS
このページの日本語版はGoogle翻訳による機械翻訳です。
SCSS Basics
HTMLと同様に、より迅速かつ効果的なコード管理のために、AGLはSCSSのプリプロセッサを採用しています。
SCSSはCSSにコンパイルされるプリプロセッサ言語で、ファイルの拡張子は.scssです。
SCSSでは変数やネスティングなどの追加機能をCSSに追加することができます。
これらの追加機能により、SCSSの記述は標準のCSSよりも簡単で迅速になることがあります。
1. Variables (変数)
変数は、スタイルシート全体で再利用したい情報を保存する方法と考えてください。
色、フォント スタック、再利用したいと思われる CSS 値などを保存できます。
SCSS は $ 記号を使用して何かを変数にします。 以下に例を示します。
/* Scss */
$font-stack: Helvetica, san-serif;
$primary-color: #333;
body{
font: 100% $font-stack;
color: $primary-color;
}
/* Css */
body{
font: 100% Helvetica, sans-serif;
color: #333;
}
SCSS が処理されると、$font-stack と $primary-color に対して定義した変数が取得され、CSS に配置された変数値を含む通常の CSS が出力されます。
これは、ブランドカラーを扱い、サイト全体で一貫性を保つ場合に非常に強力です。
2. Nesting (入れ子)
HTML を作成するとき、HTML には明確なネストされた視覚的な階層があることにおそらく気づいたでしょう。 一方、CSS はそうではありません。
SCSS を使用すると、HTML と同じ視覚的な階層に従う方法で CSS セレクターをネストできます。 ルールが過度にネストされていると、過剰に修飾された CSS が生成され、保守が困難になる可能性があり、一般的に悪い習慣であると考えられていることに注意してください。
それを念頭に置いて、サイトのナビゲーションの典型的なスタイルの例をいくつか示します。
/* Scss */
nav{
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
display: inline-block;
}
a{
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
/* Css */
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
}
nav a{
display: block;
padding: 6px 12px;
text-decoration: none;
}
ul、li、および a セレクターが nav セレクター内にネストされていることがわかります。
これは、CSS を整理して読みやすくするための優れた方法です。
3. Modules (モジュール)
すべての SCSS を 1 つのファイルに記述する必要はありません。 @use ルールを使用して任意に分割できます。
このルールは、別の SCSS ファイルをモジュールとしてロードします。つまり、ファイル名に基づく名前空間を使用して、SCSS ファイル内の変数、ミックスイン、関数を参照できるようになります。
ファイルを使用すると、コンパイルされた出力に生成される CSS も含まれます。
/* Scss */
/*_base.scss*/
$font-stack: Helvetica, sana-serif;
$primary-color: #333;
body{
font: 100% $font-stack;
color: $primary-color;
}
/*styles.scss*/
@use 'base';
.inverse{
background-color: base.$primary-color;
color: white;
}
/* Css */
.box{
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
@use 'base' を使用していることに注意してください。 style.scss ファイル内。
ファイルを使用する場合、ファイル拡張子を含める必要はありません。 SCSS は賢いので、あなたのためにそれを解決します。
4. Mixins (ミックスイン)
CSS には、特に CSS3 や多数のベンダー プレフィックスが存在する場合、記述するのが少し面倒なものもあります。
ミックスインを使用すると、サイト全体で再利用する CSS 宣言のグループを作成できます。
値を渡してミックスインをより柔軟にすることもできます。 ミックスインの有効な用途は、ベンダー プレフィックスに使用することです。
以下は変換の例です。
/* Scss */
@mixin transform($property){
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box{
@include transform(rotate(30deg));
}
/* Css */
.box{
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
ミックスインを作成するには、@mixin ディレクティブを使用して名前を付けます。 mixin トランスフォームに名前を付けました。
括弧内の変数 $property も使用しているので、必要なものを何でも変換して渡すことができます。
ミックスインを作成した後、@include で始まり、その後にミックスインの名前が続く CSS 宣言としてそれを使用できます。
5. Extend/Inheritance (拡張/継承)
これは SCSS の最も便利な機能の 1 つです。 @extend を使用すると、CSS プロパティのセットをあるセレクターから別のセレクターに共有できます。 SCSS を非常に乾燥した状態に保つのに役立ちます。
この例では、@extend のプレースホルダー クラスと連携する別の機能を使用して、エラー、警告、成功に関する一連の単純なメッセージを作成します。
プレースホルダー クラスは、拡張された場合にのみ出力される特別なタイプのクラスであり、コンパイルされた CSS をきれいに保つのに役立ちます。
/* Scss */
/*This css will print because %message-shared is extended. */
%message-shared{
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
/*This css won't print because %equal-heights is never extended. */
%equal-heights{
display: flex;
flex-wrap: wrap;
}
.message{
@extend %message-shared;
}
.success{
@extend %message-shared;
border-color: green;
}
.error{
@extend %message-shared;
border-color: red;
}
.warning{
@extend %message-shared;
border-color: yellow;
}
/*Css*/
/*This css will print because %message-shared is extended. */
.message, .success, .error, .warning{
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success{
border-color: green;
}
.error{
border-color: red;
}
.warning{
border-color: yellow;
}
上記のコードは、.message、.success、.error、.warning に %message-shared と同じように動作するように指示しています。
つまり、%message-shared が表示される場所であれば、.message、.success、.error、.warning も表示されます。
魔法は生成された CSS で起こり、これらの各クラスは %message-shared と同じ CSS プロパティを取得します。 これにより、HTML 要素に複数のクラス名を記述する必要がなくなります。
SCSS ではプレースホルダー クラスに加えて、ほとんどの単純な CSS セレクターを拡張できますが、スタイル内の別の場所でネストされているクラスを拡張しないようにするには、プレースホルダーを使用するのが最も簡単な方法です。これにより、CSS 内に意図しないセレクターが生成される可能性があります。%equal-heights は決して拡張されないため、%equal-heights の CSS は生成されないことに注意してください。
6. Operators (オペレーター)
CSS で計算を行うと非常に役立ちます。 SCSS には、+、-、*、/、% などの標準的な算術演算子がいくつかあります。
この例では、簡単な計算を行って余談と記事の幅を計算します。
/*Scss*/
.container{
width: 100%;
}
.article[role="main"]{
float: left;
width: 600px / 960px * 100%;
}
.aside[role="complementary"]{
float: right;
width: 300px / 960px * 100%;
}
/*Css*/
.container{
width: 100%;
}
.article[role="main"]{
float: left;
width: 62.5%;
}
.aside[role="complementary"]{
float: right;
width: 31.25%;
}
Additional Rules (追加ルール)
SASS/SCSS を使用する場合は、次の点に注意する必要があります。
- レベルをできるだけ少なくします (できれば父親→子供の 2 レベル)。
- クラス内の関係については、常にクラスのフルネームを書き留める必要があり、「&」記号を使用しないことに注意してください。この要素に加えて、「&」記号は任意に使用できます。 例えば：
<div class="c-box">
<h2 class="c-box__title">title title title title title</h2>
<p class="c-box__desc">desc desc desc desc desc desc desc desc</p>
</div>
/* Bad */
.c-box {
padding: 20px;
&__title{
color: blue;
}
&__desc{
color: gray;
}
}
/* Good */
.c-box {
padding: 20px;
.c-box__title{
color: blue;
}
.c-box__desc{
color: gray;
}
}
- 純粋な CSS を構築する場合、コードを最適化できない場合があるため、「mixin」を多用しないでください。
- scssでタグ名を直接に呼ぶのではなく、class/id名を呼ぶのです。（つまり、html内のすべてのタグにclass/idを付ける必要があります）
/* Bad */
.c-box {
padding: 20px;
h2 {
color: blue;
}
}
/* Good */
.c-box {
padding: 20px;
.c-box__title {
color: blue;
}
}
- 何か属性を使うとき、その属性がすべてのブラウザ上で一般的に対応されることを確認する必要があります（クロスブラウザ）。この条件を満たせない場合はお客様に相談しなければなりません。）