カテゴリー別アーカイブ: Sass

Sass でユーティリティCSSを作成してみた

Sassの第2作目ということで, CSSで汎用的に利用するスタイル (clearfix, オフレフト, 不可視化, remのフォールバック設定) や, ベンダープレフィックスの変数定義とCSS3のプロパティ一括設定, animation の keyframes の定義などのためのSasです.

  • ネスト
  • 変数と演算
  • 制御文
  • 継承
  • ミックスイン
  • ビルトイン関数 / 自作関数

など, Sassの基本的な機能はだいだい利用した感じになっています. 前回に紹介した, リセットスタイルのためのSassと合わせて, importする側のCSSはこんな感じです.

このSassをコンパルしたCSSを利用したテスページはこちらです.

SassのStyleコンパイルオプションをまとめてみた

Sass Styleコンパイルオプション
Option Description Command
Nested Sassの階層構造 (インデント) を残してコンパイル. これはデフォルトのSytleオプションでもある sass input.scss:output.css –style nested
Expanded ルールセットとプロパティを1行ずつ改行したスタイル (Dreamweaverのコードフォーマットに似ている) sass input.scss:output.css –style expanded
Compact セレクタとプロパティが1行で記述される. ルールセットごとに改行が入る. sass input.scss:output.css –style compact
Compressed いわゆる圧縮スタイル. インデントや改行, /*! で始まるコメント以外はすべて削除される sass input.scss:output.css –style compressed

Sass (Syntactically Awesome Stylesheets) のインストール (Mac OS X)

ず〜と前からやってみたい…と思いながらなかなか手をつけれずにいたSass (Syntactically Awesome Stylesheets) にようやく着手.

といっても, 今日はインストールだけで終わりましたが…

備忘録としてまとめておきます.

1. とりあえず, Rubyのバージョンを確認しておきましょう.

$ ruby -v
ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin13]

2.0系であれば問題ないそうです (1.x系ではSassのインストールで警告が出るかも…?).

2. Sassのインストール

$ sudo gem install sass

これで終了です. あとは, 余力があればどうぞ.

3. Sassのバージョン確認

$ sass -v
   Sass 3.4.9 (Selective Steve)

4. gemのアップデート

$ sudo gem update --system

gemとともに, gemのローカルパッケージに含まれるSassもアップデートされます.

5. Sassのみをアップデートする場合

$ sudo gem update sass

6. アンインストール

$ sudo gem uninstall sass

7. (レアケース ?) バージョン指定のインストール

$ sudo gem install sass -v 指定のバージョン

明日から, どんどん書いていきます.