プラカンブログSTAFF BLOG

2017.05.10

そろそろ始めよう!Sassを味方につける【基本編】

どうも、ティッシュ消費率プラカン上位組のKIKUCHIです。へっくしょん。
みなさん、Sassはご存知ですか?「Sass(サス)」です。巷では「爆速でコーディングが出来る!」などと言われているメタ言語です。
知っている人は知っているSassですが、まだ導入に踏み切れていない人も多いのではないかと思い、基本から導入・運用面について記事にしたいと思います。
今回は【基本編】からいきます!
 
ちなみに、この記事は下記の書籍を参考に書かせていただいております。(とっても分かりやすいのでオススメです)

Sassって何?おいしいの?

まず、Sassとは?についてですが、「Syntactically Awesome Stylesheets」の略語で、日本語に訳すと「構文的にイケてるスタイルシート」という意味になります。
ざっくりいうと、CSSをより便利効率的に書けるようにパワーアップさせた言語です。
 
「構文的にイケてるスタイルシート」ということで、既存のCSSとは構文が異なっているため、CSSファイルにはSassを記述出来ません。
そのため、Sassの場合「.scss」という専用の拡張子のファイルに記述していき、最終的に「.css」にコンパイルする必要があります。
 
~コンパイルとは~
「変換」という意味で、Sassの場合、SassファイルをCSSファイルに変換することを「コンパイルする」といいます。
ここでポイント!
Sassには2つの記法があります。
最初に作られたのが「SASS記法」で拡張子が「.sass」
後から作られたのが「SCSS記法」で拡張子が「.scss」
 
SASS記法は非常に簡素化された記法で、通常のCSSと互換性がなく書式も異なっていたため広く普及しませんでした。そのため、CSSと互換性を高めたSCSS記法が作られ、現在「Sass」=「SCSS記法」が一般的になっており、Sassの公式サイト(http://sass-lang.com/)でもSCSS記法のサンプルがデフォルト表示になっています。
 
【SASS記法】
ul
  margin: 0 auto;
    li
      color: #00aa22;
【SCSS記法】
ul{
    margin: 0 auto;
    li{
        color: #00aa22;
    }
}

なにが出来るの?どれほど便利なの?

ん?あぁ、便利なのね、はいはい。で?何が出来るの?
ということで、様々な機能がある中であなたに出会えてヨカッターーー!と思う私的Sassの便利な機能を4つご紹介します。

1. 記述の簡略化ができる…ネスト(入れ子)

親子関係にあるセレクタを入れ子(ネスト)にして書くことができます。
例えば、下記のようなHTMLがあったとします。
【HTML】
<div id="main">
  <section>
    <h1>タイトル</h1>
    <p>ダミーテキスト</p>
    <p class="notes">注意書き</p>
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
    </ul>
  </section>
  <section>
    <h1>タイトル</h1>
    <p>ダミーテキスト</p>
  </section>
</div>
【CSS】
普通にCSSを記述した場合、下記のように書くと思います。
#main{
    width: 700px;
    margin: 0 auto;
}
#main section h1{
    font-size: 140%;
}
#main section p, #main section ul{
    margin-bottom: 30px;
}
#main section .notes{
    color: #00aa22;
}
【Sass】
Sassの場合、CSSと比べると「#main section」を何度も書かなくてすむ上に、HTMLのツリー構造が把握できセレクタが特定しやすくなります。
例えば「section」を「article」に変更する場合、Sassだと一箇所だけ変更すればOK!といったところが、作業効率・メンテナンス性に優れていると言えるでしょう。
#main{
    width: 700px;
    margin: 0 auto;
    section{
        h1{
            font-size: 140%;
        }
        p, ul{
            margin-bottom: 30px;
        }
        .notes{
            color: #00aa22;
        }
    }
}

※階層を深くしすぎると可読性が落ちるため、バランスをみながら対応しましょう。

2. 変数を使用して同じ値を使いまわせる

