Sass

  • 1,000 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,000
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
2
Comments
0
Likes
2

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