Sass のトップページを日本語でわかるようにしてみた

sass の公式ページ

Sass - Syntactically Awesome Stylesheets

後半は特にトップページに記載されていないのですが、勢いで書きました。疲れました。

Sass

Sass を使う事で再び CSS の虜になれるぜ。Sass は CSS にネスト、変数、 Mixin 等を加えたものさ。

Beauty（かっこいい）

Sass を使う事で {} やセミコロンからおさらばできるぜ。
たとえば、こんな CSS の場合

h1 {
  height: 118px;
  margin-top: 1em;
}

.tagline {
  font-size: 26px;
  text-align: right;
}

こんな風に書けるのさ（cooooool!!）
（追記）ちなみに、2スペースのインデントが重要なので Python だと思って書くと良いでしょう。

h1
  height: 118px
  margin-top: 1em

.tagline
  font-size: 26px
  text-align: right

ネスト

ネストが行えるので、セレクタの親子関係を記述できる。
こんな CSS が

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

こんな風に書けるのさ（cooooool!!）
（追記）下記の li の CSS の場合、font-hogehoge の font の部分でネストが可能。DRYですね。

table.hl
  margin: 2em 0
  td.ln
    text-align: right

li
  font:
    family: serif
    weight: bold
    size: 1.2em

変数

同じ色を何回も記述しますか？同じ高さを何回も記述しますか？ DRYじゃないですよ。
また、演算も可能ですよ。
こんな CSS は

.content_navigation {
  border-color: #3bbfce;
  color: #2bafbe;
}

.border {
  padding: 7px;
  margin: 8px;
  border-color: #3bbfce;
}

こんな風に書けるのさ（cooooool!!）
（追記） !hogehoge で変数として宣言できる。

!blue = #3bbfce
!margin = 16px

.content_navigation
  border-color = !blue
  color = !blue - #111

.border
  padding = !margin / 2
  margin = !margin / 2
  border-color = !blue

Mixin

変数よりも強力で、セレクタ全体の再利用等を可能とします。引数も使えるんだぜ！
こんな CSS は

#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

こんな風に書けるのさ（cooooool!!）
（追記） = でグループとして宣言、 + を接頭子に変えて使うよ。引数はメソッド引数とほぼ同様の感覚で使えます。

=table-scaffolding
  th
    :text-align center
    :font-weight bold
  td, th
    :padding 2px

=left(!dist)
  float: left
  margin-left = !dist

#data
  +left(10px)
  +table-scaffolding

インストール方法

sudo gem install haml

以上で、haml と一緒に sass がインストールされます。

コマンド

二種類あります。

css2sass コマンド

以下のようにする事で、既存の CSS を Sass ファイルに変換できる

css2sass style.css style.sass

css2sass オプション

Options:
    -a, --alternate                  Output using alternative Sass syntax (margin: 1px)
    -s, --stdin                      Read input from standard input instead of an input file
        --trace                      Show a full traceback on error
    -?, -h, --help                   Show this message
    -v, --version                    Print version

-a sass 構文その２へ変換する。値の設定方法を key: value から :key value の形式に変える（他にも違いはあるかも）
-s STDIN から入力
-? ヘルプ
-v バージョン

sass コマンド

以下のようにする事で、Sass ファイルを CSS ファイルへ変換できる

sass style.sass style.css

sass オプション

Options:
        --rails RAILS_DIR            Install Haml and Sass from the Gem to a Rails project
    -c, --check                      Just check syntax, don't evaluate.
    -s, --stdin                      Read input from standard input instead of an input file
        --trace                      Show a full traceback on error
    -t, --style NAME                 Output style. Can be nested (default), compact, compressed, or expanded.
    -?, -h, --help                   Show this message
    -v, --version                    Print version

--rails ~~RAIlS 使う人は自力で探して／(^o^)＼~~Rails アプリケーションから Haml/Sass を使うための初期化コードを生成する*1
-c シンタックスチェックのみ実行します
-s STDIN から入力
-t style CSS の圧縮モードを選択できます（後述）
-? ヘルプ
-v バージョン

style って？

CSS の改行等、圧縮できる部分を詰めて CSS として出力するかどうかのレベルになります。

nested(default)
compact
compressed
expanded

以下を各レベルで出力してみましょう。

!blue = #3bbfce
!margin = 16px

.content_navigation
  border-color = !blue
  color = !blue - #111

.border
  padding = !margin / 2
  margin = !margin / 2
  border-color = !blue

nested の場合

.content_navigation {
  border-color: #3bbfce;
  color: #2aaebd; }

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce; }

compact の場合

.content_navigation { border-color: #3bbfce; color: #2aaebd; }

.border { padding: 8px; margin: 8px; border-color: #3bbfce; }

compressed の場合

.content_navigation{border-color:#3bbfce;color:#2aaebd}.border{padding:8px;margin:8px;border-color:#3bbfce}

expanded の場合

.content_navigation {
  border-color: #3bbfce;
  color: #2aaebd;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

コメントについて

CSS 内のコメントとして出力される書き方と出力されない書き方がある。
なお、 -t オプションで compressed を設定していると、問答無用でコメントは省略される。

サンプル

大きく分けて二種類

// で始まる行は CSS に出力されない
/* で始まる行は CSS に出力される

こんな Sass ファイルがあった場合

!blue = #3bbfce
!margin = 16px

// この行は出力されないよ
/* これは出力される
/* これも出力される  */
/* これは出力される
  一段、インデントしておくと
  複数行のコメントになるよ
.content_navigation
  border-color = !blue
  // この行も出力されないよ
  color = !blue - #111
  /* もちろん、これは
    出力される

こんな CSS になる。ちなみに、 -t は nested を指定した。

/* これは出力される */
/* これも出力される  */ */
/* これは出力される
 * 一段、インデントしておくと
 * 複数行のコメントになるよ */
.content_navigation {
  border-color: #3bbfce;
  color: #2aaebd;
  /* もちろん、これは
   * 出力される */ }

というわけで

Sass の魅力は伝わったでしょうか。既存の CSS から Sass へのコンバーターも付いているので、移行もラクチンですね。
これは今すぐに乗り換える必要がありますよ！！！

合わせて読みたい

この saag を使うと、 sass コマンドでの変換を自動で行ってくれる*2ので、 *.sass を編集したそばから CSS ファイルが出来るので、

sass ファイル編集
HTML の確認

というフローで CSS の開発ができるようになります。非常に便利ですね！
また、saag をインストールすると、 haml も一緒にインストールされるので手間が省けますね。ガタガタ言わずいますぐインストールや！

*1:コメントで日本ハムの人に教えていただきました！！！

*2:*.sass ファイルを監視し、変更があれば sass 変換を行う

すがブロ

sugamasaoのhatenablogだよ