Sassって何？Sassを使って効率的にコーディングしよう!【Sass入門編】

早速ですがみなさん、Sass使ってますか？
もちろん私はSass使ってます。Sass歴は6年ぐらいです。
最初は環境の準備が面倒だしCSSでも問題ないと思っていましたが使ってみると良いことづくし！
もうCSSには戻れません(笑)

・CSSはある程度勉強したから次のSTEPへ進みたいと思っている方
・Sassって聞いたことあるけどよく分からない方
・Sassのメリットがよく分からない方

今回はこれらの方がSassを使いこなせるようになるための解説をしたいと思います。

そもそもSassて何？

Sass(サス)とは「Syntactically Awesome StyleSheet」の略で日本語にすると「構文的に素晴らしいスタイルシート」という意味になります。
よくSassはCSSのメタ言語と言われますが、簡単に説明すると「CSSをさらに拡張して、より効率的に書けるようにした」ものです。

またSassには「.sass」と「.scss」の2つの拡張子がありますがよく使われている拡張子は「.scss」になります。
この「.scss」の形式だとCSSと同じように記述できるため、Sass未経験の方でも気軽にチャレンジできます。

Sassのメリット・デメリット

まずはSassを導入する際のメリットとデメリットをご紹介していきます。

簡単に3つほど上げましたが、他にもメリットはいっぱいあります。
私は普段「BEM記法」というCSS設計手法を採用しています。
このBEM記法とSassの相性がとても良いのもSassを使用する理由のひとつです。

このように便利な反面デメリットもありますがルールやマニュアルを作ることでこれらは解決できると私は考えています。
恐れずに挑戦してみましょう！

Sassの利用環境の準備をしょう！

まず前提としてSassは直接ファイルを読み込んでもブラウザで確認ができません。
確認するためにはSassをCSSにコンパイルする必要があります。(コンパイルというのはSassをCSSは変換することです。)
コンパイルの方法はいくつかありますが今回は「Visual Studio Code」の拡張機能を使用する方法を紹介します。

Visual Studio Codeは人気のエディタになりますので使ったことがない方はぜひ使ってみてください。
Visual Studio Codeのインストール方法は下記の記事で詳しく解説してます。

Live Sass Compilerのインストール

Visual Studio Codeを開くと下記のような画面が表示されます。

画面の左側の赤枠で囲っているアイコンをクリックすると拡張のメニューが表示されます。

検索ボックスが出てくるので①の赤枠部分に「Live Sass Compiler」と入力してください。
検索結果一覧に「Live Sass Compiler」が表示されるので②の赤枠部分を選択し、③の「Install」ボタンをクリックしてください。
これで「Live Sass Compiler」のインストールは完了です。

Live Sass Compilerの使い方

まず、PCの任意の箇所にCSSフォルダーを作成してください。(デスクトップとかで大丈夫です)

CSSフォルダーの作成が終わったら左メニューの①のアイコンをクリックします。
②の「フォルダーを開く」を押して先程作成したCSSフォルダーを選んでください。

CSSフォルダーが開けたら①のアイコンをクリックしてください。
新規ファイルが作成できるので②の赤枠部分に「style.scss」と入力しstyle.scssファイルを作成します。

style.scssファイルが作成できたらクリックして開いてください。
試しにコードを入力してみましょう！今回は下記のコードを入力してみます。

header {
  h1 {
    font-size: 20px;
  }
}

上記のコード入力後、画面の右下にある「Watch Sass」をクリックします。
「Watching…」と表示されていればOKです。

無事にコンパイルされると「style.css」と「style.css.map」が作成されます。
「style.css」を開くとCSSにコードが変換されているのが確認できます。
これでSassの利用環境が準備できました。実際に色々なコードを試してみましょう！

ネストを使ってみよう！

ここまでだいぶ解説が長くなってしまいましたが今からはSassの便利な機能をサンプルコードも交えて解説していきます。

