SCSSを使用してみる
今更ながらCSSのメタ言語、Sass（SCSS）を使い始めました！
Sassについてですが、SassにはSACC記法とSCSS記法という2パターンがあり、今回はSCSS記法を使用するということでSass（SCSS）という表記です。
▼詳しくはこちらのリンクをご覧ください。
何故、今更SCSSを？
と思うかもしれませんが、理由の1つは単に最近まで存在を知りませんでした…
前々から、「CSSってネスト構造でできたらなぁ」とかって思ってはいたのですが、まさか存在するとは！と感動して使い始めることにしました。
どんなことができる？
先程のネスト構造もそうですが、SCSS（≒Sass）の特徴を上げると、
- 変数が使える
- ネストが使える
- 別ファイルの読み込みができる
- スタイルの使いまわしができる
- 四則演算ができる
- 制御構文が使える
といった感じで、プログラミング言語ライクな感じになりました。
CSSはデザイナー向けの言語ではありますが、これはエンジニア寄りな感じですね。
それでは、各機能について紹介します。
１．変数が使える
とはいえ、CSSでも変数は使うことができるっちゃできるのですが、SCSSでも変数は使えます！
使い方は、簡単で以下のような形式で記述します。
宣言方法
|
1 |
$変数名:値; |
このように宣言します。
実際に「textColor」という名前の変数にカラーコード「#fff」を使用すると、
|
1 |
$textColor:#fff; |
といった感じになります。
使用方法
宣言方法の例で紹介した「textColor」を使用したとすると、
|
1 2 3 |
h1{ color:$textColor; } |
といった感じになります。宣言時に頭につけた「$」も忘れないように付けてくださいね。
２．ネストが使える
個人的にかなり推したい機能の1つ、ネスト構造を使用できるというものです。
ネスト構造は？と思う方もいるとは思いますが、まずは使用例を見て頂いた方が早いかと思います。
通常のCSSで
|
1 2 3 4 5 6 |
#main{ background:#111; } #main p{ color:#fff; } |
という風に書くところを、SCSSでは
|
1 2 3 4 5 6 7 |
#main{ background:#111; &p{ color:#fff; } } |
という風に書けます。
HTML側で入れ子になっている要素に対してCSSでも同じように入れ子で表現できちゃうということです。
単にコードが短縮できるというメリットもありますが、CSS内でひとまとまりにしやすいため、メンテナンス性も向上するかと思います。
名前空間でのネストも可能
これも実際にコードを見た方が早いと思うので、コードを見せます。
まずは通常のCSS。
|
1 2 3 4 5 |
h1{ font-family:'arial'; font-size:2vw; font-color:#111; } |
これをSCSS形式で書くと、
|
1 2 3 4 5 6 7 |
h1{ font:{ family:'arial'; size:2vw; color:#111; } } |
このように書けます。
ネストにして同じ要素でひとまとめにできるのはスッキリしていていいですね！
３．別ファイルの読み込みができる
別ファイルのインポートができること自体は通常のCSSでもできるのですが、Sassでのメリットは、出力されるCSSは一つになることです。
Sassとして記述する中では共通する部分は別のファイルとして記述して、分けることができますが、実際に出力する際は一つのまとまったファイルになるため、HTTPのリクエストが少なくなり、SEOの向上にもつながります。
記述は@importを使用して以下のように記述します。
|
1 |
@import:"ファイル名"; |
これだけでOKです！
４．スタイルの使いまわしができる
これはなかなか面白いですよね。
スタイルを使いまわせて、更に引数も渡せるという。関数チックですね。
実際のコードがこんな感じです。
|
1 2 3 4 5 6 7 8 9 |
@mixin style1($width:10vw,$height:10vw,$color:#fff){ width:$width; height:$height; color:$color; } .caption{ @include style1(5vw,5vw,#111); } |
@mixin スタイル名(初期値,初期値,初期値){パラメータ}
みたいな感じに宣言して、使用する際は
@include スタイル名(値,値,値);
といった感じで記述します。
因みに
|
1 2 3 |
.caption{ @include style1(); } |
という風に記述すると、初期値が使用されます。
５．四則演算ができる
これもありがたい！
要素を横並びにするときに、
「幅がこの大きさで4分割だからいくつで…」
と計算しているところを計算式を書いておくだけでOkになります。
書き方はこんな感じ。
|
1 2 3 |
img{ width:(100%/4); } |
括弧内に計算式を書く形式になります。
単位は必ず忘れないように注意してくださいね。
６．制御構文が使える
これはもう、プログラマにはありがたいですね…
使えるのは条件分岐とか繰り返しだそうです。
使用例に関しては、こちらからご覧ください（説明すると長くなるので
といった感じになります。
今回のブログは上にも挙げました、Qiitaの記事を参考に触ってみて、ノートがてらまとめた感じになりますので、内容が似ている点はご容赦ください。
インストール方法等も参考にした記事に掲載してありますので、そちらを参考にご覧ください。
今回のブログ曲
今回投稿中に聴いていた曲はこちら