Sassってみる

2013年11月17日

ETC

WEB製作者のためのSassの教科書という本をkindleで気の迷いにより買ってしまったので、簡単に試してみます。

うちの環境

念のためうちの環境ですが、
・mac os 10.9
・ruby 2.0.0.p247
です。

インストール

・Ruby が必須らしい
・インストール簡単:gemでインストールする

$ sudo gem install sass
Password:
Fetching: sass-3.2.12.gem (100%)
Successfully installed sass-3.2.12
Parsing documentation for sass-3.2.12
Installing ri documentation for sass-3.2.12
1 gem installed

$ sass -v
Sass 3.2.12 (Media Mark)

以上です。

実際に使ってみる

教科書のままですがこんなかんじに使ってみる。
#sass.scss

#main{
  width: 600px;
  p {
    margin: 0 0 1em;
    em {
      color: #f00;
    }
  } 
  small {
    font-size: small;
  }
}

これを保存してコンパイル?します。
terminalで以下をたたきます
sass(コマンド名) sass.scss(作ったsassファイル):test.css(コンパイルをかけたあとのアウトプットするcss名を指定する)

$sass sass.scss:test.css

で実際に出来たファイルが

#main {
  width: 600px; }
  #main p {
    margin: 0 0 1em; }
    #main p em {
      color: #f00; }
  #main small {
    font-size: small; }

これを以下のコマンドにすると

$sass sass.scss:test.css --style expand

こんなかんじで見慣れた感じで出ます。

#main {
  width: 600px; }
#main p {
  margin: 0 0 1em; }
#main p em {
  color: #f00; }
#main small {
  font-size: small; }

他にも圧縮系のやつとかいろいろあるっぽいです。
ですです。
よし構文勉強するべさ。

共有: