First sass
-
Upload
toshiaki-sasaki -
Category
Design
-
view
2.817 -
download
5
description
Transcript of 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 だと最初から入ってる
$ gem install sass
Install
- Compass
- Ruby- Sass
← New!
$ 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 も同じ階層に置いておく
( ‘д‘⊂彡☆))Д´) パーン
最初から言え
コマンドに慣れておくと、なにかと良いかもね
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/