はじめに

Sassとは、Syntactically Awesome Style Sheet の略であり、構文的に凄いスタイルシートということになる。

SassはいわゆるCSSのメタ言語であり、コンパイラによってCSSに変換される。つまり、結局はCSSになるわけだが、シンタックスシュガーによって、非常に効率的・合理的に記述できるのが特徴である。

~ 参考リンク ~

四則演算や関数

Sassリファレンス

Compassリファレンス

Sass config.rb 設定項目

 

Rubyをインストール

Sassでは、その構文を通常のCSSにコンパイルする。そのSassコンパイラーにRubyを使用するため、Rubyのインストールが必要となる。

  • http://rubyinstaller.org/downloads/ から最新版のインストーラーをダウンロード ※OSが64bitの場合は、x64をダウンロード
  • インストーラーを実行
  • 「Rubyの実行ファイルへ環境PATHを設定する」にチェック
  • インストールが完了後、コマンドプロンプトなどのコンソールから「ruby –version」と打ってみて、Rubyのバージョンが表示されればOK。
  • ※Gemコマンドが使えないSSL証明書エラーを修正 ※ここを参照
  • 新しい(正しい)SSLクライアント証明書を取得
  • 指定場所にその証明書を設置
  • gem が使えるようになる
  • Rubyの外部エンコーディングをUTF-8に設定

※Windows上でのSass開発の場合、これを行わないと全てのSassファイルの冒頭に「@charset “UTF-8”;」を記入しなければならず面倒

 

  • 一時的な設定
    • Ruby関係ツールを使用する前に「set RUBYOPT=-EUTF-8」というコマンドを発行 ※コマンドプロンプトの場合
  • 恒常的な設定
    • 「システムのプロパティ→詳細設定→環境変数」から「RUBYOPT=-EUTF-8」を設定する
  • MinGW等のUNIXエミュレータでの設定
    • .bash_profile などに「export RUBYOPT=-EUTF-8」を追加
    • 「. ~/.bash_profile」で変更を読み込む

 

Sassをインストール

  • コンソールから「gem install sass」と打つ
  • しばらく待てばインストール完了

 

3.GUIのSass等コンパイルソフト「Koala」をインストール

※後述の「Compass」がインストール済みであり、尚且つCUIで良いならばGUIツールの「Koala」を別途インストールする必要はない。

 

  • http://koala-app.com/ からダウンロード
  • インストーラーを実行し任意の場所にインストール
  • インストール後に起動して初期設定する
    • Compassを使う場合には、歯車アイコンの設定メニューから「Sass → compass」にチェック
    • つづいて「General → Language」から日本語に設定

 

4.開発環境セットアップ

Eclipse上でSassエディタなどを使えるようにする。

 

「Aptana Studio」をインストール

  • 「Eclipse→ヘルプ→新規ソフトウェアのインストール」を進む
  • http://download.aptana.com/studio3/plugin/install を作業対象に入力し追加をクリック
  • 「Aptana Studio 3 Plugin」を選択しプラグインをインストールする
  • Eclipseを再起動
  • 再起動後はGitサポートを自動的に構成する旨のメッセージが表示されるのでOKする

 

「Aptana Studio」の設定

※ http://www.system-act.com/eclipse/aptana.html を参考

  • Eclipseのテーマに少し問題有り、設定が競合しているのかもしれない・・・
  • AptanaStudioでもハイライトカラーなど設定できるが上手く反映されない
  • 「Apply to all (non-studio) editors」にチェックを入れる
  • これによってJavaなど範囲外のコードもこのスタイルにってしまう。

 

5.Sassサンプル作成

  • テストファイルを作成
  • 適当なEclipse上に「scss」というフォルダを作成する
  • その中に「test.scss」というファイルを作成する
  • Sassコードを記述する

※下記は継承を含むサンプル


.classA {
    padding: 5px 10px;
    font-size: 1.1rem;

    li {
        margin: 5px;
    }
}

.classB {
    @extend .classA;
    font-size: 1rem;
}

 

  • Koalaを起動してファルダを設定
  • 自動コンパイル項目にチェック
  • ※「Auto Compass」にチェック入れるとエラーになる・・・
  • これで先ほどのフォルダ「scss」内のファイルが監視対象となり、保存すると自動的にコンパイルされる。

 

_未完_Sassの基本

以下はSassの基本的な機能や制御構文の説明です。

変数

Sassでは、普通のCSSでは使えない変数を使うことができる。使い方は以下の通り。


