SASSを５分で理解&導入する【for Mac】

対象

• HTML/CSSをそれなりに理解して書けるようになった人。
• それなりの規模のWebサービスのCSSを書いた経験がある人。

SASS（サス）とは？

SASSとは「Syntactically Awesome Style sheets（文法的にイケてるスタイルシート）」の略で、CSSをより効率的・構造的に書けるように生まれたものです。（変数や関数を活用しながら、CSSが書けます。）

SASSをコンパイルすることで、CSSが生成され、そのCSSがHTMLから読み込まれます。

SASSをインストールしよう

SASSをインストールするためには、Rubyがインストールされてることが前提ですが、Macではデフォルトでインストールされているため、SASSをインストールするところから始めます。

sudo gem install sass

これだけ。

SASSを書いてみよう

SASSには二つの記法があります。

SASS記法
SASS記法はインデントで、要素名・クラス名を構造化します。
divの中のpタグはpadding: 0 0 0 10px、さらにそのpタグの中のspanタグはfont-size: 2emという書き方。

div
  background-color: lightgray
  margin: 0 auto
  p
    padding: 0 0 0 10px
    span
      font-size: 2em

SCSS記法
SASS記法に対して、SCSS記法は中括弧によって、要素/クラスのスコープを定義します。

div{
  background-color: lightgray;
  margin: 0 auto;
  p{
    padding:  0 0 0 10px;
    span{
      font-size: 2em;
    }
  }
}

上記をSASSコマンドでコンパイルすると以下のようになります。

div {
  background-color: lightgray;
  margin: 0 auto;
}
div p {
  padding:  0 0 0 10px;
}
div p span {
  font-size: 2em;
}

普通にCSSを書くと、divとかpとか何度も書くのが手間ですよね。
SASS、SCSSでは構造的に書けるので、同じ要素名、クラス名を書く必要が無くなります。

コンパイルしてCSSを生成しよう

基本形はこんな感じ

sass [INPUT]:[OUTPUT]

実際には、

sass style.sass:style.css

style.sassをコンパイルして、style.cssを生成します。
また、[INPUT]の前にオプションをつけることができ、そのオプションによって、生成されるCSSのフォーマットが変わってきます。詳しくはこちらから。

.sass/.scssを修正するたびに、いちいちSASSコマンドでコンパイルするのがめんどくさい人たちは、

sass --watch style.sass:style.css

としておけば、修正して保存するとそれを検知してくれて、自動でコンパイルしてくれます。

よいSASSライフを。