CSSプリプロセッサの取扱説明書

2,155 views

Published on

0 Comments
33 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,155
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
32
Comments
0
Likes
33
Embeds 0
No embeds

No notes for slide

CSSプリプロセッサの取扱説明書

  1. 1. CSS Preprocessors The Manual Frontrend Vol.3 powered by CyberAgent, Inc. Hiroki Tani http://www.flickr.com/photos/theenmoy/6274917102/
  2. 2. Hiroki TaniDeveloper @ Cyberagent,Inc
  3. 3. Hiroki Tani @ hiloki
  4. 4. CSS Preprocessors?* CSSプリプロセッサ* CSS拡張メタ言語* Sass,LESS,Stylus...
  5. 5. CSS Preprocessors?* 変数* 演算* ネスト(入れ子)* ミックスインなど
  6. 6. CSS Preprocessors?.scss.less .css.styl compile!
  7. 7. .header,.content { width: 940px; /* 960px - 20px */ padding: 10px;}.header h1 { font-size: 18px; color: #66CC33;}.header .pubdate { font-size: 10px; color: #CCCCCC;}.content h2 { font-size: 16px; font-weight: normal; color: #66CC33;}.content p { font-size: 12px;}
  8. 8. .header,.content { width: 940px; /* 960px - 20px */ padding: 10px;}.header h1 { font-size: 18px; color: #66CC33;}.header .pubdate { font-size: 10px; color: #CCCCCC;}.content h2 { font-size: 16px; font-weight: normal; color: #66CC33;}.content p { font-size: 12px;}
  9. 9. .header,.content { width: 940px; /* 960px - 20px */ padding: 10px;}.header h1 { font-size: 18px; color: #66CC33;}.header .pubdate { font-size: 10px; color: #CCCCCC;}.content h2 { font-size: 16px; font-weight: normal; color: #66CC33;}.content p { font-size: 12px;}
  10. 10. .header,.content { width: 940px; /* 960px - 20px */ padding: 10px;}.header h1 { font-size: 18px; color: #66CC33;}.header .pubdate { font-size: 10px; color: #CCCCCC;}.content h2 { font-size: 16px; font-weight: normal; color: #66CC33;}.content p { font-size: 12px;}
  11. 11. $green: #66CC33;.header,.content { width: 960px - 20px; padding: 10px;}.header { h1 { font-size: 18px; color: $green; } .pubdate { font-size: 10px; color: #CCCCCC; }}.content { h2 { font-size: 16px; font-weight: normal; color: $green; } p { font-size: 12px; }}
  12. 12. $green: #66CC33;.header,.content { width: 960px - 20px; padding: 10px;}.header { h1 { font-size: 18px; color: $green; } .pubdate { font-size: 10px; color: #CCCCCC; }}.content { h2 { font-size: 16px; font-weight: normal; color: $green; } p { font-size: 12px; }}
  13. 13. $green: #66CC33;.header,.content { width: 960px - 20px; padding: 10px;}.header { h1 { font-size: 18px; color: $green; } .pubdate { font-size: 10px; color: #CCCCCC; }}.content { h2 { font-size: 16px; font-weight: normal; color: $green; } p { font-size: 12px; }}
  14. 14. $green: #66CC33;.header,.content { width: 960px - 20px; padding: 10px;}.header { h1 { font-size: 18px; color: $green; } .pubdate { font-size: 10px; color: #CCCCCC; }}.content { h2 { font-size: 16px; font-weight: normal; color: $green; } p { font-size: 12px; }}
  15. 15. $ sass style.scss:style.css
  16. 16. $ sass style.scss:style.css
  17. 17. $ sass style.scss:style.css
  18. 18. $ sass style.scss:style.css
  19. 19. $green: #66CC33;.header,.content { width: 960px - 20px; padding: 10px;}.header { h1 { font-size: 18px; color: $green; } .pubdate { font-size: 10px; color: #CCCCCC; }}.content { h2 { font-size: 16px; font-weight: normal; color: $green; } p { font-size: 12px; }}
  20. 20. .header,.content { width: 940px; padding: 10px;}.header h1 { font-size: 18px; color: #66CC33;}.header .pubdate { font-size: 10px; color: #CCCCCC;}.content h2 { font-size: 16px; font-weight: normal; color: #66CC33;}.content p { font-size: 12px;}
  21. 21. $ sass style.scss:style.css
  22. 22. $ sass --watch style.scss:style.css
  23. 23. http://sass-lang.com/
  24. 24. $ gem install sass$ sass style.scss:style.css
  25. 25. $ gem install sass$ sass style.scss:style.css
  26. 26. http://lesscss.org/http://lesscss.org/
  27. 27. $ brew install node$ brew install npm$ npm install -g less$ lessc style.less
  28. 28. $ brew install node$ brew install npm$ npm install -g less$ lessc style.less http://nodejs.org/
  29. 29. http://learnboost.github.com/stylus/
  30. 30. $ brew install node$ brew install npm$ npm install -g stylus$ stylus style.styl
  31. 31. ...
  32. 32. http://incident57.com/codekit/
  33. 33. http://livereload.com/
  34. 34. http://mhs.github.com/scout-app/
  35. 35. https://gihyo.jp/dp/ebook/2012/978-4-7741-5123-6
  36. 36. https://gihyo.jp/dp/sp/advent2011/G11C32
  37. 37. http://www.adventar.org/calendars/1
  38. 38. Practice!
  39. 39. Mixin
  40. 40. Mixin“ Mixinとはオブジェクト指向プログラミング言語に おいて、サブクラスによって継承されることにより 機能を提供し、単体で動作することを意図しないク ラスである。Mixin からの継承は、特化の一形態で はなく、むしろ機能を他のクラスから集めるための ” 手段である。 http://ja.wikipedia.org/wiki/Mixin
  41. 41. Mixinベンダープレフィックスの付与
  42. 42. .button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #CCC;}.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 1px solid #999;}
  43. 43. @mixin border-radius($radius:5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;}.button { @include border-radius; background-color: #CCC;}.box { @include border-radius(10px); border: 1px solid #999;}
  44. 44. @mixin border-radius($radius:5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;}.button { @include border-radius; background-color: #CCC;}.box { @include border-radius(10px); border: 1px solid #999;}
  45. 45. @mixin border-radius($radius:5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;}.button { @include border-radius; background-color: #CCC;}.box { @include border-radius(10px); border: 1px solid #999;}
  46. 46. @mixin border-radius($radius:5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;}.button { @include border-radius; background-color: #CCC;}.box { @include border-radius(10px); border: 1px solid #999;}
  47. 47. .button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #CCC;}.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 1px solid #999;}
  48. 48. @mixin border-radius($radius:5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;}.button { @include border-radius; background-color: #CCC;}.box { @include border-radius(10px); border: 1px solid #999;}
  49. 49. @mixin border-radius($radius:5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius;}.button { @include border-radius; background-color: #CCC;}.box { @include border-radius(20px); border: 1px solid #999;}
  50. 50. .button { -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; background-color: #CCC;}.box { -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; border: 1px solid #999;}
  51. 51. Mixin色の明度を判定
  52. 52. @mixin message($bg-color) { border: 3px solid #444; margin: 10px auto; padding: 10px; width: 50%; text-align: center; font-size: 24px; @if lightness($bg-color) <= 50% { color: #FFF; text-shadow: 0 -1px #444; } @else { color: #444; text-shadow: 0 1px #FFF; }}.info { $bg-color: #EEE1F9; @include message($bg-color); background-color: $bg-color;}.alert { $bg-color: #CC3311; @include message($bg-color); background-color: $bg-color;}
  53. 53. .info { border: 3px solid #444; margin: 10px auto; padding: 10px; width: 50%; text-align: center; font-size: 24px; color: #444; text-shadow: 0 1px #FFF; background-color: #eee1f9;}.alert { border: 3px solid #444; margin: 10px auto; padding: 10px; width: 50%; text-align: center; font-size: 24px; color: #FFF; text-shadow: 0 -1px #444444; background-color: #cc3311;}
  54. 54. Mixinメディアクエリの設定
  55. 55. @mixin smallscreen { @media (max-width:480px) { @content; }}.header { width: 960px; background-color: #F99; @include smallscreen { width: 100%; background-color: #9F9; }}
  56. 56. .header { width: 960px; background-color: #F99;}@media (max-width: 480px) { .header { width: 100%; background-color: #9F9; }}
  57. 57. Mixinパーセンテージの計算
  58. 58. <div class="container"> <div class="main">MAIN</div> <div class="sidebar">SIDEBAR</div></div>
  59. 59. <div class="container"> <div class="main">MAIN</div> <div class="sidebar">SIDEBAR</div></div>
  60. 60. $container: 960px;$main: 600px;$sidebar: 300px;.container { overflow: hidden; @media (min-width:$container) { margin-right: auto; margin-left: auto; width: $container; }}.main { float: left; width: percentage($main / $container); background-color: #F99;}.sidebar { float: right; width: percentage($sidebar / $container); background-color: #9F9;}
  61. 61. .container { overflow: hidden;}@media (min-width: 960px) { .container { margin-right: auto; margin-left: auto; width: 960px; }}.main { float: left; width: 62.5%; background-color: #F99;}.sidebar { float: right; width: 31.25%; background-color: #9F9;}
  62. 62. Mixineachを利用したナビゲーション
  63. 63. Home News About Contact<div class="global-navigation"><ul> <li><a href="#home" class="nav nav-home">Home</a></li> <li><a href="#news" class="nav nav-news">News</a></li> <li><a href="#about" class="nav nav-about">About</a></li> <li><a href="#contact" class="nav nav-contact">Contact</a></li></ul></div>
  64. 64. $globalNav: home, news, about, contact;.nav { display: block; width:100% / length($globalNav); height: 44px; line-height: 44px;}@each $nav in $globalNav{ .nav-#{$nav} { background-image: url(/images/btn-#{$nav}.png); }}
  65. 65. .nav { display: block; width: 25%; height: 44px; line-height: 44px;}.nav-home { background-image: url("/images/btn-home.png");}.nav-news { background-image: url("/images/btn-news.png");}.nav-about { background-image: url("/images/btn-about.png");}.nav-contact { background-image: url("/images/btn-contact.png");}
  66. 66. Home News About IR Contact<div class="global-navigation"><ul> <li><a href="#home" class="nav nav-home">Home</a></li> <li><a href="#news" class="nav nav-news">News</a></li> <li><a href="#about" class="nav nav-about">About</a></li> <li><a href="#ir" class="nav nav-ir">IR</a></li> <li><a href="#contact" class="nav nav-contact">Contact</a></li></ul></div>
  67. 67. $globalNav: home, news, about, ir, contact;.nav { display: block; width:100% / length($globalNav); height: 44px; line-height: 44px;}@each $nav in $globalNav{ .nav-#{$nav} { background-image: url(/images/btn-#{$nav}.png); }}
  68. 68. .nav { display: block; width: 20%; height: 44px; line-height: 44px;}.nav-home { background-image: url("/images/btn-home.png");}.nav-news { background-image: url("/images/btn-news.png");}.nav-about { background-image: url("/images/btn-about.png");}.nav-ir { background-image: url("/images/btn-ir.png");}.nav-contact { background-image: url("/images/btn-contact.png");}
  69. 69. http://thoughtbot.com/bourbon/
  70. 70. http://lesshat.com/
  71. 71. Mixin,Extend, Placeholder
  72. 72. @mixin inline-block { display: inline-block; *display: inline; *zoom: 1;}.button { @include inline-block; width: 80%; height: 30px; line-height: 30px;}.banner { @include inline-block; width: 220px; height: 60px;}
  73. 73. button { display: inline-block; *display: inline; *zoom: 1; width: 80%; height: 30px; line-height: 30px;}.banner { display: inline-block; *display: inline; *zoom: 1; width: 220px; height: 60px;}
  74. 74. .inline-block { display: inline-block; *display: inline; *zoom: 1;}.button { @extend .inline-block; width: 80%; height: 30px; line-height: 30px;}.banner { @extend .inline-block; width: 220px; height: 60px;}
  75. 75. .inline-block, .button, .banner { display: inline-block; *display: inline; *zoom: 1;}.button { width: 80%; height: 30px; line-height: 30px;}.banner { width: 220px; height: 60px;}
  76. 76. %inline-block { display: inline-block; *display: inline; *zoom: 1;}.button { @extend %inline-block; width: 80%; height: 30px; line-height: 30px;}.banner { @extend %inline-block; width: 220px; height: 60px;}
  77. 77. .button, .banner { display: inline-block; *display: inline; *zoom: 1;}.button { width: 80%; height: 30px; line-height: 30px;}.banner { width: 220px; height: 60px;}
  78. 78. .inline-block, .button, .banner { display: inline-block; *display: inline; *zoom: 1;}.button { width: 80%; height: 30px; line-height: 30px;}.banner { width: 220px; height: 60px;}
  79. 79. エディタの対応(コード補完)
  80. 80. 過剰なネスト
  81. 81. .entry { ... .entry-header { h1 { ... } .pubdate { ... } .tags { > li { ... } } } .entry-body { p { ... small { ... } } figure { ... figcaption { ... } img { ... } } blockquote { .quote { ... } } }}
  82. 82. .entry { ...}.entry .entry-header h1 { ...}.entry .entry-header .pubdate { ...}.entry .entry-header .tags > li { ...}.entry .entry-body p { ...}.entry .entry-body p small { ...}.entry .entry-body figure { ...}.entry .entry-body figure figcaption { ...}.entry .entry-body figure img { ...}.entry .entry-body blockquote .quote { ...}
  83. 83. 4,095 ruleshttp://support.microsoft.com/kb/262161/en-us
  84. 84. http://blesscss.com/
  85. 85. プリプロセッサが使えない
  86. 86. 複雑なミックスイン
  87. 87. Single Class vs Multi Class
  88. 88. http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/
  89. 89. <nav class="clearfix"> <ul> <li><a href="#" class="btn">Default</a></li> <li><a href="#" class="btn-primary">Primary</a></li> <li><a href="#" class="btn-success">Success</a></li> <li><a href="#" class="btn-warning">Warning</a></li> <li><a href="#" class="btn-danger">Danger</a></li> </ul> <ul> <li><a href="#" class="btn-large">Default</a></li> <li><a href="#" class="btn-primary-large">Primary</a></li> <li><a href="#" class="btn-success-large">Success</a></li> <li><a href="#" class="btn-warning-large">Warning</a></li> <li><a href="#" class="btn-danger-large">Danger</a></li> </ul> <ul> <li><a href="#" class="btn-small">Default</a></li> <li><a href="#" class="btn-primary-small">Primary</a></li> <li><a href="#" class="btn-success-small">Success</a></li> <li><a href="#" class="btn-warning-small">Warning</a></li> <li><a href="#" class="btn-danger-small">Danger</a></li> </ul></nav>
  90. 90. <nav class="clearfix"> <ul> <li><a href="#" class="btn">Default</a></li> <li><a href="#" class="btn-primary">Primary</a></li> <li><a href="#" class="btn-success">Success</a></li> <li><a href="#" class="btn-warning">Warning</a></li> <li><a href="#" class="btn-danger">Danger</a></li> </ul> <ul> <li><a href="#" class="btn-large">Default</a></li> <li><a href="#" class="btn-primary-large">Primary</a></li> <li><a href="#" class="btn-success-large">Success</a></li> <li><a href="#" class="btn-warning-large">Warning</a></li> Rules:15 <li><a href="#" class="btn-danger-large">Danger</a></li> </ul> <ul> <li><a href="#" class="btn-small">Default</a></li> <li><a href="#" class="btn-primary-small">Primary</a></li> <li><a href="#" class="btn-success-small">Success</a></li> <li><a href="#" class="btn-warning-small">Warning</a></li> <li><a href="#" class="btn-danger-small">Danger</a></li> </ul></nav>
  91. 91. %_btn { .btn { display: inline-block; @extend %_btn; padding: 0.4em 0.8em; @include button;} @extend %_btnMedium; color: #444444;%_btnSmall { text-shadow: 0 1px rgba(#FFFFFF,0.5); border-radius: 3px; } font-size: 12px;} .btn-large { @extend %_btn;%_btnMedium { @include button; border-radius: 4px; @extend %_btnLarge; font-size: 16px; color: #444444;} text-shadow: 0 1px rgba(#FFFFFF,0.5); }%_btnLarge { border-radius: 6px; .btn-primary { font-size: 20px; @extend %_btn;} @include button(#1199DD); @extend %_btnMedium; color: #FFFFFF; text-shadow: 0 -1px rgba(#000000,0.5); } .btn-primary-large { @extend %_btn; @include button(#1199DD); @extend %_btnLarge; color: #FFFFFF; text-shadow: 0 -1px rgba(#000000,0.5); } ...
  92. 92. %_btn { display: inline-block; .btn-primary-small { padding: 0.4em 0.8em; @extend %_btn;} @include button(#1199DD); @extend %_btnSmall;%_btnSmall { color: #FFFFFF; border-radius: 3px; text-shadow: 0 -1px rgba(#000000,0.5); .btn-danger { font-size: 12px; } @extend %_btn;} @include button(#EE5F5B); .btn-success { @extend %_btnMedium;%_btnMedium { @extend %_btn; color: #FFFFFF; border-radius: 4px; @include button(#62C462); text-shadow: 0 -1px rgba(#000000,0.5); font-size: 16px; @extend %_btnMedium; }} color: #FFFFFF; text-shadow: 0 -1px rgba(#000000,0.5); .btn-danger-large {%_btnLarge { } @extend %_btn; border-radius: 6px; @include button(#EE5F5B); font-size: 20px; .btn-success-large { @extend %_btnLarge;} @extend %_btn; color: #FFFFFF; @include button(#62C462); text-shadow: 0 -1px rgba(#000000,0.5);.btn { @extend %_btnLarge; } @extend %_btn; color: #FFFFFF; @include button; text-shadow: 0 -1px rgba(#000000,0.5); .btn-danger-small { @extend %_btnMedium; } @extend %_btn; color: #444444; @include button(#EE5F5B); text-shadow: 0 1px rgba(#FFFFFF,0.5); .btn-success-small { @extend %_btnSmall;} @extend %_btn; color: #FFFFFF; @include button(#62C462); text-shadow: 0 -1px rgba(#000000,0.5);.btn-large { @extend %_btnSmall; } @extend %_btn; color: #FFFFFF; @include button; text-shadow: 0 -1px rgba(#000000,0.5); @extend %_btnLarge; } color: #444444; text-shadow: 0 1px rgba(#FFFFFF,0.5); .btn-warning {} @extend %_btn; @include button(#FBB450);.btn-small { @extend %_btnMedium; @extend %_btn; color: #FFFFFF; @include button; text-shadow: 0 -1px rgba(#000000,0.5); @extend %_btnSmall; } color: #444444; text-shadow: 0 1px rgba(#FFFFFF,0.5); .btn-warning-large {} @extend %_btn; @include button(#FBB450);.btn-primary { @extend %_btnLarge; @extend %_btn; color: #FFFFFF; @include button(#1199DD); text-shadow: 0 -1px rgba(#000000,0.5); @extend %_btnMedium; } color: #FFFFFF; text-shadow: 0 -1px rgba(#000000,0.5); .btn-warning-small {} @extend %_btn; @include button(#FBB450);.btn-primary-large { @extend %_btnSmall; @extend %_btn; color: #FFFFFF; @include button(#1199DD); text-shadow: 0 -1px rgba(#000000,0.5); @extend %_btnLarge; } color: #FFFFFF; text-shadow: 0 -1px rgba(#000000,0.5);}
  93. 93. %_btn { display: inline-block; .btn-primary-small { padding: 0.4em 0.8em; @extend %_btn;} @include button(#1199DD); @extend %_btnSmall;%_btnSmall { color: #FFFFFF; border-radius: 3px; text-shadow: 0 -1px rgba(#000000,0.5); .btn-danger { font-size: 12px; } @extend %_btn;} @include button(#EE5F5B); .btn-success { @extend %_btnMedium;%_btnMedium { @extend %_btn; color: #FFFFFF; border-radius: 4px; @include button(#62C462); text-shadow: 0 -1px rgba(#000000,0.5); font-size: 16px; @extend %_btnMedium; }} color: #FFFFFF; text-shadow: 0 -1px rgba(#000000,0.5); .btn-danger-large {%_btnLarge { } @extend %_btn; border-radius: 6px; @include button(#EE5F5B); font-size: 20px; .btn-success-large { @extend %_btnLarge;} @extend %_btn; color: #FFFFFF; @include button(#62C462); text-shadow: 0 -1px rgba(#000000,0.5);.btn { @extend %_btnLarge; } @extend %_btn; color: #FFFFFF; @include button; text-shadow: 0 -1px rgba(#000000,0.5); .btn-danger-small { @extend %_btnMedium; } @extend %_btn; color: #444444; @include button(#EE5F5B); text-shadow: 0 1px rgba(#FFFFFF,0.5); .btn-success-small { @extend %_btnSmall;} @extend %_btn; color: #FFFFFF; @include button(#62C462); text-shadow: 0 -1px rgba(#000000,0.5);.btn-large { @extend %_btn; @include button; @extend %_btnLarge; Sass Line:139 } @extend %_btnSmall; color: #FFFFFF; text-shadow: 0 -1px rgba(#000000,0.5); } color: #444444; text-shadow: 0 1px rgba(#FFFFFF,0.5); .btn-warning {} @extend %_btn; @include button(#FBB450);.btn-small { @extend %_btnMedium; @extend %_btn; color: #FFFFFF; @include button; text-shadow: 0 -1px rgba(#000000,0.5); @extend %_btnSmall; } color: #444444; text-shadow: 0 1px rgba(#FFFFFF,0.5); .btn-warning-large {} @extend %_btn; @include button(#FBB450);.btn-primary { @extend %_btnLarge; @extend %_btn; color: #FFFFFF; @include button(#1199DD); text-shadow: 0 -1px rgba(#000000,0.5); @extend %_btnMedium; } color: #FFFFFF; text-shadow: 0 -1px rgba(#000000,0.5); .btn-warning-small {} @extend %_btn; @include button(#FBB450);.btn-primary-large { @extend %_btnSmall; @extend %_btn; color: #FFFFFF; @include button(#1199DD); text-shadow: 0 -1px rgba(#000000,0.5); @extend %_btnLarge; } color: #FFFFFF; text-shadow: 0 -1px rgba(#000000,0.5);}
  94. 94. .single-class { margin-top: 250px;}.single-class .btn, .single-class .btn-large, .single-class .btn-small, .single-class .btn-primary, .single-class .btn-primary-large, .single-class .btn-primary-small, .single-class .btn-success, .single-class .btn-success-large, .single-class .btn-success-small, .single-class .btn-warning, .single-class .btn-warning-large, .single-class .btn-warning-small, .single-class .btn-danger, .single-class .btn-danger-large, .single-class .btn-danger-small { display: inline-block; padding: 0.4em 0.8em;}.single-class .btn-small, .single-class .btn-primary-small, .single-class .btn-success-small, .single-class .btn-warning-small, .single-class .btn-danger-small { border-radius: 3px; font-size: 12px;}.single-class .btn, .single-class .btn-primary, .single-class .btn-success, .single-class .btn-warning, .single-class .btn-danger{ border-radius: 4px; font-size: 16px;}.single-class .btn-large, .single-class .btn-primary-large, .single-class .btn-success-large, .single-class .btn-warning-large, .single-class .btn-danger-large { border-radius: 6px; font-size: 20px;}.single-class .btn { border: 1px solid #bcbcbc; border-bottom-color: #a2a2a2; background-color: #cbcbcb; background-repeat: repeat-x; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #cbcbcb)); /* Safari 4+, Chrome 2+ */ background-image: -webkit-linear-gradient(#f9f9f9, #cbcbcb); /* Safari 5.1+, Chrome 10+ */ background-image: linear-gradient(#f9f9f9, #cbcbcb); /* the standard */ box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 -1px rgba(255, 255, 255, 0.3); color: #444444; text-shadow: 0 1px rgba(255, 255, 255, 0.5);}.single-class .btn-large { border: 1px solid #bcbcbc; border-bottom-color: #a2a2a2; background-color: #cbcbcb; background-repeat: repeat-x; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #cbcbcb)); /* Safari 4+, Chrome 2+ */ background-image: -webkit-linear-gradient(#f9f9f9, #cbcbcb); /* Safari 5.1+, Chrome 10+ */ background-image: linear-gradient(#f9f9f9, #cbcbcb); /* the standard */ box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 -1px rgba(255, 255, 255, 0.3); color: #444444; text-shadow: 0 1px rgba(255, 255, 255, 0.5);}.single-class .btn-small { border: 1px solid #bcbcbc; border-bottom-color: #a2a2a2; background-color: #cbcbcb;...
  95. 95. .single-class { margin-top: 250px;}.single-class .btn, .single-class .btn-large, .single-class .btn-small, .single-class .btn-primary, .single-class .btn-primary-large, .single-class .btn-primary-small, .single-class .btn-success, .single-class .btn-success-large, .single-class .btn-success-small, .single-class .btn-warning, .single-class .btn-warning-large, .single-class .btn-warning-small, .single-class .btn-danger, .single-class .btn-danger-large, .single-class .btn-danger-small { display: inline-block; padding: 0.4em 0.8em;}.single-class .btn-small, .single-class .btn-primary-small, .single-class .btn-success-small, .single-class .btn-warning-small, .single-class .btn-danger-small { border-radius: 3px; font-size: 12px;}.single-class .btn, .single-class .btn-primary, .single-class .btn-success, .single-class .btn-warning, .single-class .btn-danger{ border-radius: 4px; font-size: 16px;}.single-class .btn-large, .single-class .btn-primary-large, .single-class .btn-success-large, .single-class .btn-warning-large, .single-class .btn-danger-large { border-radius: 6px; font-size: 20px;}.single-class .btn { border: 1px solid #bcbcbc; border-bottom-color: #a2a2a2; Sass Line:139 / Output css Line:244 background-color: #cbcbcb; background-repeat: repeat-x; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #cbcbcb)); /* Safari 4+, Chrome 2+ */ background-image: -webkit-linear-gradient(#f9f9f9, #cbcbcb); /* Safari 5.1+, Chrome 10+ */ background-image: linear-gradient(#f9f9f9, #cbcbcb); /* the standard */ box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 -1px rgba(255, 255, 255, 0.3); color: #444444; text-shadow: 0 1px rgba(255, 255, 255, 0.5);}.single-class .btn-large { border: 1px solid #bcbcbc; border-bottom-color: #a2a2a2; background-color: #cbcbcb; background-repeat: repeat-x; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #cbcbcb)); /* Safari 4+, Chrome 2+ */ background-image: -webkit-linear-gradient(#f9f9f9, #cbcbcb); /* Safari 5.1+, Chrome 10+ */ background-image: linear-gradient(#f9f9f9, #cbcbcb); /* the standard */ box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 -1px rgba(255, 255, 255, 0.3); color: #444444; text-shadow: 0 1px rgba(255, 255, 255, 0.5);}.single-class .btn-small { border: 1px solid #bcbcbc; border-bottom-color: #a2a2a2; background-color: #cbcbcb;...
  96. 96. <nav><ul> <li><a href="#" class="btn">Default</a></li> <li><a href="#" class="btn btn-primary">Primary</a></li> <li><a href="#" class="btn btn-success">Success</a></li> <li><a href="#" class="btn btn-warning">Warning</a></li> <li><a href="#" class="btn btn-danger">Danger</a></li></ul><ul> <li><a href="#" class="btn btn-large">Default</a></li> <li><a href="#" class="btn btn-primary btn-large">Primary</a></li> <li><a href="#" class="btn btn-success btn-large">Success</a></li> <li><a href="#" class="btn btn-warning btn-large">Warning</a></li> <li><a href="#" class="btn btn-danger btn-large">Danger</a></li></ul><ul> <li><a href="#" class="btn btn-small">Default</a></li> <li><a href="#" class="btn btn-primary btn-small">Primary</a></li> <li><a href="#" class="btn btn-success btn-small">Success</a></li> <li><a href="#" class="btn btn-warning btn-small">Warning</a></li> <li><a href="#" class="btn btn-danger btn-small">Danger</a></li></ul></nav>
  97. 97. <nav><ul> <li><a href="#" class="btn">Default</a></li> <li><a href="#" class="btn btn-primary">Primary</a></li> <li><a href="#" class="btn btn-success">Success</a></li> <li><a href="#" class="btn btn-warning">Warning</a></li> <li><a href="#" class="btn btn-danger">Danger</a></li></ul><ul> <li><a href="#" class="btn btn-large">Default</a></li> <li><a href="#" class="btn btn-primary btn-large">Primary</a></li> <li><a href="#" class="btn btn-success btn-large">Success</a></li> <li><a href="#" class="btn btn-warning btn-large">Warning</a></li> <li><a</ul> href="#" Rules:7 class="btn btn-danger btn-large">Danger</a></li><ul> <li><a href="#" class="btn btn-small">Default</a></li> <li><a href="#" class="btn btn-primary btn-small">Primary</a></li> <li><a href="#" class="btn btn-success btn-small">Success</a></li> <li><a href="#" class="btn btn-warning btn-small">Warning</a></li> <li><a href="#" class="btn btn-danger btn-small">Danger</a></li></ul></nav>
  98. 98. .btn { .btn-large { display: inline-block; border-radius: 6px; padding: 0.4em 0.8em; font-size: 20px; @include button; } border-radius: 4px; color: #444444; .btn-small { text-shadow: 0 1px rgba(#FFFFFF,0.5); border-radius: 3px; font-size: 16px; font-size: 12px;} }.btn-primary { @include button(#1199DD); color: #FFFFFF; text-shadow: 0 -1px rgba(#000000,0.5);}.btn-success { @include button(#62C462); color: #FFFFFF; text-shadow: 0 -1px rgba(#000000,0.5);}.btn-warning { @include button(#FBB450); color: #FFFFFF; text-shadow: 0 -1px rgba(#000000,0.5);}.btn-danger { @include button(#EE5F5B); color: #FFFFFF; text-shadow: 0 -1px rgba(#000000,0.5);}
  99. 99. .btn { .btn-large { display: inline-block; border-radius: 6px; padding: 0.4em 0.8em; font-size: 20px; @include button; } border-radius: 4px; color: #444444; .btn-small { text-shadow: 0 1px rgba(#FFFFFF,0.5); border-radius: 3px; font-size: 16px; font-size: 12px;} }.btn-primary { @include button(#1199DD); color: #FFFFFF; text-shadow: 0 -1px rgba(#000000,0.5);}.btn-success { @include button(#62C462);} color: #FFFFFF; Sass Line:43 text-shadow: 0 -1px rgba(#000000,0.5);.btn-warning { @include button(#FBB450); color: #FFFFFF; text-shadow: 0 -1px rgba(#000000,0.5);}.btn-danger { @include button(#EE5F5B); color: #FFFFFF; text-shadow: 0 -1px rgba(#000000,0.5);}
  100. 100. .multi-class .btn { display: inline-block; padding: 0.4em 0.8em; border: 1px solid #bcbcbc; border-bottom-color: #a2a2a2; background-color: #cbcbcb; background-repeat: repeat-x; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #cbcbcb)); /* Safari 4+, Chrome 2+ */ background-image: -webkit-linear-gradient(#f9f9f9, #cbcbcb); /* Safari 5.1+, Chrome 10+ */ background-image: linear-gradient(#f9f9f9, #cbcbcb); /* the standard */ box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 -1px rgba(255, 255, 255, 0.3); border-radius: 4px; color: #444444; text-shadow: 0 1px rgba(255, 255, 255, 0.5); font-size: 16px;}.multi-class .btn-primary { border: 1px solid #084a6b; border-bottom-color: #052a3c; background-color: #0a5e88; background-repeat: repeat-x; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1199dd), color-stop(100%, #0a5e88)); /* Safari 4+, Chrome 2+ */ background-image: -webkit-linear-gradient(#1199dd, #0a5e88); /* Safari 5.1+, Chrome 10+ */ background-image: linear-gradient(#1199dd, #0a5e88); /* the standard */ box-shadow: inset 0 1px rgba(50, 176, 239, 0.5), inset 0 -1px rgba(50, 176, 239, 0.3); color: #FFFFFF; text-shadow: 0 -1px rgba(0, 0, 0, 0.5);}.multi-class .btn-success { border: 1px solid #2f7d2f; border-bottom-color: #215821; background-color: #379337; background-repeat: repeat-x; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #379337)); /* Safari 4+, Chrome 2+ */ background-image: -webkit-linear-gradient(#62c462, #379337); /* Safari 5.1+, Chrome 10+ */ background-image: linear-gradient(#62c462, #379337); /* the standard */ box-shadow: inset 0 1px rgba(135, 210, 135, 0.5), inset 0 -1px rgba(135, 210, 135, 0.3); color: #FFFFFF; text-shadow: 0 -1px rgba(0, 0, 0, 0.5);}.multi-class .btn-warning { border: 1px solid #cc7905; border-bottom-color: #9a5c04; background-color: #ea8b05; background-repeat: repeat-x; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbb450), color-stop(100%, #ea8b05)); /* Safari 4+, Chrome 2+ */ background-image: -webkit-linear-gradient(#fbb450, #ea8b05); /* Safari 5.1+, Chrome 10+ */ background-image: linear-gradient(#fbb450, #ea8b05);...
  101. 101. .multi-class .btn { display: inline-block; padding: 0.4em 0.8em; border: 1px solid #bcbcbc; border-bottom-color: #a2a2a2; background-color: #cbcbcb; background-repeat: repeat-x; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #cbcbcb)); /* Safari 4+, Chrome 2+ */ background-image: -webkit-linear-gradient(#f9f9f9, #cbcbcb); /* Safari 5.1+, Chrome 10+ */ background-image: linear-gradient(#f9f9f9, #cbcbcb); /* the standard */ box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 -1px rgba(255, 255, 255, 0.3); border-radius: 4px; color: #444444; text-shadow: 0 1px rgba(255, 255, 255, 0.5); font-size: 16px;}.multi-class .btn-primary { border: 1px solid #084a6b; border-bottom-color: #052a3c; background-color: #0a5e88; background-repeat: repeat-x; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1199dd), color-stop(100%, #0a5e88)); /* Safari 4+, Chrome 2+ */ background-image: -webkit-linear-gradient(#1199dd, #0a5e88); /* Safari 5.1+, Chrome 10+ */ Sass Line:43 / Output css Line:87 background-image: linear-gradient(#1199dd, #0a5e88); /* the standard */ box-shadow: inset 0 1px rgba(50, 176, 239, 0.5), inset 0 -1px rgba(50, 176, 239, 0.3); color: #FFFFFF; text-shadow: 0 -1px rgba(0, 0, 0, 0.5);}.multi-class .btn-success { border: 1px solid #2f7d2f; border-bottom-color: #215821; background-color: #379337; background-repeat: repeat-x; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #379337)); /* Safari 4+, Chrome 2+ */ background-image: -webkit-linear-gradient(#62c462, #379337); /* Safari 5.1+, Chrome 10+ */ background-image: linear-gradient(#62c462, #379337); /* the standard */ box-shadow: inset 0 1px rgba(135, 210, 135, 0.5), inset 0 -1px rgba(135, 210, 135, 0.3); color: #FFFFFF; text-shadow: 0 -1px rgba(0, 0, 0, 0.5);}.multi-class .btn-warning { border: 1px solid #cc7905; border-bottom-color: #9a5c04; background-color: #ea8b05; background-repeat: repeat-x; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbb450), color-stop(100%, #ea8b05)); /* Safari 4+, Chrome 2+ */ background-image: -webkit-linear-gradient(#fbb450, #ea8b05); /* Safari 5.1+, Chrome 10+ */ background-image: linear-gradient(#fbb450, #ea8b05);...
  102. 102. Semantic vsNon-semantic
  103. 103. Non-semantic?<button class="btn btn-success btn-large">Save</button><button class="btn btn-success btn-large">Send</button>
  104. 104. Semantic!<button class="save">Save</button><button class="send">Send</button>
  105. 105. %_btn { display: inline-block; padding: 0.4em 0.8em;}%_btnLarge { border-radius: 6px; font-size: 20px;}%_btn-success-large { @extend %_btn; @include button(#62C462); @extend %_btnLarge; color: #FFFFFF; text-shadow: 0 -1px rgba(#000000,0.5);}.save { @extend %_btn-success-large;}.send { @extend %_btn-success-large;}
  106. 106. .save, .send { display: inline-block; padding: 0.4em 0.8em;}.save, .send { border-radius: 6px; font-size: 20px;}.save, .send { border: 1px solid #2f7d2f; border-bottom-color: #215821; background-color: #379337; background-repeat: repeat-x; background-image: linear-gradient(#62c462, #379337); box-shadow: inset 0 1px rgba(135, 210, 135, 0.5), inset 0 -1pxrgba(135, 210, 135, 0.3); color: #FFFFFF; text-shadow: 0 -1px rgba(0, 0, 0, 0.5);}
  107. 107. The Class shoul’d have “Semantic”? hmmm...
  108. 108. “ If you write poor CSS, a pre-processor wont make it suck less. ” Bermon Painter https://speakerdeck.com/bermonpainter/css-pre-processors-stylus-less-sass
  109. 109. Thank you!Frontrend Vol.3 powered by CyberAgent, Inc. Hiroki Tani http://www.flickr.com/photos/theenmoy/6274917102/

×