ITコンサルの日常

ITコンサル会社に勤務する普通のITエンジニアの日常です。

Sass Tutorial - 0: Ruby and Sass導入 on Windows

Ruby Sass

なんでSass?

Sencha Touchで使われていて、今後出てくるExt JS4でも採用されるとのこと。
先日の勉強会で取り上げられていたので、概要は分かったつもりになっているのですが、
実際に自分で手を動かしてみよう。という企画です。

Sassってなんぞや

原文 Sass - Syntactically Awesome Stylesheets

Sass is a meta-language on top of CSS that's used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.

超意訳

Sassは、CSSよりも強力で、ドキュメントのスタイルをきれいに、かつ、構造的に記述するために使われるメタ言語です。
Sassは、簡潔さとエレガントな文法を提供し、管理可能なスタイルシートを作成するために、いくつもの有用な特徴を備えています。

分かったような、分からないような、、ということで、とりあえず動かしてみよう。

Rubyのインストール

ダウンロードとインストール

ActiveScriptRuby and Other packages
Ruby-1.9.1-p429 Microsoft Installter Package(2010/07/021 version 28523) 16,896,512バイト

確認
>ruby -v
ruby 1.9.1p429 (2010-07-02 revision 28523) [i386-mswin32]

Sassのインストール

>gem install haml
Successfully installed haml-3.0.24
1 gem installed
Installing ri documentation for haml-3.0.24...
Updating class cache with 1392 classes...
Installing RDoc documentation for haml-3.0.24...
style.scssの作成(Tutorialからパクった)
/* style.scss */
#navbar {
  width: 80%;
  height: 23px;
}
確認

>sass -watch style.scss:style.css
ファイル名、ディレクトリ名、またはボリューム ラベルの構文が間違っています。

。。。
気を取り直して、1.8.7にしてみる。

Rubyのインストール

ダウンロードとインストール

ActiveScriptRuby and Other packages
ActiveScriptRuby(1.8.7-p302 --with-winsock2 --enable-tcltk-stub) Microsoft Installer Package (1.8.7.34) 14,775,808バイト

確認
>ruby -v
ruby 1.8.7 (2010-08-16 patchlevel 302) [i386-mswin32]

Sassのインストール

>gem install haml
Successfully installed haml-3.0.24
1 gem installed
Installing ri documentation for haml-3.0.24...
Installing RDoc documentation for haml-3.0.24...
style.scssの作成

同上

確認
>sass --watch style.scss:style.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
     create style.css

^C
>dir /b
.sass-cache
sass.txt
style.css
style.scss

style.scssから、style.cssが生成されていますね！

sassコマンドのヘルプ

>sass --help
Usage: sass [options] [INPUT] [OUTPUT]

Description:
  Uses the Sass engine to parse the specified template
  and outputs the result to the specified file.

Options:
        --rails RAILS_DIR            Install Haml and Sass from the Gem to a Rai
ls project
    -c, --check                      Just check syntax, don't evaluate.
    -s, --stdin                      Read input from standard input instead of a
n input file
        --trace                      Show a full traceback on error
        --unix-newlines              Use Unix-style newlines in written files.
        --scss                       Use the CSS-superset SCSS syntax.
        --watch                      Watch files or directories for changes.
                                     The location of the generated CSS can be se
t using a colon:
                                       sass --watch input.sass:output.css
                                       sass --watch input-dir:output-dir
        --update                     Compile files or directories to CSS.
                                     Locations are set like --watch.
        --stop-on-error              If a file fails to compile, exit immediatel
y.
                                     Only meaningful for --watch and --update.
    -t, --style NAME                 Output style. Can be nested (default), comp
act, compressed, or expanded.
    -q, --quiet                      Silence warnings and status messages during
 compilation.
    -g, --debug-info                 Emit extra information in the generated CSS
 that can be used by the FireSass Firebug plugin.
    -l, --line-numbers               Emit comments in the generated CSS indicati
ng the corresponding sass line.
        --line-comments
    -i, --interactive                Run an interactive SassScript shell.
    -I, --load-path PATH             Add a sass import path.
    -r, --require LIB                Require a Ruby library before running Sass.

        --cache-location PATH        The path to put cached Sass files. Defaults
 to .sass-cache.
    -C, --no-cache                   Don't cache to sassc files.
    -?, -h, --help                   Show this message
    -v, --version                    Print version

sass --watch style.scss:style.cssじゃなくて、

sass style.scss style.css

っていう実行方法もアリみたい。


Sassの記事一覧 | Sass Tutorial - 1: Nesting ＞