【Sass】Sassを使いこなそう
はじめに
どうも、NNCの石上です。
前回までの内容で、Sassの基本的な知識は抑えることができました。基礎を知っておくだけでも十分にSassの恩恵は受けられますが、今回お話しする実践的なテクニックを使いこなすことができれば、より効率的にWeb制作を進めることができるはずです。僕のように、Sass無しでは作業ができなくなるでしょう。
パーシャルによるファイル分割・管理
Sassでは、特定のSassファイルを別のSassファイルにインポートすることが出来ます。この際、インポートするファイル名の先頭に「_（アンダースコア）」を付けることで、コンパイルしてもCSSファイルが生成されなくなります。この機能を指して「パーシャル」と呼びます。
下の画像を見てください。例えば、「style.scss」にreset・var・mixinというSassファイルを読み込むとしましょう（ファイル名は任意です）。通常だとscssファイルが全てコンパイルされるので合計で4つのcssファイルが生成されますが、パーシャルを用いると「style.css」のみが生成されることになります。最終的に出力されるCSSを1つに絞ることができました。
このパーシャル機能に基づいて、Sassファイルを役割に応じて分割して管理しましょう。例えば、僕の場合は以下のような感じでファイルを分割しています。
・_reset.scss：リセットCSSを記述
・_var.scss：変数を記述
・_mixin：ミックスインを記述
メンテナンスもやりやすくなりますし、読み込まなければいけないCSSのファイル数が減ってサイトの利便性向上にもつながります。
ファイルのインポート自体はとてもシンプルで、以下のように記述してあげるだけです。この際、「_var.scss」に記述されている変数を参照する場合は「ファイル名.変数名」、「mixin.scss」に記述されているミックスインを参照する場合は「@include ファイル名.ミックスイン名」という形で記述します。
// ファイルのインポート
@use 'reset.scss';
@use 'var.scss';
@use 'mixin.scss';
// 別ファイルの変数/ミックスインの参照
.partial {
color: var.$red;
@include mixin.center;
}&とBEMによるクラスの命名規則について
HTMLの要素にクラスを付与する際、どうやって名前をつけていこうか悩んだ経験はないでしょうか。代表的な命名規則がいくつかあるのですが、その中でもSassと相性が良いのが「BEM（Block-Element-Modifier：ベム）」と呼ばれる命名規則です。
BEMとは「Block・Element・Modifier」の頭文字から取った名前で、「.Block__Element_Modifier」という形式で記述します。僕の場合は、他の命名規則の考え方も取り入れてアレンジしているのでこの通りではないのですが、例えば以下のような感じで命名することが多いです。
<section class="p-about">
<div class="p-about__inner">
<h2 class="p-about__title">Title</h2>
<p class="p-about__text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</section>これをSassの基本機能である＆（アンパサンド）を用いて記述すると、このようになります。
.p-about {
&__inner {
position: relative;
}
&__title {
font-size: 24px;
padding-bottom: 10px;
border-bottom: 2px solid #333;
}
&__text {
width: 400px;
margin-top: 14px;
}
}セレクタを何度も書く手間を省けているのはもちろん、実際のHTMLの構造に即していて直感的にコードを管理することができます。
ミックスインを利用してレスポンシブ対応
レスポンシブ対応をする場合には、CSS内にメディアクエリを記述する必要があります。
従来の書き方でも間違いではありませんが、メディアクエリ用のミックスインを作成しておくことで、より効率的にコーディングを進めることができます。
「_mixin.scss」にて、Map型でブレイクポイントを定義してミックスインを作成します。max-widthの値とミックスインの名前は、それぞれ任意のものでOKです。
// ブレイクポイント
$breakpoints: (
xs: "(max-width: 320px)",
s: "(max-width: 575px)",
sp: "(max-width: 767px)",
m: "(max-width: 1000px)",
l: "(max-width: 1300px)",
);
// ミックスイン
@mixin media($breakpoint) {
@media #{map-get($breakpoints, $breakpoint)} {
@content;
}
}以上の記述が用意できたら準備完了です。実際にこのミックスインを使う場合、以下のようになります。
.test {
margin-top: 40px;
@include mixin.media(m) {
margin-top: 30px;
}
@include mixin.media(sp) {
margin-top: 20px;
}
}一つのセレクタ内でレスポンシブ対応が完結することで、管理性が抜群に良くなりました。パソコンとスマートフォンの記述を同時進行でサクサク進めることも可能です。
今回お話ししたテクニックを使いこなせれば、Sassを使ったコーディングがさらに効率化されることでしょう。他にも便利な機能が備わっているので、慣れてきたらそれらを取り入れていくのも良いでしょう。
