Sass

ここではSassの導入方法について詳しく学んでいきます。

SassはCSSを拡張したメタ言語のことです。CSSは入れ子構造が複雑になるとセレクタがどんどん長くなり、読む方も書く方も大変になってしまいます。そこでCSSをよりわかりやすく可読性を向上させたのがSass記法です。

Sassがどう役立つのかをまずは一緒に見ていきましょう。一般的な、CSSの書き方は以下になります。


.envader-great {
  color: red;
}

.envader-great p {
  font-size: 20px;
}

Sass記法で上記のCSSを書き換えると以下のようになります。


.envader-great {
  color: red;
  p {
    font-size: 20px;
  }
}

従来のCSSに比べるとよりすっきりと書くことができるようになりました！この短い例だとわかりにくいですが、CSSの数が増えてきて、クラス名がたくさん増えてくるとメンテナンスを行うのが大変になってしまうので、Sass記法で書かれていると後から見た人でもわかりやすく保守がしやすくなります。

初期化

ではディレクトリを新たに作成して、Sassを導入する準備をしましょう。以下のコマンドを実行してください。sassを利用するためにはnpmなどのパッケージ管理マネージャーが必要となります。


npm init -y

このコマンドを実行するとpackage.jsonが新規に作成されて、依存関係の管理を行うことができます。

今度はsassを利用するためにnode-sassをインストールします。—save-devオプションをつけると開発環境にのみ導入するという意味になります。


npm install node-sass --save-dev

すると、package.jsonに以下のようにnode-sassが追加されます。


"devDependencies": {
   "node-sass": "^7.0.0"
}

コンパイルを実行するには以下のコマンドを実行します。


npm run compile:sass

今回はSassのコンパイルについて説明しました。フロントエンド開発においてSassはよく使われるので、簡単な使い方は覚えておきましょう。

それではシナリオを起動して、演習で学んでいきましょう。

右上のゲーム感覚でコマンド練習してみるボタンを押してください。