【WEBデザイン】Sass/Scssを使ってシステマチックなCSSへ！ 投資家のFIREへの旅路 第216回
WEBサイトを構築する際に、HTMLとセットで使用するCSSですが、こちらをよりプログラミングに近い形で使用する手法が、
Sass/SCSSです。
より見やすいコードとなるので、是非活用しましょう！
【Sass】 仕組み＆導入方法
まずは、機能を使うためにSassを使えるようにしましょう！
エディターはVisual Studio Code（VSCode）を推奨です！
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
理由は、コンパイルをいう必須作業が自動でできるからです！
＜仕組み＞
Sassでは、style.css ではなくstyle.scssというファイルを作ります。
style.scssに、コードを書く
そのこのコードが通常のCSSの形に変換される。
style.cssに書き出される
という流れになります。
この変換作業をコンパイルと呼び、これを自動で行ってくれるVSCodeのプラグインがあります！
＜導入方法＞ Live Sass Compiler
Live Sass Compiler：scssファイルを自動で、cssにコンパイルするプラグイン
＜手順１＞
VSCodeの拡張機能から検索をします！
左のバーにある、四角が４つのマークをクリックし、検索窓にLive Sass Compilerと入力。
インストールしましょう！
＜手順２＞
style.scssというファイルを作ります。
＜手順３＞
style.scssを開いて、VSCodeの下部のバーの" Watch Sass"という文字をクリックします。
すると、文字が変化します！ "Watching" になります！
これで、Scssファイルが、CSSに変換されました！
これがうまくいくと、先程、Scssファイルを作成したフォルダに
style.css
style.css.map
というファイルが生成されています！
これで、Sassの機能を使える状態となります！
Scssでスタイルを指定したのに、効いていない！という現象が起きたら、まずは、"watching"になっているかを確認しましょう！
続いて、機能を見て行きます！
【Sass】 Syntactically Awesome StyleSheet
Sassとは、CSSをより、見やすく、メンテナンスしやすくしたモノになります。
Sassでできることはこちら！一部をピックアップしています！
ネスト
変数
四則演算
ミックスイン(mixin)
順番に詳しく見て行きましょう！
【ネスト】
ネストとは、入れ子のことです。プログラミング言語のような書き方ですね。
例えば、このようなHTMLがあるとして ↓
HTML
<header>
<h1> Sassの使い方 </h1>
<p> Sassの機能には、ネストがあります。 </p>
</header>普通のCSSデスタイルを指定する場合は、こうですね ↓
CSS
header{
background-color: red;
}
h1{
font-size: 30px;
color: black;
}
p{
font-size: 20px;
color: white;
}これをネストに書き換えると ↓
SCSS
header {
background-color: red;
h1 {
font-size: 30px;
color: black;
}
p {
font-size: 20px;
color: white;
}
}HTMLでは、<header> の中に、<h1> と <p> があるので、ネストの書き方でも、header{ } の中に、h1、pが入っているわけです。
ネスト構造で書くことで、headerの中のh1という指定ができ、メンテナンス際にも、h1がそのh1なのかをネスト構造をたどればすぐに判別することができますね。
【変数】
これは、例えを見ていただくのが一番です！
/*メインカラー ーーーーーーー*/
$mainColor: #3393ca;
/*サブカラー ーーーーーー*/
$headerColor: #727272;
/*サブカラー２ ーーーーーーー*/
$subColor: #31689b;
/*テキストカラー ーーーーーーー*/
$logoColor: #053a75;た例えば、このように、
$mainColor と、書くと mainColorという「変数」を宣言することになります。
そして、$mainColorの中身は、#3393ca となっていますが、これは色コードですね。
つまり、mainColorという変数には、#3393caという色が入っています。
$mainColor は #3393ca ですということですね！
これを使うときには、
header{
background-color: $mainColor;
}このように変数を呼び出して使うことができます！
そして、変数の便利なところは
このように複数箇所に色を指定したときです。
header{
background-color: $mainColor;
}
main{
background-color: $mainColor;
}
footer{
background-color: $mainColor;
}制作途中で、メインカラーの雰囲気を変えたくなった場合には、
/*メインカラー ーーーーーーー*/
$mainColor: #3393ca; この変数の中身だけを書き換えれば、全てに反映されるわけです！
変数を使用していない場合、全ての箇所を書き換える必要がありますが、変数なら一個書き換えるだけでOKです。
【四則演算】
計算式が使えます。
これも例を見た方がわかりやすいです！
SCSS
header {
width:(100px - 20px) * 2;
}↓↓↓↓↓↓↓↓↓↓
CSS コンパイル後
header {
width:160px;
}エクセルの表計算のように、計算式を入力できます！
【ミックスイン(mixin)】
ミックスインは、簡単に言えば、共通部分のCSSの使い回しを可能にする機能です！
書き方はこうです ↓↓
@mixin smallBox{
width:50px;
padding:10px;
}
.box1{
@include smallBox;
background-color:#eee;
}@mixin ○○ と書きます。
○○のところは、自由に命名できます。
例では、boxのスタイルを定義しています。
つまり、変数の扱いと同様と思ってOK！
smallBoxは、widthが50pxで、padding:10pxである。
このスタイルを定義しておいて、
同様にスタイルを使いたいところで
@include で呼び出す！
@include smallBox； と書けば、
widthが50pxで、padding:10pxと書いたのと同じと言うことですね！
もっと長ーいコードを格納することもあるでしょうし、
その都度、同じコードを書く必要もなく、同じスタイルの箇所には
@include ○○ で終了！！
最高ですね！これ。
【Sass まとめ】
Sassの代表的な機能を紹介しました！
ネスト
変数
四則演算
ミックスイン(mixin)
これらの機能以外にも、関数や、ミックスインに引数を使う、if文などなど、プログラミングのように、CSSをシステマチックに書くことができる機能が万歳です！
しかしながら、これら全ての習得には、時間を要するので、
まずは、これらの使える機能から使っていくことをオススメします！
これで、ベースを作って、さらに、知見を広げていき、スキルアップしていく方が効率が良いでしょう！
やっとこ、CSSに慣れたのに！
Sassとかめんどくせー！！って思う人ほど、使い出したら、その楽さに感動するはず。
制作会社では、必須となっているようですので、
身につけておくと良いでしょう！