First sass

2013.01.11 AC.tech　Toshiaki Sasaki(Web designer at All Connect, Inc.)

Sassこわくないよ

Agenda- Sass?-記法

-導入について

-まとめ

Sass?

Sass is CSS Preprocessor

- CSSを拡張するメタ言語

-CSSを普通に書くよりも効率良く書くことができる

メタ言語とは、ある言語について何らかの記述をするための言語である。それだけでは具体的な利用に関する目的をもっておらず、特定のルールを加えることで具体的な応用として利用可能となる。　　-Wikipedia

“

CSSの文法だけを拡張するhttp://hail2u.net/documents/sass-and-sassy-css.html

Why CSS Preprocessor?

-効率的なCSSコーディング

-表示速度向上のアプローチ

How to Coding

Nesting

• Sample & Demo

Nesting

#main { margin: 0; padding: 0; .block { background: #ccc; color: #f00; font-size: 12px; }}

#main { margin: 0; padding: 0;}

#main .block { background: #ccc; color: #f00; font-size: 12px;}

style.scss style.css

入れ子でCSSを書ける

Nesting

• Sample & Demo

Valiables

$margin-top: 40px;$fontsize12: 12px;

.sectionA { margin-top: $margin-top;}.sectionB { margin-top: $margin-top; font-size: $fontsize12;}

.sectionA { margin-top: 40px;}

style.scss style.css

変数を使うことができる

.sectionB { margin-top: 40px; font-size: 12px;}

Nesting

• Sample & Demo

mixin

@mixin sprite { display: block; text-indent: -9999px;}

.sprite-link { @include sprite; width: 300px; height: 100px; background: #eee;}

.sprite-link { display: block; text-indent: -9999px; width: 300px; height: 100px; background: #eee;}

style.scss style.css

includeできる（セットを変数化するイメージ）

Nesting

• Sample & Demo

mixin

@mixin radius($value) { -webkit-border-radius: $value; -moz-border-radius: $value; border-radius: $value;}

.sprite-link { @include radius(8px); background: #eee;}

.sprite-link { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: #eee;}

style.scss style.css

includeできる（セットを変数化するイメージ）

Nesting

• Sample & Demo

extend

.box { margin: 0; padding: 0; background: #eee;}

.sectionA{ @extend .box;}

.box, .sectionA { margin: 0; padding: 0; background: #eee;}

style.scss style.css

セレクタの継承（再利用）

Nesting

• Sample & Demo

Other

#main { width: 940px - 40px; margin: 0; padding: 0 20px;}

#main { width: 900px; margin: 0; padding: 0 20px;}

style.scss style.css

演算できる

Coding is fun, again.

Nesting Valiables mixin

extend others

Nesting@import

@import "common";@import "reset";

style.scss

ファイルの結合

複数の scss ファイルを読み込み、1つの css ファイルとして書き出す

_common.scss _reset.scss style.cssstyle.scss

Nesting@import

@import "common";@import "reset";

style.scss

ファイルの結合

読み込ませる scss ファイルには、css ファイルとして書き出させないためアンダーバーをつける（ex. _common.scss、_reset.scss

_common.scss _reset.scss style.cssstyle.scss

Nesting

• Sample & Demo

compressed

#main {margin: 0;padding: 0;} #main .block {background: #ccc;color: #f00;font-size: 12px;}.sprite-link {display: block;text-indent: -9999px;width: 300px;height: 100px;background: #eee;}

圧縮

改行やスペースを削除して1行ですべてを書き出す

$ sass --style compressed --watch sass:css

style.scss

good performance, good UX

@import compressed

Install

環境用意しないと使えないよ ┐(́∀｀)┌ﾔﾚﾔﾚ

Install

- Ruby- Sass

Install

- Ruby- Sass

← Mac OS だと最初から入ってる

for Windows

http://rubyinstaller.org/

http://sass-lang.com/

$ gem install sass

Install

- Compass

- Ruby- Sass

← New!

http://compass-style.org/

$ gem update --system

$ gem install compass

OK!Next!

Compile

.scss .css

css ファイルを作るためには scss ファイルをコンパイルする

sass フォルダ内の .scss ファイルを編集するとcss フォルダへ編集した内容を反映させた css ファイルができる

$ cd project_dir

$ sass --watch scss:css

← プロジェクトのフォルダへ移動

← 監視コマンド

めんどくさい (´・ω・｀)

sass フォルダ内の .scss ファイルを編集するとcss フォルダへ編集した内容を反映させた css ファイルができる

$ cd project_dir

$ compass w

← プロジェクトのフォルダへ移動

← 監視コマンド

うん、めんどくさい (´・ω・｀)

そもそも黒い画面が... (´・ω:;.:...

まぁまぁ、そんなこと言わずに...

Nesting

• Sample & Demo

batch file

上記を書いて「compass_start.bat」という名前で保存。sass フォルダと同じ階層に置いておく。scss ファイルを編集する前に、compass_start.bat ファイルをダブルクリックすることで、自動的に監視が始まる。コマンドプロンプトを起動して、監視コマンドを自分で入力しなくてもよくなるので楽だね :)

compass watch

for Windows

Nesting

• Sample & Demo

config.rb

http_path = "/"css_dir = "css"sass_dir = "sass"images_dir = "image"javascripts_dir = "js"

output_style = :compressedrelative_assets = trueline_comments = false

設定用の config.rb も同じ階層に置いておく

http://incident57.com/codekit/

http://mhs.github.com/scout-app/

( ‘д‘⊂彡☆))Д´) ﾊﾟｰﾝ

最初から言え

コマンドに慣れておくと、なにかと良いかもね

for Non Sasser

-別の css ファイル作って読み込む

<link rel=”stylesheet” href=”css/style.css” />

<link rel=”stylesheet” href=”css/newcontents.css” />

まとめ

- Sass で効率的かつ、表示速度向上を

意識したコーディングをしよう

-大丈夫、すぐ慣れる :)

まずは Nesting とか、すぐできること

から始めよう

Enjoy coding!

Thank you.

Toshiaki Sasaki@shirokuro331

Nesting

• Sample & Demo

Resources

Luc Viatourhttp://www.lucnix.be/main.php

Photo Credit

Sassを覚えようhttp://css-happylife.com/archives/sass/

SassをWindowsにインストールするhttp://taiju.hatenablog.com/entry/20110607/1307413721

Sassられ指南http://www.slideshare.net/taiju/sass-8218412

Compassを使ってSassのCSS出力を手軽にしようhttp://www.skyward-design.net/blog/archives/000118.html

Sass徹底解説～SassがもたらすCSSのパラダイムシフトhttp://cssnite.jp/afterdark/cpi/vol01/