なんということでしょう~(某番組のアナウンス風)変数が使用出来ることでメンテナンス性が一気に上がったではありませんか~!(個人の感想)
【CSS】
下記のように、サイトのメインカラー等よく使用する色は、複数の場所で指定することが多いと思います。
色が覚えにくい値だと毎回コピーする手間があったり、色の変更が起きた場合は記述している全ての箇所を修正しなければならなかったり…面倒くさいですね。
.title-main{
    color: #00aa22;
}

.block{
    padding: 20px;
    border: 1px solid #00aa22;
}
【Sass】
変数を使うことで、同じ値を好きな場所で参照でき、色の変更があった場合は一箇所を変えるだけで全てに反映されるので、とっっっっても便利です!
/* $変数名 : 値 ; */
$main-color: #00aa22;

/* 参照したい場所に $変数名 を記述 */
.title-main{
    color: $main-color;
}

.block{
    padding: 20px;
    border: 1px solid $main-color;
}

3. 四則演算ができる

CSSを書いていると、paddingやmarginの値を計算する場面があると思います。暗算したりノートの隅っこに計算式を書いたり…なんてことをしないでももう大丈夫。Sassで計算、出来ますよ。
【Sass】
// 足し算
.block01{
    width: 600px + 5;
}

// 引き算
.block02{
    width: 600px - 5;
}

// 掛け算
.block03{
    width: 600px * 5;
}

// 割り算
.block04{
    width: (600px / 5);
}
【CSS:コンパイル後】
.block01{
    width: 605px;
}
.block02{
    width: 595px;
}
.block03{
    width: 3000px;
}
.block04{
    width: 120px;
}
ここでポイント!
上記でさり気なく使用しましたが、Sassでは「//(スラッシュ2つ)」の後の行がコメントとみなされ、コンパイル後のCSSでは削除されます。CSSで定番のコメント「/**/」も当然使えますが、こちらはコンパイル後も書き出されて残ります。
CSSファイルには不要だけどコーディング上のメモとして残しておきたいコメント等は「//」の後に記述するようにしています。

4. @extendで一度使ったセレクタを使いまわせる

「@extend」という機能を使用することで、一度記述したセレクタのスタイルを別のセレクタでも使うことができ、同じスタイルを何度も書く手間が省けます。
【Sass】
例として下記のようなスタイルがあるとします。
「.panel」は「.box」とほぼ同じスタイルを指定したい…けどボーダーの色だけは変えたい!なんて時の書き方をしてみます。
さっそく変数も使っちゃってSassの虜になっておりますね。うふふ。
.box{
    color: #000;
    padding: 20px;
    border: 1px solid #ccc;
}

// .boxのスタイルを継承しつつ、.panelのボーダーカラーを指定
.panel{
    @extend .box;
    border-color: $main-color;
}
【CSS:コンパイル後】
コンパイルしたら下記のようにCSSはグループ化され、それぞれにスタイルを記述するよりもギュッとコンパクトになります。
.box, .panel{
    color: #000;
    padding: 20px;
    border: 1px solid #ccc;
}
.panel{
    border-color: #00aa22;
}

最後に

いかがでしたか?
たった4つだけの紹介ですが、すでに「便利だな~Sass使いたいな~」という気持ちになったのではないでしょうか?なってくださいお願いします。
もちろん、他にも様々な便利機能はありますが、Sassを始めよう!と思えるきっかけをお伝えできていたら嬉しいです。
 
そもそもSassを使う一番の目的は、作業効率、メンテナス性の向上のためです。
前回の私の記事で「もう後悔したくない!CSSの設計概念を知りメンテナンス性を高めよう」という内容を書きましたが、実はこの記事の続き的な感じでこのSassの記事を書いております。
作業の仕方は人それぞれだと思いますが、便利で効率的な機能は積極的に取り入れて生産性を高めていけたら良いですね。
 
そんな次回は「そろそろ始めよう!Sassを味方につける【導入編】」です。

 

+dc(菊)

この記事は、KIKUCHI が書きました。
Webデザイナー募集中
Webデザイナー募集中(東京)ただいま東京事務所ではウェブデザイナーを募集しています!詳しくはこちらをご参照ください。