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

CSS Study Group 2

Kerrick Long
October 30, 2014

CSS Study Group 2

Kerrick Long

October 30, 2014
Tweet

More Decks by Kerrick Long

Other Decks in Programming

Transcript

  1. Kerrick Long Things I make and do Where to find

    me online meetup.com/STLEmber Lead Front-end Developer at Second Street www. .com twitter.com/KerrickLong github.com/Kerrick
  2. /* small-screen styles */ .header { width: 100%; } @media

    (min-width: 481px) { /* large-screen styles */ .header { width: 50%; } }
  3. NESTING BASICS .foo { color: blue; .bar { color: red;

    } } .foo { color: blue; } .foo .bar { color: red; }
  4. NESTED PARENT SELECTOR .foo { color: blue; &:hover { color:

    red; } } .foo { color: blue; } .foo:hover { color: red; }
  5. NESTED PARENT SELECTOR .foo { color: blue; .baz & {

    color: red; } } .foo { color: blue; } .baz .foo { color: red; }
  6. NESTED @AT-ROOT .foo { color: blue; @at-root .bar { color:

    red; } } .foo { color: blue; } .bar { color: red; }
  7. NESTED MEDIA QUERIES .foo { color: blue; @media (screen) {

    color: red; } } .foo { color: blue; } @media (screen) { .foo { color: red; } }
  8. VARIABLES $red: #f01903; .foo { color: $red; } .bar {

    background: $red; } .foo { color: #f01903; } .bar { background: #f01903; }
  9. VARIABLE SCOPE $red: #f01903; .foo { $red: #a12014; color: $red;

    } .bar { background: $red; } .foo { color: #a12014; } .bar { background: #f01903; }
  10. VARIABLE DEFAULT $red: #f01903; .foo { $red: #a12014 !default; color:

    $red; } .bar { background: $red; } .foo { color: #f01903; } .bar { background: #f01903; }
  11. @EXTEND EVERYWHERE .foo { color: red; &:hover { border: 0

    } } .bar { @extend .foo; } .foo, .bar { color: red; } .foo:hover, .bar:hover { border: 0; }
  12. @IMPORT @import "bar"; .foo { color: red; } .bar {

    color: blue; } .bar { color: blue; } .foo { color: red; } _bar.scss foo.scss foo.css
  13. DEFAULT ARGUMENTS @mixin button($radius: 3px) { border-radius: $radius; display: inline-block;

    /* etc. */ } .button { @include button } .round { @include button(8px) } .button { border-radius: 3px; display: inline-block; /* etc. */ } .round { border-radius: 8px; display: inline-block; /* etc. */ }
  14. NAMED ARGUMENTS @mixin foo($a, $b) { /* stuff */ }

    .bar { @include foo($b: 1); } .baz { @include foo($b: 1, $a: 2); } .bar { /* stuff */ } .baz { /* stuff */ }
  15. NESTING BASICS "string #{$interpolation}" 10 * 10 <= 150 //

    true @if (true) { /* stuff */ } @else if { /* other stuff */ } @else { /* more stuff */ }
  16. CSS3 PREFIX MIX-INS @import "compass/css3"; .foo { @include border-radius(3px); }

    .foo { border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
  17. CSS3 PREFIX MIX-INS Animation Appearance Background Size Box Shadow Box

    Sizing Font Face Filter Opacity Transform Transition Text Shadow Columns
  18. CSS3 PREFIX MIX-INS .foo { background: image-url('a.png'); } .foo {

    background: url('// media.secondstreet.com/ StaticContent/images/a.png'); }
  19. COMPASS UTILITIES Saturation Lightness Color Stops Prefixes Inline Images Font

    Face √ Tint sin/cos/tan Enumerate Image URL Font Files