SCSSを使用してみた感想。SCSSは爆速コーティングにもってこいでした
2020.02.15
見苦しくてごめんなさい……！
先日書いたこの記事、
［簡単］CSSのメタ言語『SCSS』をDreamweaverで導入する方法を調べてみました
実際に友人のサイト構築をするにあたり、試してみました。
試した結果を踏まえ、「メリット」「デメリット」を書きますので、もしよければ参考にしてください。
まず決論から書きますと、
SCSSを取り入れることで、「爆速コーティング」が可能になりました。
つまり「間違いなくSCSSは活用するべき」という結論にいたりました！
SCSSは導入するべきか否か？
作成したサイトは、デザイン〜コーティングまでのトップ1ページ。
実際に公開するときは、ブログページにWordPressを導入し、コンタクトフォームにGoogleフォームを導入する予定。
まあ今回は実際に公開するか未定なので、トップの ” 側 ” だけを作成しました。
作成期間は9月2日〜9月8日まで。
仕事の隙間を活用しました。
集中し、これ1本に取り組めれば2日もあれば作成できたはずなのですが、これが本業のある辛いところですね。
さらに今回ははじめてのSCSS導入ということで戸惑うことも多く、調べながら作成したので思った以上に時間がかかりました。
ただこの記述方法に慣れちゃえば、もうCSSなんて戻れません。
では、何がそんなにいいのでしょうか？
まとめました！
SCSSを導入するメリット
- 変数が使用できるので楽に色の指定ができる
- たくさん書いていたクラス名を削減できる
- 視覚的に入れ子構造を理解できる
- メディアクエリの指定が楽にできる
1.変数が使用できるので楽に色の指定ができる
SCSSにはCSSでは使えなかった変数の機能が備わってますので、
|
1 2 3 4 5 6 7 8 9 10 11 |
/* ▽変数の定義 */ $main_color:#FFF4E0; $accent_color:#F99292; $main_fontColor:rgba(0,0,0,0.87); .scss__first { background-color: $main_color; } .scss__second { background-color: $accent_color; } |
例えばこんな感じに変数を指定すれば、簡単に背景色などを指定することができるようになりました。
コンパイルすると、
|
1 2 3 4 5 |
.scss__first { background-color: #FFF4E0; } .scss__second { background-color: #F99292; } |
こんな具合になりました。
デザイナーはそんなことないかもしれませんが、わたしはカラーコードを覚えられず、いちいちソースをさかのぼったり、デベロッパーツールを活用していたので、これは画期的でした。
あらかじめ使う色を決めておくことで、作成中に色が揺れることもないのでデザイン面も安心できますよね。
ちなみに配色は配色ツールなどを使用することで、間違いのない配色を選ぶことができました（たぶん）。
https://saruwakakun.com/design/gallery/palette
2.たくさん書いていたクラス名を削減できる
今まで子要素にCSSに指定するために、こんなコードを書いていました。
|
1 2 3 4 5 6 |
.scss { background-color: #FFF4E0; } .scss .scss--child { background-color: #F99292; } |
「.scss」を2度書かなければいけません。
さらにクラス名が長く、入れ子が複雑になると考えるとぞっとしますよね。
しかしSCSSを用いればそんな面倒な記述をすることはありません。
上記のソースをSCSSで記述するとこんな具合。
|
1 2 3 4 5 6 |
.scss { background-color: $main_color; & .scss--child { background-color: $accent_color } } |
こんなに記述が楽になりました。
そしてこれが次のメリットにも繋がります。
3.視覚的に入れ子構造を理解できる
先程の記述にもあるようにソースコードが入れ子になるので、視覚的に入れ子構造を理解することができるようになりました。
4.メディアクエリの指定が楽にできる
最大のメリットはこれじゃないでしょうか？
最初にメディアクエリを定義することで、最初に書いたクラス名を上書きで打ち消していくという面倒な作業がなくなりました。
これをすると記述が増えるほか、クラスを追うのが面倒になるのですが、この方法を使えば……
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@mixin mq($breakpoint: medium) { @if $breakpoint == xsmall { @media screen and (max-width: 500px) { @content; } } @else if $breakpoint == small { @media screen and (max-width: 700px) { @content; } } @else if $breakpoint == medium { @media screen and (max-width: 800px) { @content; } } .scss { width: 1200px; @include mq(medium) { width: 800px; } @include mq(small) { width: 700px; } @include mq(xsmall) { width: 500px; } } |
こんな具合に記述することができるのですよ。
これをすることで、PCのCSSソースとSPのCSSソース同士が近くなるので、簡単に見比べることができるようになりました。
ちなみにコンパイルすると、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.scss { width: 1200px; } @media screen and (max-width: 800px) { .scss { width: 800px; } } @media screen and (max-width: 700px) { .scss { width: 700px; } } @media screen and (max-width: 500px) { .scss { width: 500px; } } |
SCSSを導入するデメリット
- 導入するまでが面倒くさい
- Dreamweaverで使用する場合は2度手間になる
1.導入するまでが面倒くさい
これが多くの人がSCSSを毛嫌いする最大の理由の理由でした。
かくいうわたしもこのイメージのために導入を渋っていました。
正直多くの人がどのように導入しているのかはわかりませんが、Dreamweaverを使用すれば案外簡単に導入することができました。
［簡単］CSSのメタ言語『SCSS』をDreamweaverで導入する方法を調べてみました
導入さえできればこのデメリットはデメリットではなくなりますね。
2.Dreamweaverで使用する場合は2度手間になる
これは最後までわたしにつきまとってきましたデメリットでした。
そして解決できませんでした。
構造上仕方ないのですか、書き方としては、
- SCSSファイルにソースを記述
- 保存
- CSSファイルにコンパイルされる
- CSSファイルをプットする
こんな感じに。
2、3 は自動で行われるためストレスはないのですが、SCSSをそのままチェックインしても意味なく、CSSファイルを選択しチェックインしなればいけないというところが、少しストレスに感じました。
まあ、これは「node.js」などを使用することで解決できるらしいので、デメリットにならないかもしれませんが、今回は非常に面倒に感じました。
SCSSは使うべきか、CSSで十分なのか？
前述しましたが、間違いなくSCSSは活用するべきだと思いました。
1ページ作るだけでこれだけのメリットがあり、さらに調べてみるともっと奥の深そうなSCSSこれは放っておくと後悔するに違いありません。
もっと使いこなせれば、CSSに時間を取られる時間を、「企画」「設計」などユーザーのために使うことができるようになりますよね。
SCSSは便利なのでこのまま、便利機能などをまとめて行こうと思いますので、その際はどうぞお付き合いください！
