タグ別アーカイブ: scss

CSS拡張メタ言語について学ぶ~その3~

コメントをどうぞ

前々回：CSS拡張メタ言語について学ぶ~その1~
前回：CSS拡張メタ言語について学ぶ~その2~
でCSS拡張メタ言語がどのようなものかについて書きました。
今回は実際に使ってみましょう。

インストール

sass(scss)を例に紹介していきます。
インストールするにあたってRubyが必要です。
windowsの方は事前にインストールが必要です。

以下のコマンドを実行してインストール

sudo gem install sass

インストールが終わったら以下のコマンドを実行

sass -v

バージョンが表示されればOKです。

使ってみる

『style.scss』という名前でファイルを作成し、下記を記述。

/* style.scss */
$color:#ffffff;
$fontsize:16px;

body{
    color: $color;
    font-size: $fontsize;
}

scssからcssに変換(コンパイル)してみましょう。
ターミナル(windowsはコマンドプロンプト)のcdコマンドで.scssファイルがある場所まで移動します。
以下のコマンドで、style.scssからstyle.cssを出力することができます。

sass --style expanded style.scss:style.css

これで、style.scssからstyle.cssを生成することができます。

/* style.css */
body {
  color: #ffffff;
  font-size: 16px;
}

『–style expanded』オプションをつけるとインデントを整えてくれるので便利です。

コマンドいろいろ

先ほど紹介した『–style expanded』の他にも便利なコマンドがあります。

スタイルの指定方法

  • scssファイル
/*style.scss*/
li{
    border-bottom: 1px solid #eee;

    a{
        display: block;
        padding: 10px;
        background-color: #fff;

        ＆:hover{
            background-color: #aaa;
        }

    }

    span{
        font-size: 14px;
        color: #333;
    }

}
  • sass style.scss:style.css –style nested
/* style.css */
li {
  border-bottom: 1px solid #eee; }
  li a {
    display: block;
    padding: 10px;
    background-color: #fff; }
    li a:hover {
      background-color: #aaa; }
  li span {
    font-size: 14px;
    color: #333; }
  • sass style.scss:style.css –style expanded 
/* style.css */
li {
  border-bottom: 1px solid #eee;
}
li a {
  display: block;
  padding: 10px;
  background-color: #fff;
}
li a:hover {
  background-color: #aaa;
}
li span {
  font-size: 14px;
  color: #333;
}
  • sass style.scss:style.css –style compact
/* style.css */
li { border-bottom: 1px solid #eee; }
li a { display: block; padding: 10px; background-color: #fff; }
li a:hover { background-color: #aaa; }
li span { font-size: 14px; color: #333; }
  • sass style.scss:style.css –style compressed
/* style.css */
li{border-bottom:1px solid #eee}li a{display:block;padding:10px;background-color:#fff}li a:hover{background-color:#aaa}li span{font-size:14px;color:#333}

SCSSファイルの更新を監視する

sass --style expanded --watch style.scss:style.css

style.scssに何か変更を加えて保存すると、自動でcssフォルダの中にあるstyle.cssに、変更が反映されます。

最後に

フレームワークとGUIもあるので紹介します。

フレームワーク(Compass)

Compassは、sassを拡張したオープンソースのフレームワークです
sassをより使いやすく便利にしたのがCompassになります。

Compassのメリット

  • CSSスプライトが簡単に作成できる
    Compassでは、フォルダに配置するだけで、CSSスプライトで記載された一枚画像が簡単に作れます。CSSスプライトを利用すれば、1ページ辺りの画像の読み込みを何度も実行せずにすむため、ページの高速化につながります。

  • 独自のmixinが利用できる
    グラデーションやベンダープレフィックスを自動で付与してくれる機能があります。

  • 独自の関数が利用できる
    画像のサイズを取得したり、三角関数の計算をしたりできる関数があります。

インストール

以下のコマンドを実行

sudo gem install compass

GUI

CodeKit（Mac）

Sassだけに限らず、Less、Sass、Stylus、Jade、Haml、Slim、CoffeeScript、Javascript、Compassと多種多様なメタ言語を自動コンパイルしてくれる優れもの。他にもlive reload（ファイルをセーブされるたびにブラウザを自動的にリロードする）やjsLint（JavaScriptの文法チェック）など

Hammer（Mac）

Sass、CoffeeScript、HAML、Markdownなど、多彩なコンパイラを持ちながら、HTMLのインポート、画像プレースホルダ、変数の使用など

Scout（Win＆Mac）

WindowsとMacのどっちでも動くフリーソフト。

Prepros（Win＆Mac）

WindowsとMacのどっちでも動くフリーソフト。

Koala（Win＆Mac＆Linux＆Ubuntu）

さまざまなプラットフォームで動くプリプロセッサです。Less、Sass、Compass、CoffeeScriptをサポートしています。

Compass.app

Compassの公式のアプリです。