SCSSとはSassの1種で、簡単に言うと「CSSの上位互換」のようなものです。
今回はSCSSの書き方を紹介していきます。
- CSSの記述が楽になり、作業効率が爆上がりする
- 後から見てもわかりやすく、メンテナンス性が高い
- 記述方法が似ているため、学習コストが低い
「SCSSって何だ！？」という方は、別記事で紹介していますので絶対に見てくださいね！
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
それでは本文へ、レッツゴー！
SCSSの使い方
まずSCSSは、以下の様な流れになります。
- SCSSを使える環境にする
- SCSSで記述していく
- CSSに変換する（自動）
- HTMLファイルにいつも通りにCSSを読み込ませる
まだSCSSを書いていく環境が準備できていない方は、先に以下の記事をご一読ください。
準備といってもプラグインをダウンロードすれば8割終わりなので、とっても簡単です！
それではいざSCSS！
といきたい所なのですが、ちょっとだけ最初に知っておいてほしいことがあります。
SCSSの書き方は、少しずつ覚えていける
SCSSは、.scssという拡張子のファイルに、SCSS独自の記法で書いていくのですが、
通常のCSSの記法でも問題ありません。
もちろん最大限に活用していくためには、SCSSの記法をゴリゴリつかって書いていくわけですが、いきなり全てを頭に詰め込む必要はないということです。
簡単なところからつまみ食い方式で使っていきましょう！
ということで、個人的にコスパの良い記法から順に紹介していきます。
意気込まず、気楽にやっていきましょう！
それでは、空っぽのstyle.scssを準備しましょうね。
SCSSの書き方
まずは、もはや学習する必要すらない、簡単かつ便利なものから紹介していきます！
ここを覚えるだけでも十分、記述効率やメンテナンス性が激上がりします。
ネスト構造（入れ子構造）が最強すぎる
まずはネスト構造について、これだけでもCSSより記述が早くなります。
ネスト（入れ子）とは、{}（ブロック）の中にさらに{}を入れていくことです。
以下のコードをSCSSファイルにコピペしてコンパイル（CSSに変換）してみましょう。
VSCodeユーザーは「Watch Sass」のクリックをお忘れなく！SCSSファイルを上書き保存するだけで自動でコンパイルされます。
サンプルコードをコピペして結果を見るだけで、ほぼ使い方が分かります。
.A{
color: black;
.B{/* ネストしていくことで親のセレクターと空白で連結される*/
color: red;
> .C{
color: blue;
}
}
&::before{/* &を使うと空白で連結されずに、親セレクターをそのまま引っ張ってくる */
color: green;
}
&.a{
color: gray;
&:hover{
color: pink;
}
}
&BCD{
/* テキストと結合させ、別のクラス名にすることもできる */
color: yellow;
.E{
color: violet;
}
}
}一応コンパイル後のCSSも結果も載せておきますね！
.A {
color: black;
}
.A .B {
/* ネストしていくことで親のセレクターと空白で連結される*/
color: red;
}
.A .B > .C {
color: blue;
}
.A::before {
/* &を使うと空白で連結されずに、親セレクターをそのまま引っ張ってくる */
color: green;
}
.A.a {
color: gray;
}
.A.a:hover {
color: pink;
}
.ABCD {
/* テキストと結合させ、別のクラス名にすることもできる */
color: yellow;
}
.ABCD .E {
color: violet;
}す、すすすすごくないですか！？
めちゃくちゃ夢広がりますね！いや別に夢は広がらないか。
この書き方は記述効率が上がるのはもちろんのこと、あとからもとても見やすく、メンテナンスも楽になります！
一応軽く解説しますね。
理解した方は飛ばしてOKです。
普通のネスト（入れ子）をすると、セレクターが空白で連結される
それではさっきのサンプルをちょっと小さくしてみましょう！
.A{
color: black;
.B{
color: red;
> .C{
color: blue;
.D{
color: yellow;
}
}
}
}通常のCSSの書き方で、{}（ブロック）の中に更に{}を入れていくことで、自動的に親セレクター（外側にいるセレクター）と、空白で連結されていきます。
コンパイル後のCSSの結果は、このようになります。
.A {
color: black;
}
.A .B {
color: red;
}
.A .B > .C {
color: blue;
}
.A .B > .C .D {
color: yellow;
}ブロック内のセレクタで&を使うと、親セレクターを参照する
こちらもミニサンプルを見ていきましょう！
.A{
color: black;
&BCD{
color: red;
&:hover{
color: blue;
&::before{
color: green;
}
}
}
}ブロック内のセレクタで&（アンパサンド）を使うと、空白で連結されず、親のセレクターをそのまま持ってくることができます。
コンパイルしたCSSは、以下のようになります。
.A {
color: black;
}
.ABCD {
color: red;
}
.ABCD:hover {
color: blue;
}
.ABCD:hover::before {
color: green;
}&は主に以下のような場面で使います。
- 空白なしでクラスを連結させるとき
例）.A.B - 疑似要素を使うとき
例）.A:hover - 新たなクラス名を生み出すとき
例）.ABCD
ここで若干不便なところが、「.ABCD」で検索してもSCSSではヒットしないことです…。
ネスト構造で書いていくポイント
ネスト構造はとても便利ですが、やり過ぎると逆に見づらくなってしまいます。
- 入れ子になりすぎて横が伸び、改行されすごく見づらくなる
- 入れ子になりすぎて縦が伸び、セレクター迷子になる
変数を使って色コードを操る
まだ疲れていませんね！？
変数もとっても便利なので是非今日身につけちゃいましょう！
※cssでも変数は使えますが、scssでの変数の方が小回りが効きます。
変数は、いちいち記憶してられない色コードに対して、とっても心強い味方になります！
変数とは、繰り返し使いたいものを入れておく入れ物です。
モンスターボールみたいなものですね！
「この変数の中身をこれにしてください！」
と変数の定義をしておくことで、後から何度でも変数を使って中身を呼び出すことができます。
変数の定義はとってもシンプル。
$変数名: 中身;これで変数名の定義ができます。
使う時は「$変数名」と書くだけで、自動的に中身が召喚されます。
それではサンプルをコンパイルして結果を見てみましょう。
CSSは上から読まれているので、先に変数を定義してから変数を使いましょう。
$mainColor: #150141;
$subColor: red;
$backColor: rgba(0, 0 ,0 , .2);
body{
color: $mainColor;
background-color: $backColor;
h1{
color: $subColor;
}
}コンパイルしたCSSの結果は以下のようになります。
body {
color: #150141;
background-color: rgba(0, 0, 0, 0.2);
}
body h1 {
color: red;
}この変数の強みは、いちいち色コードを覚える必要がなくなるだけではありません。
定義した変数の中身を変えるだけで、変数を使った全ての中身も書き変わるところです。
クライアントから「もう少し全体的にこの赤色のところ落ち着かせてくれないかな？」
と言われた時も、ものの5秒で全ての赤色を書き換えることができるというわけなのです！
すげー！
もちろん変数は色コード以外にも使えます
変数は色コード以外にも使えます。
よく使うワードや数字を入れておいてもOK
僕はレスポンシブ用のブレイクポイントを変数に入れています。
$trainer: 'satoshi';
$breakpoint: 1024;
.master-#{$trainer}{
pointer-events: none;
@media screen and (max-width: #{$breakpoint}px) {
pointer-events: auto;
}
}コンパイルした結果は、このようになります。
.master-satoshi {
pointer-events: none;
}
@media screen and (max-width: 1024px) {
.master-satoshi {
pointer-events: auto;
}
}さて、ちょっと見慣れないものがいますね。
ここで変数を使うときのお約束毎を覚えておきましょう。
- テキストを定義するときはクォーテーションで囲む
例）’satoshi’ - 変数を別のテキストと結合して使う場合、#{$変数}と書く
例）.master-#{$trainer}、{$breakpoint}px
また変数は万物を収める力はもっていません。
「$w: ‘width: 100%;’;」のように、プロパティと値をフルセットで保管してぶいぶい言わせることはできません。
変数ではなく、後ほど紹介する@mixinを使うことで、プロパティと値のセットを使い回すことができるので乞うご期待！
@useでファイルを分割管理する（@importの後継）
SCSSでは、複数のSCSSファイルを、1つのCSSファイルとしててコンパイルすることができます。
CSSは分割しすぎると、ウェブサイトの読み込み時間に影響を与えてしまうので、好き勝手分割することはあまり得策ではありません。
SCSSでは、ファイルを２万個に分割しようと、最終的には1つのCSSファイルとしてコンパイルできるので、自由にファイルを分割することができ、管理がとても楽になります。
かつては「@import」というディレクティブがその役目を担っていたのですが、2022年10月1日に廃止されるので、散りゆく@importについては割愛します。
それでは実際に試してみましょう！
接頭に_（アンダースコア）をつけたSCSSファイルを作成する
分割したSCSSファイルを一元化するということで、まずは複数SCSSファイルを作成しておきたいです。
ただし、普通にSCSSファイルを複数作成すると、作成したファイル数だけCSSファイルも生成されてしまいます。
SCSSのファイル接頭に_（アンダースコア）を入れることで、CSSへのコンパイルを回避することができます。
今回僕は「style.scss」に加え「_hello.scss」「_goodnight.scss」「_ohmygod.scss」の3ファイルを作成しました。
適当に読み込ませる用の好きなSCSSファイルを作成してください。
あと読み込んだのがわかる様に、適当に何かしら中身も書いておきましょう。
それでは、別ファイルへ読み込ませていきましょう！
@useを使って別のSCSSファイルを読み込む！
それでは、@useを使って読み込ませていきます！
読み込む側のファイル（style.scss）に以下を記述することで、読み込ませることができます。
@use 'SCSSのファイル名';さて、成功しましたか？
読み込ませるにもいくつかルールがあります。
- SCSSのファイル名部分は、
「_（アンダースコア）」と「.scss（拡張子）」は省略可能 - @useは一番最初に記述する
@useより前に何かしら記述するとエラーになる（コメントは可）
こんな感じで、読み込ませることができました！
読み込み先の変数を使う場合
読み込み先のSCSSファイルで定義した変数は、読み込み元のファイルから通常の記法で呼び出すことができません。
少し手間ですが、読み込み先のファイルで定義した変数を読み込み元で使う場合、以下の書き方を使います。
読み込み先ファイル名.$変数名つまり、通常の変数の使い方に加え、どのファイルの変数なのかを教えてあげる必要があります。
ただこれ、ファイル名によっては少しめんどくさいですよね…。
以下の記述で回避することができます。
@use 'SCSSのファイル名' as 新たな名前;ここで読み込み先のファイル名に対し、新たな名前を授けることができます。
そうすることで、変数の呼び出し方も以下のように変わります。
新たな名前.$変数名
さらに「as 新たな名前」の部分を「as *」とすることで、通常の書き方で呼び出すことができるようになります。
まだまだすごいぞSCSS
さて、かけ足で来たもののかなり長くなってしまいましたので、一旦休憩にしましょう。
次回ももっとすごいことをやります！
- @mixinを使ってプロパティ（と値）のセットを使い回す！
変数の巨大バージョンのようなもので、何度も使うプロパティのセットを１箇所に保管し使い回すことができます。 - SCSSでのレスポンシブ対応！
CSSとは少し違ったメディアクエリの書き方を紹介します。 - @forを使ってループ処理をする！
プログラマー御用達のループ処理をCSSで可能にします。
改めていいますが、
SCSSでは通常のCSSの記法が使えます。
SCSSの書き方は、全て一気に覚える必要はありません！
しんどくない程度に、少しずつ自分のペースで取り入れていきましょう。
慣れないSCSSを今回はたくさんがんばりました！
- ネスト構造（入れ子構造）
- 変数（$変数）
- 別ファイルの読み込み（@use）
メンテナンス性という面から見ると@useも使いこなしてほしいですが、まずはネスト構造と変数だけでも十分です。
ネスト構造と変数を覚えるだけで、確実に昨日のあなたより作業が早くなっています。
これに慣れたら、是非ステップアップで次の記事に足を運んでください。
今日もあなたが夢に向かって一歩前進できていますように。
お疲れ様でした。
