First sass
- 1. 2013.01.11 AC.tech Toshiaki Sasaki(Web designer at All Connect, Inc.)
- 3. Sass こわくないよ
- 4. Agenda - Sass? - 記法 - 導入について - まとめ
- 5. Sass ?
- 6. Sass is CSS Preprocessor - CSSを拡張するメタ言語 “ メタ言語とは、ある言語について何らかの記述をするための言語である。 それだけでは具体的な利用に関する目的をもっておらず、特定のルールを加える ことで具体的な応用として利用可能となる。 -Wikipedia - CSSを普通に書くよりも効率良く 書くことができる
- 8. CSSの文法 だけを拡張する http://hail2u.net/documents/sass-and-sassy-css.html
- 9. Why CSS Preprocessor? - 効率的なCSSコーディング - 表示速度向上のアプローチ
- 10. How to Coding
- 11. Nesting Nesting 入れ子でCSSを書ける • Sample & Demo style.scss style.css #main { #main { margin: 0; margin: 0; padding: 0; padding: 0; .block { } background: #ccc; color: #f00; #main .block { font-size: 12px; background: #ccc; } color: #f00; } font-size: 12px; }
- 12. Valiables Nesting 変数を使うことができる • Sample & Demo style.scss style.css $margin-top: 40px; .sectionA { $fontsize12: 12px; margin-top: 40px; } .sectionA { margin-top: $margin-top; .sectionB { } margin-top: 40px; .sectionB { font-size: 12px; margin-top: $margin-top; } font-size: $fontsize12; }
- 13. mixin Nesting includeできる（セットを変数化するイメージ） • Sample & Demo style.scss style.css @mixin sprite { .sprite-link { display: block; display: block; text-indent: -9999px; text-indent: -9999px; } width: 300px; height: 100px; .sprite-link { background: #eee; @include sprite; } width: 300px; height: 100px; background: #eee; }
- 14. mixin Nesting includeできる（セットを変数化するイメージ） • Sample & Demo style.scss style.css @mixin radius($value) { .sprite-link { -webkit-border-radius: $value; -webkit-border-radius: 8px; -moz-border-radius: $value; -moz-border-radius: 8px; border-radius: $value; border-radius: 8px; } background: #eee; } .sprite-link { @include radius(8px); background: #eee; }
- 15. extend Nesting セレクタの継承（再利用） • Sample & Demo style.scss style.css .box { .box, .sectionA { margin: 0; margin: 0; padding: 0; padding: 0; background: #eee; background: #eee; } } .sectionA{ @extend .box; }
- 16. Other 演算できる Nesting • Sample & Demo style.scss style.css #main { #main { width: 940px - 40px; width: 900px; margin: 0; margin: 0; padding: 0 20px; padding: 0 20px; } }
- 17. Coding is fun, again. Nesting Valiables mixin extend others
- 18. @import ファイルの結合 Nesting style.scss @import "common"; @import "reset"; 複数の scss ファイルを読み込み、1つの css ファイルとして書き出す _common.scss _reset.scss style.scss style.css
- 19. @import ファイルの結合 Nesting style.scss @import "common"; @import "reset"; 読み込ませる scss ファイルには、css ファイルとして書き出させない ためアンダーバーをつける（ex. _common.scss、_reset.scss _common.scss _reset.scss style.scss style.css
- 20. compressed 圧縮Nesting • Sample & compressed --watch sass:css $ sass --style Demo style.scss #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行ですべてを書き出す
- 21. good performance, good UX @import compressed
- 22. Install
- 23. 環境用意しないと使えないよ ┐(́ ｀)┌ﾔﾚﾔﾚ
- 25. Install - Ruby ← Mac OS だと最初から入ってる - Sass
- 26. fo rW in do w s http://rubyinstaller.org/
- 28. $ gem install sass
- 29. Install - Ruby - Sass - Compass ← New!
- 31. $ gem update --system $ gem install compass
- 32. OK!Next!
- 33. Compile
- 34. .scss .css css ファイルを作るためには scss ファイルをコンパイルする
- 35. $ cd project_dir ← プロジェクトのフォルダへ移動 $ sass --watch scss:css ← 監視コマンド sass フォルダ内の .scss ファイルを編集すると css フォルダへ編集した内容を反映させた css ファイルができる
- 36. めんどくさい (´・ω・｀)
- 37. $ cd project_dir ← プロジェクトのフォルダへ移動 $ compass w ← 監視コマンド sass フォルダ内の .scss ファイルを編集すると css フォルダへ編集した内容を反映させた css ファイルができる
- 41. fo rW in batch file Nesting do w s • Samplewatch compass & Demo 上記を書いて「compass_start.bat」という名前で保存。 sass フォルダと同じ階層に置いておく。 scss ファイルを編集する前に、compass_start.bat ファイルを ダブルクリックすることで、自動的に監視が始まる。 コマンドプロンプトを起動して、監視コマンドを自分で入力しなくてもよ くなるので楽だね :)
- 42. config.rb Nesting • Sample=& Demo http_path "/" css_dir = "css" sass_dir = "sass" images_dir = "image" javascripts_dir = "js" output_style = :compressed relative_assets = true line_comments = false 設定用の config.rb も同じ階層に置いておく
- 47. for Non Sasser - 別の css ファイル作って読み込む <link rel=”stylesheet” href=”css/style.css” /> <link rel=”stylesheet” href=”css/newcontents.css” />
- 48. まとめ
- 49. - Sass で効率的かつ、表示速度向上を 意識したコーディングをしよう - 大丈夫、すぐ慣れる :) まずは Nesting とか、すぐできること から始めよう
- 50. Enjoy coding!
- 51. Thank you. Toshiaki Sasaki @shirokuro331
- 52. Resources Nesting Sassを覚えよう http://css-happylife.com/archives/sass/ • Sample & Demo 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/ Photo Credit Luc Viatour http://www.lucnix.be/main.php