1,117 views

この記事は最終更新から 2327日 が経過しています。

1. やりたいこと

大きなサイトを書くと、必然的にCSSも大きく複雑になる。

こんなとき…
「CSSで変数が使えたらなぁ…」
「速度のロスなくCSSの中で別のCSSをインポート出来たらなぁ…」
「似たような記述を共通関数で書けたらなぁ…」

など、普通のプログラミングと同じことが出来れば便利だなぁと思う。

同じことを考える先人たちが当然のごとく存在しており、この思いを具現化してくれていた。

それが Sass なのだそうだ。
※Syntactically Awesome Stylesheets サースと読む。

2. Sassのメカニズム

当然ながら WEBブラウザは CSSは理解できても SASSなどは全く知らない。
従って、WEBサーバーがファイルを拾いに来る場所には、CSSファイルを置いておかなければならない。

つまり…
1) Sass言語で CSSの元ネタとなるものを書く。
2) Sassプログラムで CSSファイルにコンバートする。
3) 生成された CSSファイルを WEBサーバーの見える場所に置く。

のような使い方になる。

3. やってみる

(1) Sassをインストール

Sassは Ruby上で動くプログラムなので、まずは Rubyをインストールする。
私は CentOS7を使っているので yum でインストールする。

yum install ruby ruby-devel

次にSassをインストールする。

gem install sass

Sassのバージョンを確認。

# sass -v
Ruby Sass 3.5.7

(2) 入れ子構造を書いてみる。

こんな SCSSファイルを作成した。
style.scss

div#box{
  display: inline-block;
  padding: 1rem;
  p {
    font-size: 1rem;
    padding: 0.5rem;
  }
}

このファイルを SASSで CSSに変換してみる。

sass style.scss:style.css

入れ子構造が展開されて、こんな CSSファイルが出来た。
style.css

div#box {
  display: inline-block;
  padding: 1rem;
}
div#box p {
  font-size: 1rem;
  padding: 0.5rem;
}

期待通りに出来上がっている。

(3) 他ファイルを import してみる。

こんな SCSSファイルを作成した。
style.scss

@import "child1.scss";
@import "child2.scss";

child1.scss

div#id1{
  padding: 1rem;
  p {
    line-height: 1.5rem;
  }
}

child2.scss

div#id2{
  padding: 1.2rem;
  p {
    line-height: 1.7rem;
  }
}

これらのファイルを SASSで CSSに変換してみる。

sass style.scss:style.css

こんな CSSファイルが出来た。
style.css

div#id1 {
  padding: 1rem; }
  div#id1 p {
    line-height: 1.5rem; }

div#id2 {
  padding: 1.2rem; }
  div#id2 p {
    line-height: 1.7rem; }

期待通りに出来上がっている。

ついでに (50) Node.js + gulpでcssファイルを自動圧縮 でインストールした cleancss で minify してみる。

cleancss -o ./style.css ./style.css

こんな風になった。

div#id1{padding:1rem}div#id1 p{line-height:1.5rem}div#id2{padding:1.2rem}div#id2 p{line-height:1.7rem}

(3) -t オプションで出力形式を指定する。

1) expanded

expandedオプション指定で sassコマンドを実行する。

sass -t expanded style.scss:style.css

普通のCSS形式で出力される。
手書きと同じなのでこれが一番見やすいかもしれない。
が…

目視して編集するのは SASS形式、WEBサーバーへのアップ時には minifyの後、
なので、この中間生成物的な位置づけの Sass出力ファイルのフォーマットは気にする必要がない。

div#id1 {
  padding: 1rem;
}
div#id1 p {
  line-height: 1.5rem;
}

2) compact

compactオプション指定で sassコマンドを実行する。

sass -t compact style.scss:style.css

こんな風に出力される。

div#id1 { padding: 1rem; }
div#id1 p { line-height: 1.5rem; }

3) compressed

compressedオプション指定で sassコマンドを実行する。

sass -t compressed style.scss:style.css

こんな風に出力される。
cleancssで minifyする必要がない。
これが一番実用的かもしれない。

div#id1{padding:1rem}div#id1 p{line-height:1.5rem}div#id2{padding:1.2rem}div#id2 p{line-height:1.7rem}

4) nested (default)

nestedオプション指定で sassコマンドを実行する。
-tオプションを指定しない場合のデフォルトがこれだ。

sass -t nested style.scss:style.css

こんな風に出力される。

div#id1 {
  padding: 1rem; }
  div#id1 p {
    line-height: 1.5rem; }

本投稿がてんこ盛りになってしまいそうなので、この他の Sassの使い方は次回投稿以降で書くことにする。

---