Sass(SCSS)って本当に便利？実際に使ってみた感想

Sassとは

Sass は Cascading Style Sheets (CSS)で解釈される2種類の構文で構成されたスクリプト言語であり、SassScript はスクリプト言語自体を示す。 はじめにできた「インデント構文」では、Hamlと同様にコードブロックや改行コードを分離する際に字下げを活用している。単にSassと言ったらインデント構文のことを指す場合も多い。新しい構文である「SCSS」は、CSSのようなブロックの書式を使用し、ブロック内の別々の行にブロックとセミコロンを示すため波括弧を用いている。

Wikipediaより引用

SASS記法

div
  background-color: blue
  margin: 0 auto
  p
    padding: 10px
    margin:  10px
    span
      font-size: 1em
      color: red

SCSS記法

div{
  background-color: blue;
  margin: 0 auto;
  p{
    padding: 10px;
    margin:  10px
    span{
      font-size: 1em;
      color: red;
    }
  }
}

上記を見てどんな違いがあるか分かったでしょうか？

どちらもネストしてスタイルを書ける点は同じです。

Sassではインデントを使用してスタイルを書いていきます。
PythonとかRubyを書いてる人にとっては馴染みのある書き方だと思います。

括弧がない分スッキリと書けるのが特徴です。

SCSSでは括弧を使用してスタイルを書いていきます。

SCSSではCSSの記法でも書けるのでコーディングがしやすいのが特徴です。
間違いも少なくなりそうなので最初はSCSS記法で書くのをオススメします。

僕も普段はSCSSで書いています。非常に使いやすいです。

メリット＆デメリット

メリット

Sassのメリットですが、何といってもコーディングが早くなる点だと思います。
ネストさせてスタイルを書けるのでサクサクと書いていけます。

デメリット

これといってデメリットは浮かばなかったのですが
強いて言うなら環境構築をしなければならないという点ですね。

Sassはそのままでは使用できないのでCSSの形にコンパイルする必要があります。
その手間がデメリットなのかなといった印象です。

とは言ってもSassファイルを監視してファイル保存時に自動的にコンパイルしてくれる
コマンドもあるのであまり気にならないかなといった感じです。笑

Sassの導入方法

Sassを使用するためには以下の2つが必要になります。

1. Rubyのインストール
2. Sassのインストール

ちなみにMacの場合はRubyは標準搭載されているのでインストールの必要はありません。

Rubyインストール

Rubyインストーラ

こちらのサイトよりインストーラをインストールします。
64bitのPCを使ってる人は(x64)の表記があるものをインストールしましょう。

「インストール先とオプションの指定」が表示されたら
Rubyの実行ファイルへ環境変数PATHを指定する にチェックを入れましょう。

これをやらないと後々環境変数にRubyのPATHを通すという作業を自分でやる事になります。
地味にめんどくさいのでチェックを入れるのを忘れずに。

Sassインストール

Sassのインストールは簡単です。

コマンドプロンプトを開いて「gem install sass」を入力してEnter。

これでSassのインストールは完了です。

最後に

今回はSassがどういったものなのか、導入方法について紹介しました。

次回は使い方の記事を書こうと思います。

僕も最近になってSass(SCSS)を使うようになったのですが
本当に便利です。
最初に環境構築をするのが面倒なとこですが、逆に言えばそれさえやってしまえばいいわけですし。

明らかにコーディングの効率が上がったので是非使ってない方は導入してみることをオススメします。