First sass

3,769 views

Published on

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

Published in: Design

First sass

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

×