Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sass

1,777 views

Published on

  • Be the first to comment

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!

×