Sass

457 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
457
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sass

  1. 1. sass とは?
  2. 2. css を便利に書ける かも?
  3. 3. 何が必要?
  4. 4. SCOUT をインストールするだけ!http://mhs.github.com/scout-app/
  5. 5. 使い方は…→プロジェクトフォルダを指定・変換前のフォルダを指定 (sass)・変換後のフォルダを指定 (css)
  6. 6. 本題
  7. 7. sass で 出来ること変数、継承、計算、読み込み
  8. 8.
  9. 9. セレクタの入れ子 sass css.parent { .parent { margin: 10px; margin: 10px; line-height: 1.4em; line-height: 1.4em; } .child { color: #fff; .parent .child { } color: #fff;}t }
  10. 10. 変数sass css$x: 100px; p {p { height: 100px; height: $x; }} .variable {.variable { width: 100px; width: $x; }}
  11. 11. 継承 sass css.extend { .extend { color: red; color: red; margin-top: 10px; margin-top: 10px; font-size: 1.2em; }} h2 {h2 { color: red; @extend .extend; margin-top: 10px; height: 100px; height: 100px;} }
  12. 12. 計算 ( 数式 ) sass css$x: 100px;.calc { .calc { height: $x + 150; height: 250px;} }
  13. 13. 計算 ( 色 ) sass css a {$link-color: #666; color: #666666;a { } color: $link-color;} a:hover {a:hover { color: #cacaca; color: $link-color + 100;} }a:visited { a:visited { color: mix($link-color, #ff0000, 30%);} color: #d11e1e; }
  14. 14. 読み込み sass css .clearfix {@import "compass"; overflow: hidden; *zoom: 1;.clearfix { } @include clearfix;} .kadomaru { -webkit-border-radius: 50px;.kadomaru { -moz-border-radius: 50px; @include border-radius(50px); -ms-border-radius: 50px;} -o-border-radius: 50px; border-radius: 50px; }
  15. 15. ・ global-reset・css3 の各種ベンダープリフィックスなども一発で書き出し出来ます
  16. 16. 他にも色んな機能が満載だけど
  17. 17. 後は ggrks ってことで
  18. 18. ご静聴ありがとうございました!

×