Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Sass

1.920 Aufrufe

Veröffentlicht am

  • Als Erste(r) kommentieren

Sass

  1. 1. Sass (Syntactically Awesome StyleSheets) (株)永和システムマネジメント サービスプロバイディング事業部 浦嶌 啓太
  2. 2. Problems •CSSは変更容易性が低い •構造を表現できない •重複だらけ •マジックナンバーたくさん ➡カオスまっしぐら
  3. 3. Solution
  4. 4. What s Sass •CSSを生成するためのメタ言語 •様々なフレームワークをサポート •Rails, Merb, Ramaze, etc.
  5. 5. #main p :color #00ff00 :width 97% #main p { color: #00ff00; width: 97%; } Sass CSS
  6. 6. Features of Sass 2.0 •Nested Rules •Variables •Operations •Mixins
  7. 7. Nested Rules #main p :color #00ff00 .redbox :background-color #ff0000 :color #000000 #main p { color: #00ff00; } #main p .redbox { background-color: #ff0000; color: #000000; }
  8. 8. Variables !base_color = #00ff00 #main p :color = !base_color :width 97% h3 :color = !base_color
  9. 9. Operations !color = red !margin = 3em h1 :color = !color + #333 :margin-left = !margin - 2em
  10. 10. Mixins =round-top :border-top-left-radius 8px :border-top-right-radius 8px :-moz-border-radius-topleft 8px :-moz-border-radius-topright 8px .info +round-top :font-color gray
  11. 11. What s New in Edge Sass •Functions •Interpolation •Control Structures •Mixins Arguments
  12. 12. Functions p :color = hsl(0, 100%, 50%) :width = percentage(50px / 100px) :font-size = round(1.5em) :margin-left = abs(-5%) p { color: red; width: 50%; font-size: 2em; margin-left: 5%; }
  13. 13. Interpolation !name = foo !attr = border p.#{!name} #{!attr}-color: blue p.foo { border-color: blue; }
  14. 14. Control Structures (1) !theme = classic body @if !theme == classic :background-color silver @else :background-color white
  15. 15. Control Structures (2) @for !i from 1 through 2 .item-#{!i} :width = 2em * !i .item-1 { width: 2em; } .item-2 { width: 4em; }
  16. 16. Mixins Arguments =my-border(!color, !width = 1px) :border-color = !color :border-width = !width :border-style dashed p +my-border(blue) p { border-color: blue; border-width: 1px; border-style: dashed; }
  17. 17. まとめ •Sassというものがあります •Sassを使うとCSSをメンテナンスしや すくなります •Sassを前提としたスタイルの書き方を 模索する必要がありそう
  18. 18. Happy Coding!

×