Sass(SCSS)入門|プロがこぞって使いたがる魅力と導入方法・使い方まで徹底解説!
Sass(SCSS)ってたまに聞くけど、どんなメリットがあるの?
良さそうだったら使いたいな♪
WEBデザインやプログラミングを勉強していると「Sassが便利すぎる♪」なんて聞いたことがありますよね?
実は、多くのWEB制作者から、Sassは圧倒的な支持を得ているのです。
それはもう「Sassがなきゃコーディングしないもん!!」と駄々をこねるほどに。
この記事では、プロの制作者たちを虜にするSassの魅力をご紹介し、あなたが使えるようになるまでを解説いたします。
Sassをマスターすれば、あなたの周りにいる「爆速で効率的なコーディングができる優秀な制作者」の仲間入りができますよ♪
やぁみんな!僕が現役WEB制作者のさかしだ!(執筆者プロフィールを見る)
Sassは当社のWEB制作でもほぼ必ず導入するツールだから、超リアルで有益な情報をお届けするよ♪
※ 便宜上、「Sass」と「SCSS」を同義語として扱っている部分があります。
「スクール代に30万円は正直怖い。。しかも先払い。」
WEBデザインスクールの料金に絶望していませんか?
実は、スクールに30万円支払う時代は終わりました。
WEBデザイナーの切符を勝ち取る!
プロの添削つきサブスク型スクール爆誕。
【入会金69,800円 + 月額10,800円】
▼詳細はこちらをクリック▼
※未経験からの転職成功者、増産中!
そもそも「Sass」って何?SCSSとの違いは?
Sass(サス)とは「Syntactically Awesome Stylesheets」の略で、日本語にすると「構造的にすばらしいスタイルシート」のことです。
SassはCSSの拡張言語と呼ばれるもので、効率的にCSSを書くための構文を意味しています。
つまり、私たちのCSSコーディングを助けてくれるツールということですね。
また、Sassには書き方(記法)があり、その書き方を「SCSS」と呼びます。
【Sassの公式サイトはこちら(英語です)】
⇒Sassの公式サイト
自分で「素晴らしい」とか言っちゃうんだね(笑)お手並々拝見ですな。
あ、「Sass」と「SCSS」が出てきたけど、「Sass」っていうシステムの書き方が「SCSS」って理解でOK?
その認識でOKだよ♪
もしも「Sass使える?」って聞かれたら「SCSSで書ける?」って意味だと思ってもらっていいぜ!
ほ〜ん。
厳密には異なるけど、現場では「Sass = SCSS」くらいに思っちゃっていいってことか。
問題ナッスィングだ!(確認した方が安心だけどね)
とりあえず「SCSSとは、CSSを効率的に書くためのSassの書き方」ということを覚えておこう!
WEBデザイナーも使えた方がいいのかな?
WEBデザイナーもプログラマーも、CSSを書く人はマスターしておくのがおすすめだ!
実務でも使う確率が高いからね。
勉強する範囲が増えちゃうけど、CSSを効率的に書けるならちょっとがんばってみよっと♪
長期的に考えると、早めに身につけちゃった方がお得だね!
Bootstrapとかのコーディング爆速系ツールは、早めに身につけるのがおすすめだよ!
【Bootstrapについて知りたい方はこちら】
⇒Bootstrapとは?使い方を身につけ、web制作速度を爆速にブーストしよう!
プロはなぜ、Sass(SCSS)に魅了される?7つのメリット
多くのプロWEB制作者がなぜSassを使うかというと、「CSSコーディング・管理が超絶ラクになるから」です。
とはいえ、WEB制作初心者からすると「具体的にどういう機能があって、どう楽になるの?」と疑問ですよね?
実は、SassにはプロのWEB制作者を魅了する、以下のような機能(メリット)があります。
【Sassの魅力・メリット】
- 「ネスト」で記述量が減り、コーディングが爆速になる
- 「変数」を使えるため、メンテナンスがラク
- 「mixins(ミックスイン)」でよく使うコードを使いまわせる
- 「継承」で他の要素に使ったコードを簡単にコピーできる
- 「パーシャル」でファイルを分割すれば、コードの可読性が高まる
- 「演算」ができるからイチイチ計算しなくて良い
- 「プログラミング」もできる
1つずつ、具体的に解説していきますね!
①「ネスト」で記述量が減り、コーディングが爆速になる
Sassには特有の「ネスト(入れ子構造)」が用意されており、これを使うことでコーディングスピードを圧倒的に速めることができます。
なぜ速くなるかというと、コードの記述量がガッツリ少なくなるから。
例えば、以下のHTMLを作成したとします。
<div class="container">
<p class="red">赤文字の文章</p>
<p class="yellow">黄文字の文章</p>
<p class="blue">青文字の文章</p>
</div>
.containerの中のpタグをそれぞれ「赤」「黄色」「青」に文字色変更したい場合、CSSだと以下のように書きますよね?
.container .red {
color: red;
}
.container .yellow {
color: yellow;
}
.container .blue {
color: blue;
}
これをSCSSで書くと、以下のようになります。
.container {
.red {
color: red;
}
.yellow {
color: yellow;
}
.blue {
color: blue;
}
}
見てもらうとわかるように、「.container」は1回しか書かずに済むのです♪
もちろん表示結果は全く同じ。
「え?これだけ?」と感じた人もいるかもしれませんが、コーディングで親要素のclass名を書く回数はものすごく多いです。
あなたも「何回『.container』って入力すればいいのよ…ハァハァ…もう指が上がらないわ…」となった経験はあるはず。
チリも積もれば山となるので、正直「ネスト」機能だけでも、SCSSを使えるようになるメリットは大いにあると言えるでしょう!
これさ、地味だけど超便利っていうのはキャバコにもわかる(笑)
SCSSの「ネスト」を使った後に普通のCSS書くと「うわぁ…毎回親要素の記述するのだりぃ〜。。」って感じるよ。
クライアントに「SCSSを使わないで」って言われたらたぶん発狂して、工数マシマシにする。(※ 安心してください、実際は「マシ」程度です!←)
そのくらい便利なのが「ネスト」なのだ!
メディアクエリもネストにすれば、超便利♪
コーディングで悩ましいのが、「メディアクエリの書き方」ですよね。
かの有名な、「@media screen and 〜」をどこに書くか問題です。
「各要素の下?」 → 「記述量増えるキモい」
「画面幅毎にまとめて?」 → 「スクロールするのダルい」
しかしSCSSのネストで組めば、メディアクエリにも悩む必要がありません!
以下のようにとてもスッキリ書けますよ♪
.red {
color: red;
@media screen and (max-width: 767px) {
color: green;
}
}
ネストされてると、メディアクエリもわかりやすいね〜♪
ぱっと見でどの要素のメディアクエリかが判別できて、超嬉しいよぉ〜〜!!!
要素ごとにわかりやすくメディアクエリを書けるのは便利すぎる。。
自分が楽になるだけじゃなくて、他の人が見てもわかりやすくなるって点でも良いよね!
整理整頓できる男って素敵♪
ネストされたい(意味深)。
②「変数」を使えるため、メンテナンスがラク
SCSSでは「変数」が使えるため、メンテナンスが非常に楽になるというメリットもあります。
「変数」とはデータを入れる箱のようなもので、基本は以下のように定義して使います。
$mainColor: red;
何をしているかというと、左の「$mainColor」が「変数名」で、この「$mainColor」の中に「red」という値を代入しているのです($mainColor = redということ)。
変数の使い方は、以下のように使いたいところで定義した変数を呼び出すだけ。
$mainColor: red;
.container {
.red {
color: $mainColor;
}
}
これをCSSで見てみると、以下のようになります。
.container .red {
color: red;
}
「これ…何が便利なの?そのまま書いた方が早いよね?」と疑問に感じましたか?
実は、変数がCSSコーディングで特に利便性を発揮するのは、「メンテナンス」の場面。
例えば、複数の要素で同じ色を使う際(文字色・背景色・罫線の色等)、変数を使えば一箇所変更するだけで全てを変更できるため、非常に便利なのです。
以下のコードを見てみましょう!
.container {
border: 1px solid red;
.wrap {
background-color: red;
.main-text{
color: red;
}
.sub-text {
text-shadow: 1px 2px 3px red;
}
}
}
上記のコードの「red」を全て「blue」に変えたい場合、redを一つずつ変更する必要があり「鬼だる〜〜」となり、ベッドにダイブしてしまいますよね?
WEBサイト1ページだともっとコード量が多いため、ヒジョーーーに面倒です。(一括変換も可能ですが、ここでは無視します)
クライアントから「他のページも同じようにお願いね」なんて言われた日には、エラーを吐かない程度の全角スペースを入れて納品してやりたくなります。
ですが、もし「red」を「変数」にしておくと、状況は一変!
$mainColor: red; .container { border: 1px solid $mainColor; .wrap { background-color: $mainColor; .main-text{ color: $mainColor; } .sub-text { text-shadow: 1px 2px 3px $mainColor; } } }
「$mainColor」の値を一箇所「blue」にしてあげるだけで、全ての$mainColorの値が「blue」に変わります。
これが「SCSSはメンテナンスが楽よね〜」と言われる理由です。
「変数」ってプログラミングで使うイメージだから、WEBデザイナーには無縁だと思ってたよ。
これだけ簡単に使えて便利なら、WEBデザイナーも使うべきだね!
必要な色の数だけ変数を用意しておくだけで、修正が格段にしやすくなるよ♪
クライアントからの「メインの色を少し暗くしたい」という小さな修正依頼にも、嫌な顔せずに速攻で対応できるぜ!
もちろん、色だけじゃなくて他のことにも変数は使えるよ♪
SCSS、もう好き〜。
③「mixin(ミックスイン)」でよく使うコードを使いまわせる
SCSSには「mixin」という機能があります。
mixinを簡単に説明すると、よく使うコードに名前をつけてまとめておき、別のところで何度でも使いまわせるありがたい機能のことです。
車の製造で例えると、先にハンドルなどの部品を「mixin」で作っておいて、あとは部品を車に取り付けるだけで完成状態にできるイメージですね。
ざっくりとした使い方は以下の通り。
【mixinの使い方】
- 『@mixin 任意の名前』を指定した後に、まとめたいコードを定義する
- 呼び出したいところで「@include 任意の名前」と記述する
実際にコードを見てみましょう!
@mixin flexCenter /* 任意の名前 */ {
display: flex;
justify-content: center;
align-items: center;
}
.container {
@include flexCenter;
background-color: red;
}
これをCSSに変換すると…
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: red;
}
上記のように、3行分のコードをたった1行で、何度も、色々なところで使いまわせるということですね!
これだけで、コードの記述量を減らせる手軽さも、大きな魅力ですね。
ちなみに、mixinの定義は呼び出す位置よりも上に書く必要があるよ!
/* NG例 */
.container {
@include flexCenter;
background-color: red;
}
@mixin flexCenter /* 任意の名前 */ {
display: flex;
justify-content: center;
align-items: center;
}
呼び出しの方が先だと「mixin定義されてないよ〜このおっちょこちょい♡」ってブラウザに怒られるから気をつけよう。
mixinは「引数」を使うこともできる
mixinは「引数」も使うことができるので、定義した値を要素によって変更することもできます。
言葉だと理解しにくいので、以下の例を見てみましょう!
@mixin flexCenter($bWeight, $bStyle, $bColor) {
display: flex;
justify-content: center;
align-items: center;
border: $dWeight $bStyle $bColor;
}
.container {
@include flexCenter(2px solid black); /* ←引数を指定 */
}
CSSに変換すると…
.container {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black; /* ← 引数で指定した値が代入されています! */
}
引数を使えば、「borderもmixinでまとめておきたいけど、線の太さやスタイルは要素ごとに変更したい!」というわがままにも応えてくれます。
書き方は「@mixin 任意の名前(引数)」で定義し、「@include 任意の名前(引数に代入する値)と書くだけでOK。
う…ちょっと気持ち悪くなってきた。。
プログラミングの要素が強いもんね(笑)
引数は必須じゃないから、「mixinでは引数も渡せる」くらいに覚えておけば問題ないよ。
でも、mixinを使えたら効率的にコードが書けるし、メンテナンスも楽になりそうだね♪
ちょっとがむばる価値あるかも。。
④「継承」で他の要素に使ったコードを簡単にコピーできる
SCSSには「継承」という機能があり、他の要素に使った複数行のCSSコードを、たった1行で使い回すことが可能です。
それが「@extend」という機能で、上記「@mixin」と似た機能です。
百聞は一見にしかずなので、違いはコードを見てイメージしましょう!
.main-text {
color: #333;
font-size: 20px;
font-weight: bold;
}
/* .main-textのコードを継承させます */
.sub-text {
@extend .main-text;
padding: 10px;
}
▼結果
.main-text {
color: #333;
font-size: 20px;
font-weight: bold;
}
/* .main-textのコードを継承させます */
.sub-text {
color: #333;
font-size: 20px;
font-weight: bold;
padding: 10px;
}
このように「@extend」を使えば、「class名」を記載するだけでその要素に指定されたプロパティと値を継承することができます。
コードを使い回すことができるので、記述量が圧倒的に少なくなりそうですね!
「引数は渡せない」ということが、mixinとの大きな違いと言えそうです。
SCSS、ラブラブラブッ♡
継承は便利だけど、以下2点に注意だ!
【継承の注意点】
- 使いすぎると可読性が悪くなる(いちいち確認しなきゃ中身がわからない)
- class名がわかりにくいとパニクる
「継承」は便利だけど、制作者しかわからない書き方をすると、逆に不便になるから注意しようね!
「継承」より「mixin」の方がよく使われていると思うよ♪
ミナサンノコトヲカンガエテコーディングシマス。
⑤「パーシャル」でファイルを分割すれば、コードの可読性が高まる
パーシャルファイルを細かく作成することで、コードの可読性が高くなり、メンテナンス性も高まるというメリットがあります。
「パーシャルファイル」とは、分割されたSass(SCSS)ファイルのこと。
例えば、下層ページや「header」「footer」などのパーツだけでなく、「色」や「ボタン」、「フォーム」専用などのSCSSファイルを用意するイメージですね!
特にSCSSは「変数」などを使うので、「色専用のファイル」などがあると、格段にメンテナンスがしやすくなります。
ひとつのファイルに全てのCSSを書いて「コード長すぎ〜読みにく〜」となった経験がある方は、ぜひ使いたいところですね!
圧倒的に変更・修正がしやすくなりますよ♪
また、CSSに出力する際はパーシャルファイルを全て「@import」で統合することもできます。
この辺はCSSと同じですね!
SCSSファイル名に「_(アンダースコア)」を付けることで、分割ファイルを統合させられるぜっ。
importで読み込む場合は、「@import」の後にアンダースコアと拡張子を除いた任意の名前を指定する形だ。
/* ファイルの統合イメージ */
@import
"header",
"footer",
"color"
⑥「演算」ができるからイチイチ計算しなくて良い
SCSSは「演算」もできるので、いちいち値を計算する必要がありません。
ここでの演算は「四則演算」のことで、足し算、引き算、掛け算、割り算のことです。
例えば、コーディング中に「1366pxを3カラムにしたいんだけど、1カラムは何pxだろう?」と思って、計算機を叩いた経験はありませんか?
SCSSを使えば、答えを知らずにこれを実現可能です。
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.container {
width: 1366px;
display: flex;
.box {
width: (1366px / 3);
}
}
.container {
width: 1366px;
display: flex;
}
.container .box {
width: 455.3333333333px;
}
上記のように計算式を書くだけで、コンパイル(CSSへの変換)時に答えを自動計算してくれます。
ちなみに、徐算(割り算)のみ「()」をつける必要があるなど、細かなルールがある点は注意しましょう!
この例を見て「calcでいいじゃん!」って思ったあなた…正解だ(笑)
けど、SCSSなら「変数」を使って計算することもできるから汎用性は高いぜ!
CSS上に計算式を書いとけば他の人にも「何の値か」がわかりやすいから良いかも♪
一点、SCSSだとcalcと違って「単位が違うもの同士の計算はできない」ってところは要注意ね!(2rem + 3pxなど)
⑦「プログラミング」もできる
SCSSでは「条件分岐(if文等)」や「繰り返し処理(for文等)」「関数」などのプログラミングの処理を実行することもできます。
つまり、JavaScriptを使用せずに「画面のスクロール量によってスタイルを変更する」といったことができるのです。
とうとうCSSも、プログラミングと深く関わってきましたね〜。
ただ、SCSSでの条件分岐等はあまり使う機会がないので、「プログラミングもできるよ」ってことだけ覚えておけば良いでしょう。(JavaScript等でプログラムすることが多いです)
派手な機能があるわけではないけど、スルメのように噛めば噛むほど味が出てくるのがSCSSだよ。
最初は学習コストがかかるけど、使えば使うほどどんどん便利になって、いつの間にか手放せない存在となるぜ。
キャバコにとっての僕みたいな存在だ。
控えめに言ってキモいよぉ〜。
でも、SCSSが便利なことはわかた♪
「使ってみないとイメージ湧かないなぁ〜。」という人は、SCSSを導入せずに試せるサービスがあるから、使ってみてね♪
ネストで記述するだけでも便利さを実感すると思うよ!
以下画像のように、SCSSで記述するだけでCSSに自動コンパイルしてくれるぜ〜
【SCSSを簡単に試せるサービスはこちら】
⇒SassMeister | The Sass Playground!
【Sassの魅力・メリット】
- 「ネスト」で記述量が減り、コーディングが爆速になる
- 「変数」を使えるため、メンテナンスがラク
- 「mixins(ミックスイン)」でよく使うコードを使いまわせる
- 「継承」で他の要素に使ったコードを簡単にコピーできる
- 「パーシャル」でファイルを分割すれば、コードの可読性が高まる
- 「演算」ができるからイチイチ計算しなくて良い
- 「プログラミング」もできる
Sassの導入方法と使い方
さてここからは、SCSSの導入方法と使い方をご紹介いたします!
実は、SCSSはCSSファイルにただ「SCSS」の記法で書けば良いわけではありません。
なぜかというと、ブラウザは「SCSSファイル」を正確に読むことができないためです。
そのため、SCSSファイルをCSSファイルに変換(コンパイル)するための機能を導入する必要があります。
ひと手間かかりますが、まずはSCSSをコンパイルするための機能をサクッと導入していきましょう!
手順は以下の通りです。
【Sassの導入から使うまでの手順】
- プラグインでSCSSをサクッと導入する
- ワンクリックでコンパイルする
- コンパイルされたCSSファイルの出力先を指定する
難しく聞こえますが、簡単に導入できますので安心してくださいね♪
場合によってはプロジェクトごとに導入する必要があるため、何度か練習しておくのをおすすめします。
SCSSはプラグインでサクッと導入しよう!
SCSSを導入する方法は、以下の3種類があります。
【SCSSの3つの導入方法】
- テキストエディタのプラグインを使う方法
- コンパイルアプリを使う方法
- コマンドを叩いてSCSSを使う方法
ここでは①の「テキストエディタ(VScode)のプラグインを使う方法」をご紹介します。
なぜかというと、一番簡単で便利だから(笑)
テキストエディタの中でも、人気の「Visual Studio Code(VScode)」のプラグインを使ったSCSS導入方法をご紹介します。
VScode以外の方は、自分のテキストエディタ専用の「SCSS導入プラグイン」を探してみてね!
以下に人気エディタのSCSS導入記事をリンクしておくから、参考にしてもらえると嬉しいぜ♪
プラグインを使いたくない人は、以下の「アプリを使う方法」「コマンドを叩いてSassを使う方法」で導入すると良いらしいよ!
ど素人のキャバコには少し難しく感じたけど(笑)
Live Sass Compilerをインストールしよう!
まずは「Live Sass Compiler」というプラグインをVScodeにインストールしていきます。
「Live Sass Compiler」とはその名の通り、Sassをコンパイルしてくれる環境を構築してくれるプラグインです。
悪いやつではないので、安心して仲間に入れてあげてください。
VScodeを開いたら、画面左のツールバーの「拡張機能」を選択しましょう。
表示された検索バーに「Live Sass Compiler」と入力します。
下に表示された「Live Sass Compiler」の「インストール」をクリックすることで、プラグインの導入は完了です。
めっちゃ簡単やん!!
さかしすご〜い♪
もっとだ…もっとほめてくれ…..!!!!!!
Sassの使い方(コンパイル方法)を覚えよう!
次に、 コンパイルの実行方法を身につけます。
「Live Sass Compiler」をインストールできましたら、画面右下のメニューバーに表示される「Watch Sass」をクリックしましょう!
これでSCSSで作成したファイルをCSSに自動変換(コンパイル)できます(SCSSファイルに変更を加え、保存したと同時にコンパイルされます)。
基本的な使い方はたったこれだけで、この瞬間から快適なSass生活を送ることができますよ♪
VScodeを起動するたびに「Watch Sass」をクリックする必要があるので、忘れないようにしましょうね。
さて今度は、実際にHTMLファイルとSCSSファイルを作成し、CSSへのコンパイルを実行してみましょう!
「demoフォルダ」を作成し、以下のコードをそれぞれ「HTML(index.htmlにしましょう)」「SCSS(style.scssにしましょう)」ファイルにコピペすればOKです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SCSSのデモファイル</title>
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<p class="text">君の瞳は美しい。なんなら、食べてしまいたい。</p>
</div>
</body>
</html>
$mainColor: red;
.container {
width: 100%;
height: 100%;
background-color: gray;
.text {
font-size: 30px;
font-weight: bold;
color: $mainColor;
}
}
ファイル作成はできましたか?
SCSSファイルを「Cmd(Ctrl)+ S」で保存し、index.htmlと同じ階層に「style.css」と「style.css.map」が生成されたらOKです!
コンパイルされると、「style.css」と「style.css.map」は必ず生成されるので、驚いても消さないようにしましょう。
中身をチェックし、以下のようにきちんとコンパイルされていればSassの導入は成功です♪
おめでとうございます!
.container {
width: 100%;
height: 100%;
background-color: gray;
}
.container .text {
font-size: 30px;
font-weight: bold;
color: red;
}
ちなみに、Sassのコンパイルを終了させたい場合は、もう一度「Watch Sass」をクリックすればコンパイルしなくなります。
なんだよ…使い方までめっちゃ簡単じゃん!
Sassはプラグインを使っちゃえば、超余裕で使えるんだ♪
昔はRubyを使ったりで超ダルだったんだぜ。。
「〇〇.css.map」ってなに?
mapファイルは、デバッグツールでコードを見たときに、SCSSファイルのコードの位置(何行目に記載など)を表示してくれるためのファイルだよ!(以下画像ピンク部分)
え?これって普通に表示しれくれるんじゃないの?
実はSCSSでコーディングしてmapファイルなしにデバックツールを開くと、コードが全て「〇〇.scss: 1」って表示されちゃうんだ。
これだと、どこに修正すべきコードがあるかわかりにくいよね?
けどmapファイルがあれば、「〇〇.scss:286」みたいにちゃんと記載行を表示してくれる。
地味だけど、実は超便利なファイルなんだ。
ほ〜ん!めちゃ便利やん!
知らないと間違って消しちゃいそう(笑)
消しちゃっても、コンパイルするたびに自動で生成されるから安心してくれ!
僕のように、何度でも甦る不死鳥ファイルだから(笑)
うざぁぁぁ〜!
CSSファイルの生成場所を指定しよう!Live Sass Compilerの設定
導入が終わったら、Live Sass Compilerの設定で「CSSファイルの生成場所」を指定しておきましょう。
というのも、CSSファイルがどの階層に吐き出されるかによってパスが変わり、表示すらされない場合があるためですね!
「あれ…Sassにしたら急にデザインが反映されなくなった。」とならないよう、事前に設定しておきましょう。
方法は簡単で、まずサイドバーの拡張機能から「Live Sass Compiler」を見つけ、右側にある歯車アイコンから「拡張機能の設定」をクリックします。
次に「ワークスペース」タブの「Live Sass Compile > Settings: Formats」の中の、「settings.jsonで編集」を選択しjsonファイルを編集します。
「jsonファイルとか、ちょっとキモいな」と思ったかもしれませんが、怖くないのでがんばりましょう。
最後に「”savePath”: 〇〇(デフォルトは「null」)」の「〇〇」部分を任意の場所に指定し、保存すれば完了です。
例えば、ドキュメントルート直下に配置する場合は「”savePath”: /」となります。
ドキュメントルート直下のCSSファイルに格納する場合は「”savePath” : /css」ですね!
そういえばWordPressだと、ドキュメントルートに「style.css」がないと表示されないってルールがあったね。
そうだね、だからCSSの出力先は大切なんだ。
CSSファイルがどの階層にあるかでトラブルになる可能性があるから、吐き出される場所は指定できるようになっておこう!
とはいえ、簡単に設定できるよね(笑)
ちなみに、他の項目はどんな設定ができるの?
以下の表に簡単にまとめたから、確認してみてね♪
format | コンパイル時の圧縮形式の設定 (compressed、nested、compact、expandedの4種類) |
---|---|
extensionName | CSSファイルの拡張子名の設定(.cssや.min.cssなど) |
savePath | CSSファイルの出力先をパスで設定 |
本番反映の際は、Compressedでファイル容量を軽くしよう!
本番反映でSCSSファイルをコンパイルするときは、圧縮してファイル容量が軽くなるようにしましょう!
なぜかというと、容量が軽いほうがページの表示速度が速くなり、SEO(検索エンジン最適化)的に良いから。
最近はSEOでページの読み込み速度を重視していますし、サイトがパッと表示された方がユーザー的にもノンストレスですよね♪
コンパイルでファイル容量を軽くする設定方法
容量を軽くするコンパイル方法は、「CSSの生成場所の設定」でイジイジしたjsonファイルの、「format」を「compressed」という「圧縮フォーマット」に変更するだけです。
※ Sassの導入方法によってやり方は変わるのですが、ここではVScodeの「Live Sass Compiler」の設定方法をご紹介いたします。
先程のjsonファイルを開きましょう!
「拡張機能」→「Live Sass Compilerの歯車アイコン」→「ワークスペースタブ」→「Live Sass Compile > Settings: Formatsの中のsettings.jsonで編集」でしたね!
「format」の項目を「expand」から「compressed」に書き換えましょう!
これだけで圧縮コンパイルの設定は完了です。
ファイルを圧縮した際は、「extensionName(CSSファイルの拡張子名)」も「.min.css」としてあげると親切です。
「.min.css」の「min」は「minify(縮小する = 圧縮)」の略で、制作者以外も「圧縮ファイルやね〜」と瞬時に理解できる名前だからですね。
この辺りまで気を遣えると、「優秀な制作者」の称号をもらえます。
あとはSCSSファイルを保存し、CSSファイルが圧縮されているかチェックしてみましょう!
▼以下画像のようになるはずです。
「うわっ!キモっ!読みにくっ!」と思いましたか? ※ 私は思いました。
ただ、Sassを使ってスタイルシートを作成する場合、コンパイルされたCSSファイルをいじることは基本的にありません。
なので、極論コンパイルされたCSSファイルは読めなくても良いのです。
容量が軽くなることの方がメリット的に大きいので、キモくても我慢しましょう。
ファイルの圧縮は、SEOを意識したコーディングにもなるので、たったこれだけでクライアントからも喜ばれますよ♪
また、他の制作者がCSSをイジイジする際は圧縮ファイルにしておかないと、SCSSで作られたことに気づかず、CSSファイルをイジイジしてしまう可能性も高まります。
SCSSファイルとCSSファイルの内容が不一致状態になってしまうと、メンテナンスが大変になるので注意しましょう!
とりあえず本番反映時は、「Compressed形式でコンパイルする」って頭の片隅に置いておいてね〜
ガッテン承知の助!
クライアントに喜ばれるなら、一手間入れちゃった方がいいね♪
Sassの書き方の基本を覚えよう!
Sassの書き方には「SCSS記法」と「SASS記法」があります。
主流となるのは「SCSS記法」なので、「SCSS」を中心にご紹介しますね♪
以下でご紹介する書き方の基本を覚えれば、「Sass使えます!」と声を大にしても良いでしょう。
SCSS記法の基本的な書き方
ネスト(入れ子構造)して書く
Sassを使う場合は、ネスト(入れ子構造)して書くのが基本です(ネストしないとメリット半減です)。
ネストとは、親要素の「{…}」の中に、子要素を書くイメージとなります。
その際、子要素に親要素名を記述する必要なありません。
例を見て見ましょう!
// HTML
<div class="container">
<div class="wrap1">
<p class="text">テキストテキストテキスト</p>
</div>
<div class="wrap2">
<p>テキストテキストテキスト</p>
</div>
</div>
▲上記HTMLにSCSSでスタイルを当てる場合は、
▼ 以下のようにネストして書きます。
/* SCSS */
.container {
max-width: 1200px;
margin: 0 auto;
.wrap1 {
display: flex;
.text {
color: red;
@media screen and (max-width: 575px) {
color: blue;
}
}
}
.wrap2 {
width: 33.3333%;
}
}
親要素の中にネストして書いているだけで、CSSと大きな違いはありませんね。
SCSSって難しく感じるけど、実は普通のCSSとほとんど同じだから安心してね!
ほんと簡単〜!
しかも、セレクタの記述量が激減してて最高かよ♪
複数class名や擬似要素・擬似クラスなどは「&(アンパサンド)」でくっつける
以下のように「複数のclass名」や「擬似要素」などを使う場合は、「&(アンパサンド)」をつけて記載します。
/* CSSを以下のように出力する場合 */
.container {position: relative;};
/* 擬似要素 */
.container::before {content: ""; display: block; width: 20px; height: 2px; background-color: red;
/* 複数のclass名(HTML例:<〇〇 class="container box"> */
.container.box {width: 20%;}
/* 擬似クラス */
.container.box:nth-of-type(3) {width: 40%;}
/* 擬似クラスの連結 */
.container.box:nth-of-type(3):hover {opacity: .2; transition: all .3s;}
/* 「&」をつければOK! */
.container {
position: relative;
/* 擬似要素 */
&:before {
content: "";
display: block;
width: 20px;
height: 2px;
background-color: red;
}
/* 複数のclass名(HTML例:<〇〇 class="container box"> */
&.box {
width: 20%;
/* 擬似クラス */
&:nth-of-type(3) {
width: 40%;
/* 擬似クラスの連結 */
&:hover {
opacity: .2;
transition: all .3s;
}
}
}
}
隣接セレクタ「+」や、子セレクタ「>」とかに「&」を使わないから、間違えないようにね!
変数の書き方
変数は「$変数名: 値」で定義し、プロパティの値などに「$変数名」と記述することで、出力されます。
/* SCSS */
/* 変数を定義(出力する場所より上に記述) */
$mainColor: blue;
$baseColor: white;
$mainFontSize: 15px;
$text: "sample";
.main-text {
color: $mainColor;
font-size: $mainFontSize;
.base-text {
color: $baseColor;
content: $text;
}
}
/* CSSのコンパイル結果 */
.main-text {color: blue; font-size: 15px;}
.main-text .base-text {color: white; content: "sample";}
文字も変数に入れられるんだね!
装飾とか、共通の文字を使う場合に便利そう♪
文字を変数に代入する場合は、「””(ダブルクォーテーション)」で囲う必要がある点は注意しよう!
mixinの書き方
mixinは「@mixin 関数名 (引数) { CSSのコード }」のように書いていき、使いたいところで「@include 関数名」で出力できます。(引数は省略可)
@mixinでCSSのコードを定義して、@includeで出力するイメージですね。
言葉だけではわかりにくいので、実際の記述を見てみましょう!
以下はメディアクエリのブレイクポイントを定義しています。
/* SCSS */
/* mixinを定義(出力する場所より上に記述) */
@mixin xl {
@media (max-width: 1200px) {
@content;
}
}
/* includeで呼び出す */
@include xl {
.container {
width: 100%;
}
}
/* CSSのコンパイル結果 */
@media (max-width: 1200px {.container {width: 100%;}}
mixinってなんとなくイメージつかなかったんだけど、こんな風に使うんだねぇ。
変数は「値」を格納するけど、mixinは「コード全体」を格納するイメージか♪
「@content」って何?
@contentは、後でコードを書き足すスペースを確保するためのものだ!
ちなみに@mixinは、変数と組み合わせるとさらに便利だぜ♪
僕は制作時に、メディアクエリを以下のように定義して、いつでも呼び出せるように準備してる。
/* 変数にブレイクポイントの値を代入 */
$xl: 1199px;
$lg: 991px;
$md: 767px;
$sm: 575px;
$xs: 320;
/* mixinでコードに名前(xlなど)をつけておく
@mixin xl {
@media (max-width: 1200px) {
@content;
}
}
@mixin lg {
@media (max-width: 991px) {
@content;
}
}
@mixin md {
@media (max-width: 767px) {
@content;
}
}
@mixin sm {
@media (max-width: 575px) {
@content;
}
}
@mixin xs {
@media (max-width: 320px) {
@content;
}
}
@include lg {
div {
background-color: green;
}
}
ほぇ〜!
長ったらしい「@media (max-width: 〇〇px)」を、「@include lg」みたいに簡単に書けるようにしてるのか!
そゆこと!メディアクエリって何度も書くの面倒だし、まとめておけばブレイクポイントが変わった場合のメンテナンスも楽だからね。
毎回上記のmixinを記述するだけで、違うプロジェクトでも使えて便利だよ♪
いええええぇぇぇぇぃぃぃい…!!!
mixinがあれば、爆速コーディングができそうだぜぃ!
SASSの書き方
SASSは、Sassのもう一つの記法です。
「ネストして書く」「mixinを使える」など、SCSSとほとんど変わりませんが、「{}」や「;(セミコロン)」を使わないという書き方がSASSの特徴的です。
さっそく違いを見てみましょう!
/* SCSS */
.container {
background-color: red;
div {
color: blue;
}
}
上記はSCSSですが、SASSで同じコードを書くと以下のようになります。
/* SASS */
.container
background-color: red
div
color: blue
「{}」と「;セミコロン」がないので記述量が減りますが、少し見にくいというのが本音ですね。
SASSを使うことは多くないですが、基本の書き方くらいは覚えておくと良いでしょう。
ちなみに、「:(コロン)」の後に「半角スペース」が必須です。
うん、ちょっとわかりにくいね(笑)
ネストとか変数とかmixinとか、Sassを使えるようになると超効率的なコーディングができるようになるよ♪
使い方に慣れるまで少し時間がかかりそうだけど、勉強する価値ありだね!
早めに習得することをおすすめするぜ!
思ったより難しくないしね!
知っておきたい!プロが使うSassの便利な小技集
最後に、プロの制作者が使っている「Sassの小技集」をご紹介します。
プロの制作者の使い方を真似すれば、コーディングが爆速になること間違いナシです♪
「基本の他には、どんな便利な使い方があるの?」とまだイメージがわかない方も必見です。
色の透過指定を簡略化
Sassでは、変数を使って簡単に色の透過指定ができます。
もう、RGBのカラーコードをいちいち変換しなくてOKです♪
$mainColor: #f73100;
div {
background-color: rgba($mainColor, .3);
}
▼結果
div {
background-color: rgba(247, 49, 0, .3);
}
16進数で書いても、自動でRGBに変換してくれるぜ!
パスを変数に代入しておく
変数に「パス」を代入する小技も便利ですよ♪
例えば、画像フォルダまでの階層構造が変わると、全てのパスが変更になり、修正の際に面倒ですよね?
ですが、パスの途中までを変数に代入しておけば、変数の値を1箇所変更するだけで済みます。
$imgPassRoot: "../images";
div {
background-image: url("$imgPassRoot/kv.jpg");
}
変数には色々なものを入れておけるんだね!
パスを入れるなんて、想像もしなかったわ(笑)
画像フォルダの階層が変わっても、これで安心でしょ♪
Laravelとか、フレームワークで一括管理する場合もあるから、実装する際はチームでよく相談してね!
コメントアウトをコンパイル後も残す
SCSSをCSSへコンパイルした際、「//」でのコメントアウトは消えてしまいます。
コンパイル後もコメントアウトを残したい場合は、「/*…*/」でコメントアウトをすればOKです!
// コンパイルしたら、CSSファイルには残らないコメントアウトだよ
/* コンパイル後も、CSSファイルに残るコメントアウトだよ */
意外と便利ですので、覚えておくと良いでしょう♪
職場の人に知られたくない性癖とかは、「/*…*/」で残さないようにね!
いや、「//」でも残すなよ!
関数で細かな調整ができる
Sassはデフォルトで関数が用意されています。
カラーコードが分からなくても、彩度や明度を変更する関数などもあるので、必要に応じて使ってみると良いでしょう♪
【Sassにデフォルトで用意されている関数一覧】
round() | 数値の小数点以下を四捨五入 |
---|---|
ceil() | 数値の小数点以下を切り上げ |
floor() | 数値の小数点以下を切り捨て |
rgba() | RGBA形式に変換 |
lighten() | 色の明度を上げる |
darken() | 色の明度を下げる |
saturate() | 色の彩度を上げる |
desaturate() | 色の彩度を下げる |
grayscale() | グレースケールに変換 |
mix() | 2つの色の中間色の設定 |
adjust-hue() | 色相環の角度を調整 |
▼ 使用例
/* テキストカラーの明度を下げる */
$main-color: red;
p {
color: darken($main-color, 30%);
}
▼コンパイル結果
/* テキストカラーの明度を下げる */
$main-color: red; p { color: #660000; }
上記関数を組み合わせることで、文字や背景色のグラデーション、縞模様などを表現することも可能ですよ♪
上記の関数や、条件分岐とかのプログラミングを使いこなせると、Sassマスターになれるよ!
ただ、複雑すぎる記述はみんなから煙たがられるから要注意だ(笑)
自分的に効率的なコーディングでも、周りの人が理解できないと効率的じゃないもんね。。
ちなみに、独自関数も作成できるよ!
まとめ
Sassは「コーディングを効率的に、速く書けるから愛されている」ということが伝わりましたでしょうか?
WEB制作を続けていれば、間違いなくSassを使う機会が訪れるので、今気になっているあなたはチャンスです!
「まだ経験浅いから…」なんて考えは捨てて、どんどん便利ツールを使用していきましょう!
無料ですしね。
気づいたら、コーディングが爆速になり、効率的に組める人材になっているでしょう♪