SCSS入門
1.SCSSとは?
CSSと同様に、ブロック文「{・・・}」を使ってウェブページのスタイルを指定するCSSの拡張版です。
CSSはコーディングを進めるにつれて、肥大化し複雑になってメンテナンスが難しくなってくるため、効率的に読みやすくメンテナンスしやすいコードを「SCSS」で書くことができます。
SASSとSCSSの違い
似た書き方に「SASS」というものがあります。
SCSSは、このSASSがCSSとの互換性が十分ではなかったため開発されたものであり、そのためSCSSがデフィクトスタンダードになっているため、SCSSを覚える方がこの先の開発に便利だと思われます。
この2つは拡張子が異なり、SCSSが「.scss」、SASSが「.sass」です。
2.SCSSを使用するにはコンパイルが必要
SCSSのコードを使用するためには、SCSSをCSSにコンパイル(変換)してくれるコンパイラーが必要です。
コンパイルするやり方は、下記の2通りあります。
Prepros
SCSSをCSSに変換するGUIコンパイラです。
コンパイル以外にも便利機能が搭載されていますが、無料版は広告が表示されるため、あまりお勧めしません。
Visual Studio Code の Live Sass Compiler
Visual Studio Code はコードエディターなので、単体ではSCSSのコンパイルは出来ませんが、コンパイルを行ってくれる「Live Scss Compiler」というプラグインを入れることが可能です。
このプラグインを使用することで、SCSSファイルの保存と同時にCSSファイルを作成してくれます。
3.SCSSのメリット
変数(variables)
SCSSでは変数が使用できます。
繰り返し使うような値を変数に格納しておけば、メンテナンス時に変更したい箇所が出て来た時に、少ない作業量で済みます。
<例>SCSSを使って、文字の色を変えてみます
$moji-color : red;
p { color : $moji-color; }
h1 { color : $moji-color; }
ネスティング(nesting)
ネスト(階層化構造)を利用できます。
ネストを使用することで、CSSの全体の記述量を減らすことが出来たり、htmlファイルの構造をイメージしやすくなったりするため、可読性があがりメンテナンスのしやすいコードになります。
sample {
p { color : red; }
h1 { color : red; }
}
これはCSSにコンパイルすると、下記のようになります。
sample p { color : red; }
sample h1 { color : red; }
ミックスイン(mixins)
「@mixin」を使うことによって、修正作業の効率化を図ることができます。
@mixinでコードの塊を作成し、別の場所でそれを呼び出すことができます。
<例>hogeをメソッドのように使用して値を設定します
@mixin hoge($color : #fff , $fSize : 10px) {
color : $color;
font-size : $fSize;
}
.sample {
@inclued hoge(black, 20px);
}
.sample2 {
@include hoge();
}
CSSにコンパイルすると、以下のようになります。
.sample {
color: black;
font-size: 20px;
}
.sample2 {
color: #fff ;
font-size: 10px;
}
継承(inheritance)
継承は、親要素で指定したものが継承して適用されるものです。
<例>「%」で親要素を作り、子要素で「@extend %~」で継承します。
%test-shared {
border: 1px solid #ccc ;
padding: 10px;
color: #333 ;
}
.test1 {
@extend %test-shared;
}
.test2 {
@extend %test-shared;
border-color: green;
}
CSSにコンパイルすると、以下のようになります。
.test2, .test1 {
border: 1px solid #ccc ;
padding: 10px;
color: #333 ;
}
.test2 {
border-color: green;
}
この記事が気に入ったらサポートをしてみませんか?