$baseColor: #0f0f0f;

$subColor: #8f640f;

.box {
    margin: 10px;
    background-color: $baseColor;
    border: 2px $subColor solid;
}

 

四則演算

CSS3では、calc関数?を使用して、サイズなどの簡単な計算を行うことができる。しかしながら、このcalcはブラウザやプラットフォームによって対応状況が違うようだ・・・ Sassでは以下の様な四則計算ができる。


$baseColor: #0f0f0f;
$subColor: #8f640f;
$baseMargin: 10px;

.box {
    background-color: $baseColor/2 + $subColor/2;
    margin: $baseMargin * 1.2;
}

 

ネスト構造

普通のCSSでは、あるセレクタの小セレクタとしてブロックを追加することができない。どちらかと言えば、必要に応じてセレクタを定義して、直線的に記述していく。一方Sassでは、セレクタをネストすることができる。


.box {

    a { //boxクラス内のセレクタ
        color: …;
        border: 1px #222 solid;
    }

    &:hover { // マウスホバーの擬似セレクタ
        color: red;
    }
}

継承

継承は、あるセレクタで定めた性質を受け継ぐことである。


.classA { // 継承元
    border: 2px dashed #e90f55;
    padding: 5px;
    margin: 10px 8px;
}

.classB { // 継承先
    @extend .classA; // 継承命令
    padding: 10px;
    border-width: 1px;
}

上記の例では、classB は classA の margin全部と、borderの線スタイルと線色、を継承している。そして、classB で、padding と線幅を上書きしている。

 

Mixin

これはCSSには全くない機能である。このMixin(ミックスイン)とは、イメージでいうと汎用性の高いサブルーチン的な存在である。パラメータを渡す、又は何も渡さないでインクルードすると、ミックスインブロックに記述されたスタイル定義が展開される。呼び出すようなサブルーチンとは厳密には異なるが、存在的にはそのようなものだろう。


@mixin border-radius($radius: 10px) { // デフォルトパラメータ有りのMixin
    // ベンダープレフィックス別の角丸を例とする
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}

.box {
    @include border-radius(8px); // デフォルトパラメータを更新して角丸8pxに設定する
    .inner {

        @include border-radius(); // 中のクラスにはデフォルトの10pxが適用される
    }
}

 

関数

前述のMixinと似た機能に、関数がある。色々と違いはあるが、まず使うための命令として、Mixinのような @include が不要である。また、 @return で何らかの処理結果を戻すことができる。つまり、プログラミング言語における一般的な関数と同じような動作をする。


@function max( $arg1, $arg2 ) {

    @if $arg1 > = $arg2 {
        @return $arg1;
    }
    @else {
        @return $arg2;
    }
}

$w: 250px;
$h: 150px;

.box {
    height: max($w, $h);
}

また、Sassには様々なビルトイン関数が用意されているため、知っておくと便利である。

 

  • Number Functions
    • percentage($value)    :数値計算を%表示したい
    • round($value)        :小数点を四捨五入する
    • abs($value)            :絶対値を取得する
    • random([$limit])        :乱数を得る
  • Introspection Functions
    • type-of($value)        :型を取得する
    • unit($number)        :値の単位を取得する
    • unitless($number)        :単位がついてるか確認する ture | false
    • comparable($n1, $n2)    :2つの数値引数が比較可能か調べる
  • String Functions
    • str-length($string)        :文字列の長さを取得
    • to-upper-case($string)    :文字列を大文字に変換する
    • to-lower-case($string)    :文字列を小文字に変換する
  • List Functions
    • length($list)            :リストの要素数を取得する
    • nth($list, $n)        :n番目のリスト要素を得る
    • append($list, $val)        :リスト末尾に値を追加する
    • append($list1, $list2)    :2つのリストを結合する
    • index($list, $val)        :$valのインデックスを得る
  • RGB Functions
    • rgb($r, $b, $g)        :r,b,g要素からRBGカラーを作成
    • rgba($r, $b, $g, $alpha)    :上記の透明度を加えた色を作成
    • mix($c1, $c2, [$w])    :2色を適切に混ぜる
  • HSL Functions
    • lighten($c, $amount)    :lighten(red, 20%) 赤を20%明るく
    • darken($c, $amount)    :darken(rgb(12,24,88), %50)
    • grayscale($c)        :グレースケールに変換

※その他のビルトイン関数は http://goo.gl/FnFnY0 を参照下さい。

 

Partialインポート