まずネスト(入れ子)についてです。先程のコードを記載しているのでなんとなく理解できているかもしれませんが、Sassではセレクタの中にさらにセレクタを書くことができます。

style.scss

header {
  h1 {
    font-size: 20px;
  }
  ul {
    margin-top: 20px;
    li {
      font-size: 14px;
      a {
        display: block;
      }
    }
  }
}

style.css（コンパイル後のCSS）

header h1 {
  font-size: 20px;
}

header ul {
  margin-top: 20px;
}

header ul li {
  font-size: 14px;
}

header ul li a {
  display: block;
}

CSSの場合は「header ul li a」のように親セレクタの記載が面倒くさいですがSassでは毎回「header」など書かなくてすむので記述量が少なく書けます。

またプロパティも同じようにネストすることができます。

style.scss

.box {
  margin: {
    top: 10px;
    right: 20px;
    left: 30px;
    bottom: 40px;
  }
  background: {
    image: url('image/bg.jpg');
    repeat: no-repeat;
    size: cover;
  }
}

style.css（コンパイル後のCSS）

.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-left: 30px;
  margin-bottom: 40px;
  background-image: url("image/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

親セレクタの継承 & (アンパサンド)

ネストを使っていると、さらに親セレクタからスタイルを指定したい場合もあります。
例えば特定のページのみ横幅を広げたい場合、CSSでは次のように書きます。

CSS

.box {
  width: 100px;
}

body.wide .box {
  width: 200px;
}

これをSassのネストでする場合は下記のようになります。

style.css（コンパイル後のCSS）

.box {
  width: 100px;
  body.wide & {
    width: 200px;
  }
}

このようにセレクタの後に「&」を書くと親セレクタを参照できます。
また親セレクタの参照は疑似クラスの前に書けるので「:hover」や「:before」使いたい時も「&」を使います。

style.scss

a {
  &:hover {
    opacity: .1;
  }
  &:before {
    content: 'LINK';
  }
}

style.css（コンパイル後のCSS）

a:hover {
  opacity: .1;
}

a:before {
  content: 'LINK';
}

コメントを使ってみよう！

Sassではコンパイル時に削除されるコメントと通常のコメントがあります。
削除されるコメントは「//」でコメントを残したい場合は「/* */」を使います。

style.scss

.box {
  // width: 100px;
  height: 500px;
  padding: 20px;
  /*display: flex;
  margin-top: 50px;*/
}

style.css（コンパイル後のCSS）

.box {
  height: 500px;
  padding: 20px;
  /*display: flex;
  margin-top: 50px;*/
}

変数を使ってみよう！

変数と聞くとプログラムっぽくで軽くアレルギーがでる方もいるかもしれませんが、この変数を使うとかなり便利になるのであまり構えず進めていきましょう。

例えばCSSで色の指定をしますがこの色の指定って何回も出てきませんか？
サイトのカラーが赤だった場合、テキストの色や背景の色など何度も同じカラーコードを指定することがあります。
変数とはあらかじめ好きな名前(変数名)を決めて値を代入することで、色んな場所でこの変数を呼び出すことができます。

style.scss

$main-color: #f00;

.box {
  color: $main-color;
}

.btn {
  background-color: $main-color;
}

変数は「$」の後に変数名を指定し「:」の後に値を入力します。

style.css（コンパイル後のCSS）

.box {
  color: #f00;
}

.btn {
  background-color: #f00;
}

変数の箇所が値に置き換わりました。
これでメインカラーが変更になった場合、変数の値のみを変えれば指定している全ての色が変更されます。
CSSでよく使う値は変数に定義しておくと便利ですね！

まとめ

Sass入門編、いかがだったでしょうか？

少し難しく感じた方もいるかもしれませんが使っているうちに便利さが分かってくると思うので
ぜひチャレンジしてみてください。

Sassを使って効率的にコーディングしよう!【Sass中級編】 を書きました。