Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Sass

1.922 visualizaciones

Publicado el

  • Sé el primero en comentar

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!

×