_hoge.scss というアンダーバーから始まるファイル名のSassファイルをインポートすることである。通常のインポートとの違いは、”_hoge.scss” のようにしたファイルは自動コンパイルされないことである。通常のSassファイル、例えば ”hoge.scss” は、SassやCompassの監視対象になると、変更に伴って ”hoge.css” という通常のCSSにコンパイルされる。しかし、インポート用のPartialは、監視下にあってもCSSに変換されない。これは、Partialは単独で使うことを想定しておらず、必ず他のファイルから呼び出されて使用するからである。

 

Sassの拡張機能(ライブラリ)

アニメーション

参考:http://www.webdesignleaves.com/wp/htmlcss/676/

 

全てのSassファイルの先頭に”_”をつける。これによって、通常SassファイルをPartialファイルにし、CSSに出力させないようにする。

find /path/to/dir -type f -printf ‘%f’ | xargs -0 -I% mv  % _%

※/path/to/dir には先ほどのアニメーション用のSassが入ってる場所を指定する

※上記の場所に “scss” 以外の拡張子のファイルが有る場合は -name “*.scss” を追加する

※UNIXコマンド環境が整っていない場合は、手動でリネームする(58ファイルある・・・)。

 

Compass

Compassは、CSSを便利にしたSassを、更に便利にするためのフレームワークである。様々な補助機能により、Sassの標準機能を拡張している。

インストール

以下、Rubyがインストール済みという前提で話が進む。

  • コンソールを起動する
  • gem install compass からCompassをインストール
  • compass -v でバージョン情報が表示されればOK

 

Compassプロジェクト作成

既存のSassファイルからCompassプロジェクトを用意する方法と、新規に作成する方法がある。

次の二通りである。

  • compass create /path/to/dir コマンドから作成
  • 既存のSassソースファイルのあるフォルダをCompassプロジェクトルートにする

 

設定ファイル

  • Compassプロジェクトルート直下に設定ファイル「config.rb」を用意
    • http_path = “/”            :Webサイトルートファルダ
    • css_dir = “css”        :CSS出力先
    • sass_dir = “scss”        :Sassファルダ
    • images_dir = “images”    :画像フォルダ
    • javascripts_dir = “js”        :JavaScriptファルダ
    • relative_assets = true        :パスの表記を相対指定に
    • output_style = :expanded    :CSS出力の形式

 

監視下に置く(自動コンパイル)

  • compass watch /path/to/dir/ でプロジェクトフォルダを監視下に置く
  • watchプロセスが継続してる間(Ctrl+C を押すまで)は、監視下のSassファイルを更新・保存すると自動的にCSSが出力される

 

※ 特定ディレクトリ監視中は以下の表示になる ※

>>> Compass is watching for changes. Press Ctrl-C to Stop.

 

できること(機能)

Sassでもデフォルトで有用な関数はありますが、Compassではそれがもっとパワーアップして機能追加がされています。

画像系

  • 画像サイズ取得
    • image-width("hoge.png") → 画像の幅をpixelで取得
    • image-height(“hoge.png”) → 画像の高さをpixelで取得
  • 画像URL取得
    • image-url(“hoge.png”) → 画像へのパスを取得する

 

 

0.未分類

Ⅰ ブラウザでSassコードを表示させる

  • Firefox    :標準の開発ツールで対応できるか?
    • Sassだけの場合
      • sass –sourcemap –watch style.scss:style.css
      • 通常のSass監視コマンドに –sourcemap を付けることでソースマップが生成される
    • Compassも使っている場合
      • config.rb に ”sourcemap = true” という行を追加する
      • Compassの監視が有効状態ならば、Ctrl+Cで一旦停止してから、再度 compass watch /path/to/dir で監視し直す。
      • これで、 hoge.css.map というソースマップファイルがCSS出力先に作成される
    • 対象ページで「右クリック > 要素を調査」または、「開発ツール」などから開発ペインを表示
    • 歯車型の設定ボタンから、「元のソースを表示」にチェックを入れる
    • すると、インスペクタタブでのCSS表示部分に *.scss のリンクが表示される
    • リンクをクリックするとスタイルエディタタブに切り替わり、Sassソースが表示される
  • Chrome    :標準で付いている(詳細は知らん)

 

Ⅱ CompassとIDEの自動連携

事前に「compass watch /path/to/dir」コマンドを打たなくても、IDEからSassを編集すると自動的にCSSへコンパイルされるように設定。

  1. Ant又はMavenをインストール