Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sass for everyday's cooking

Sass for everyday's cooking

Takuji Ikeda

January 12, 2013
Tweet

More Decks by Takuji Ikeda

Other Decks in Programming

Transcript

  1. $44 4$44DPEJOHTUZMF •Use a line break between selecters button, button:visited,

    button:hover { } button, button:visited, button:hover { } #"% (00%
  2. $44 4$44DPEJOHTUZMF •Use underscore in class names and ids •Don't

    qualify ID Rules with tag names or classes button#backButton { } #back_button { } #"% (00%
  3. •Add mixins at the beginning of selector class .comment {

    @include border-radius(2px); @include box-shadow; color: $red; font-weight: bold; } (00% $44 4$44DPEJOHTUZMF
  4. 4BSBNJYJO @include button_generator($red); @include button_generator ( $button_bg_from, $button_bg_to: $button_bg_from, $button_border:

    darken($button_bg_to, 7%), $button_text_shadow: darken($button_bg_to, 10%) ) ఆ൪ͷCVUUPO
  5. 4BSBNJYJO @include tooltip; @include tooltip ( $tooltip_width: 200px, $triangle_position: top,

    // top, right, bottom, left $triangle_distance: 100px, $triangle_size: small, // small, large ) Ͳ͜Ͱ΋UPPMUJQ
  6. @mixin button ( $button_bg_from, $button_bg_to: $button_bg_from, $button_border: darken($button_bg_to, 7%), $button_text_shadow:

    darken($button_bg_to, 10%) ){ text-shadow: 0 -1px 0 $button_text_shadow; @if ($button_border == 'none') { border: none; } @elseif ($button_border == '') { border: none; } @else { border: 1px solid $button_border; } background: $button_bg_to; @include gradient($button_bg_from, $button_bg_to); &:hover { @if ($button_border == 'none') { border: none; } @elseif ($button_border == '') { border: none; } @else { border: 1px solid $button_border; } border: 1px solid darken($button_border, 3%); @include gradient(darken($button_bg_from, 3%), darken($button_bg_to, 3%)); } } ୯ͳΔUIύʔπͰ͸ͳ ͘ඞཁͳ෦෼ͷ֦ுΛ ڐ༰͢Δ ݕূ݁Ռͷ൓ө
  7. $branding_main: #4d2200 !default; $branding_accent: #ff9933 !default; $branding_support: #faf3e3 !default; $anchor:

    #330000 !default; $anchor_visited: #845f4b !default; $body: #3c3c3c !default; $body_bg: $branding_support !default; $recipe_title: #889B00 !default; $default_border: darken($body_bg, 5%) !default; ιʔείʔυ͔Β ࢀরՄೳͳ ΨΠυϥΠϯ 4BTTΛ࢖ͬͯม਺Խ