Sass入門コース（初心者向け）CSSを効率よく書こう

Sassは覚えてしまえば、効率的にCSSを作ることができますが、新しい記法を覚える必要がある為、少々学習コストがかかってしまいます。小規模のWebサイト作成などであればCSSで十分とも言えますが、長い目で見てCSSコーディングを行ない続けるようであれば今後のコーディングを効率よく行えるので学習する価値が十分にあります。まずはCSSとの違いや具体的な記述の仕方について以下で解説していきます。

Sassとは、Syntactically Awesome StyleSheetの略で直訳すると「構文的に素晴らしいスタイルシート」です。その言葉通りCSSコーディングをスピーディに記述することができ、修正が楽になります。

Sassはメタ言語というある言語に新しいルールを定義するために使われる言語です。一方で拡張言語とも呼ばれています。

Sassが登場してからの初期は、Sass記法と呼ばれるCSSとは異なった独自の記法を採用していましたが、バージョン3.0以降にCSSの拡張言語であるSCSS記法が新たに導入されました。

SCSS記法の場合、ベースがCSSとなる為CSSをコピぺしても動いてくれます。少しややこしいですが、最初に作られたのがSass記法で、今一般的に普及しているのはSCSS記法になります。Sassという言語の中にSass記法とSCSS記法があるという事です。インターネット上などでよく表記されているSass（SCSS）とはSass言語のSCSS記法のことです。

この2つは両方とも入れ子（ネスト構造）で記述できるという部分は同じですが、SCSSはCSSと同様「波括弧{}」を使って記述することに対して、Sass記法は「波括弧{}」と「セミコロン；」を省略した簡素的な記述方式になっています。

Sassを導入するには、Ruby、Sass、コンパイラ3つのインストールが必要になります。Sassファイルはそのままだとブラウザが認識できない為、Sassファイルをコンパイラを使ってCSSに変換します。

Sassでコンパイルを行なうには、Rubyをインストールする必要があります。Rubyはインストールするだけで、Ruby知識は必要ないので安心してください。また、Macであれば標準でRubyが入っているのでインストールは不要です。

Windowsの場合はインストールが必要になるのでまだRubyが入っていない場合はRubyの公式サイトからインストールしましょう。

最後にCUIを使って「ruby -v」コマンドを実行し、無事にインストールが出来ているか確認しておきましょう。バージョン情報が表示されればインストールができています。

次にSassをインストールします。SassのインストールはCUIのみでしか出来ません。Macの場合はターミナルから、Windowsの場合はコマンドプロンプトを開いてインストールのコマンドを打ちこんでいきます。インストールするにはgemコマンド「sudo gem install sass」を実行しましょう。実行後パスワードを要求されるのでPCに設定しているパスワードを打ち込みましょう。

Rubyと同様最後に「sass -v」コマンドでインストールが出来ているか確認してください。

コンパイラのインストール方法はいくつかありますが、今回は初心者に多い無料エディタ「VSCode」を使ったコンパイラの導入方法について解説します。VSCodeが開けたら拡張機能「Live Sass Compiler」をインストールします。インストールが確認できたらこれでSassを使用するための前準備は完了です。

Live Sass Compilerを使ってコンパイルをするには、コードエディタの下部にある「Watch Sass」をクリックします。クリックすると監視状態となり、監視中は「Watching…」と表示されます。監視を終了する場合はもう一度クリックします。一回目のクリックで監視が開始されるとすぐにCSSファイルが作成され、監視中はSassファイルを保存する度に自動でコンパイルしてくれます。

デフォルト設定では、コンパイルされたファイルはSassファイルと同階層のディレクトリに生成されます。但しCSSファイルはCSSフォルダ内で保管した方がいいと思うので、必要に応じてファイルを移動させましょう。

Sassには、導入するべき価値のあるメリットがいくつかあります。具体的にどのようなメリットがあるのかをここで解説していきます。

Sassを導入すれば、CSSを入れ子（ネスト構造）で記述することができます。入れ子構造を用いることで、親要素と子要素の関係性が理解しやすくなるため、可読性が一気に向上します。実際には以下のように記述します。

▼ Sass(SCSS) ▼

div {
  display: inline;
  width: 100%;
  height: 100%;

  h2 {
    margin-right: auto;
  }
  h3 {
    margin-left: auto;
  }
}

このようにdivの中にh2とh3をネストで書くことができます。通常のCSSの場合は「div h2{}」というように書いていた分が非常にシンプルにまとめることができます。Sassはこの点にメリットを感じる方が多いです。

アンパサンドとは、「&」の記号のことで、Sassではこのアンパサンドが非常に役立ちます。アンパサンドには様々な使い方がありますが、基本的な使い方さえマスターしてしまえばそれだけでも非常に効率的です。アンパサンドはセレクタの親要素を取得することができます。hoverなどの疑似クラスを使う際などにとても便利な機能です。

Sassでは、変数を使って共通の値を使いまわすことができます。Webサイト上で共通の色を使いたい場合、通常のCSSではその都度で色の指定を行なう必要があります。しかしSassを使う事で「共通の値」を変数に入れて使いまわすことができます。

通常、変数の定義はファイルの上部で行ない、「$favorite_color: #000」のように定義します。そしてこの定義した変数を使用するには「color: $favorite_color;」というようにプロパティの値部分に変数を記述します。そうすることでコンパイルされたタイミングに変数が変数値に置き換わります。繰り返し使用するスタイルやメディアクエリの設定などで非常に役立つ機能になります。また、変更や追加などの修正が合った際にも迅速に対応ができるようになります。

四則演算とは、算術計算の中で最も基本的な4つの計算法である足し算、引き算、掛け算、割り算のことです。以下のように使用することができます。

▼ Sass(SCSS) ▼

div {
  display: inline;
  width: 200 / 5 + 5 * 10;
}

こちらではSassの導入方法や導入メリットについて解説しました。冒頭で書いていた通り、Sassは少々学習コストがかかってしまいますが、一度覚えてしまえばコスト以上のメリットが得られます。早いうちから慣れておくことで、効率的なWeb制作を行なうことができるので是非無料問題集にチャレンジしてスキルを身に着けていきましょう。