Your SlideShare is downloading. ×

First sass

2,720
views

Published on

2013年1月11日に行った社内勉強会用スライド。『初めてのSass』的な内容です。

2013年1月11日に行った社内勉強会用スライド。『初めてのSass』的な内容です。

Published in: Design

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,720
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
16
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 2013.01.11 AC.tech Toshiaki Sasaki(Web designer at All Connect, Inc.)
  • 2. Sassこわくないよ
  • 3. Agenda- Sass?- 記法- 導入について- まとめ
  • 4. Sass ?
  • 5. Sass is CSS Preprocessor- CSSを拡張するメタ言語“ メタ言語とは、ある言語について何らかの記述をするための言語である。 それだけでは具体的な利用に関する目的をもっておらず、特定のルールを加える ことで具体的な応用として利用可能となる。  -Wikipedia- CSSを普通に書くよりも効率良く 書くことができる
  • 6. CSSの文法 だけを拡張する http://hail2u.net/documents/sass-and-sassy-css.html
  • 7. Why CSS Preprocessor?- 効率的なCSSコーディング- 表示速度向上のアプローチ
  • 8. How to Coding
  • 9. 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; }
  • 10. 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; }
  • 11. 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; }
  • 12. 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; }
  • 13. 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; }
  • 14. 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; } }
  • 15. Coding is fun, again.Nesting Valiables mixin extend others
  • 16. @import ファイルの結合 Nesting style.scss @import "common"; @import "reset";複数の scss ファイルを読み込み、1つの css ファイルとして書き出す _common.scss _reset.scss style.scss style.css
  • 17. @import ファイルの結合 Nesting style.scss @import "common"; @import "reset";読み込ませる scss ファイルには、css ファイルとして書き出させないためアンダーバーをつける(ex. _common.scss、_reset.scss _common.scss _reset.scss style.scss style.css
  • 18. 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行ですべてを書き出す
  • 19. good performance, good UX @import compressed
  • 20. Install
  • 21. 環境用意しないと使えないよ ┐(́ `)┌ヤレヤレ
  • 22. Install- Ruby- Sass
  • 23. Install- Ruby ← Mac OS だと最初から入ってる- Sass
  • 24. fo rW in do w shttp://rubyinstaller.org/
  • 25. http://sass-lang.com/
  • 26. $ gem install sass
  • 27. Install- Ruby- Sass- Compass ← New!
  • 28. http://compass-style.org/
  • 29. $ gem update --system$ gem install compass
  • 30. OK!Next!
  • 31. Compile
  • 32. .scss .csscss ファイルを作るためには scss ファイルをコンパイルする
  • 33. $ cd project_dir ← プロジェクトのフォルダへ移動$ sass --watch scss:css ← 監視コマンドsass フォルダ内の .scss ファイルを編集するとcss フォルダへ編集した内容を反映させた css ファイルができる
  • 34. めんどくさい (´・ω・`)
  • 35. $ cd project_dir ← プロジェクトのフォルダへ移動$ compass w ← 監視コマンドsass フォルダ内の .scss ファイルを編集するとcss フォルダへ編集した内容を反映させた css ファイルができる
  • 36. うん、めんどくさい (´・ω・`)
  • 37. そもそも黒い画面が... (´・ω:;.:...
  • 38. まぁまぁ、そんなこと言わずに...
  • 39. fo rW inbatch file Nesting do w s• Samplewatch compass & Demo上記を書いて「compass_start.bat」という名前で保存。sass フォルダと同じ階層に置いておく。scss ファイルを編集する前に、compass_start.bat ファイルをダブルクリックすることで、自動的に監視が始まる。コマンドプロンプトを起動して、監視コマンドを自分で入力しなくてもよくなるので楽だね :)
  • 40. 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 も同じ階層に置いておく
  • 41. http://incident57.com/codekit/
  • 42. http://mhs.github.com/scout-app/
  • 43. 最初から言え( ‘д‘⊂彡☆))Д´) パーン
  • 44. コマンドに慣れておくと、なにかと良いかもね
  • 45. for Non Sasser- 別の css ファイル作って読み込む<link rel=”stylesheet” href=”css/style.css” /><link rel=”stylesheet” href=”css/newcontents.css” />
  • 46. まとめ
  • 47. - Sass で効率的かつ、表示速度向上を意識したコーディングをしよう- 大丈夫、すぐ慣れる :)まずは Nesting とか、すぐできることから始めよう
  • 48. Enjoy coding!
  • 49. Thank you. Toshiaki Sasaki @shirokuro331
  • 50. Resources NestingSassを覚えようhttp://css-happylife.com/archives/sass/• Sample & DemoSassをWindowsにインストールするhttp://taiju.hatenablog.com/entry/20110607/1307413721Sassられ指南http://www.slideshare.net/taiju/sass-8218412Compassを使ってSassのCSS出力を手軽にしようhttp://www.skyward-design.net/blog/archives/000118.htmlSass徹底解説∼SassがもたらすCSSのパラダイムシフトhttp://cssnite.jp/afterdark/cpi/vol01/Photo CreditLuc Viatourhttp://www.lucnix.be/main.php