sassのタグが付けられている記事の一覧です。

自分用 Sass 情報まとめ(2013-03-30 現在の情報です)

Sass のアップデートでググることが何回かあったので、まとめておきます。それと、導入の方法も忘れてたので一緒に記述。あとで見て何書いてあるか思い出せるように、丁寧に書いておきます。
※Mac ユーザーなので、Ruby のインストールは割愛です、ごめんなさい。

Sass 準備

全部、Terminal での作業になります。

Ruby のバージョン確認

$ ruby -v

Ruby のアップデート

$ sudo gem update --system

Sass のインストール

$ sudo gem install sass

Sass のバージョン確認

$ sass -v

Sass のアップデート

$ sudo gem update sass

Sass 導入

sassディレクトリの準備

作業する用のディレクトリの下に、sassディレクトリを作成。ディレクトリ名は「scss」でもok。

scssファイルを作成

作成したディレクトリに、.scssファイルを作成

作業する用のディレクトリのルートへ移動

Terminal 上で、pwd(現在のディレクトリ確認)とcd(ディレクトリ移動)を駆使する

ファイルの監視を開始して完了

$ sass --watch sass:css

出力スタイルの指定

公式のドキュメント見れば事足りるけど、一応書いておきます。

元の.scssファイル

header {
    width: 100%;
    h1 {
        font-weight: bold;
    }
}

:nested

$ sass --watch sass:css --style nested

header {
  width: 100%; }
  header h1 {
    font-weight: bold; }

:expanded

$ sass --watch sass:css --style expanded

header {
  width: 100%;
}
header h1 {
  font-weight: bold;
}

:compact

$ sass --watch sass:css --style compact

header { width: 100%; }
header h1 { font-weight: bold; }

:compressed

$ sass --watch sass:css --style compressed

header{width:100%}header h1{font-weight:bold}

このくらい丁寧に書いておけば、後で読み返してもわかるはずー。