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

CSS Study Group 2

CSS Study Group 2

Kerrick Long

October 30, 2014
Tweet

More Decks by Kerrick Long

Other Decks in Programming

Transcript

  1. CSS3 & SASS
    CSS STUDY GROUP
    WITH COMPASS

    View Slide

  2. 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

    View Slide

  3. selector {
    -prefix-property: value;
    selector {
    @include mixin($arg: 3);
    }
    }

    View Slide

  4. CSS 3

    View Slide

  5. CSS LEVEL 3
    MEDIA QUERIES

    View Slide

  6. View Slide

  7. View Slide

  8. /* small-screen styles */
    .header { width: 100%; }
    @media (min-width: 481px) {
    /* large-screen styles */
    .header { width: 50%; }
    }

    View Slide

  9. @media (min-width: 481px) {
    .header { width: 50%; }
    }
    LOGICAL IF

    View Slide

  10. @media (min-width: 481px) and
    (max-width: 1280px) {
    .header { width: 50%; }
    }
    LOGICAL AND

    View Slide

  11. @media (min-width: 481px),
    (max-width: 1280px) {
    .header { width: 50%; }
    }
    LOGICAL OR

    View Slide

  12. @media not all and
    (min-width: 481px) {
    .header { width: 50%; }
    }
    LOGICAL NOT

    View Slide

  13. CSS LEVEL 3
    VENDOR PREFIXES

    View Slide

  14. View Slide

  15. View Slide

  16. .button, button {
    border-radius: 3px;
    }

    View Slide

  17. .button, button {
    border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    }

    View Slide

  18. .button, button {
    border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    }

    View Slide

  19. CSS LEVEL 3
    MODULES

    View Slide

  20. CSS 3 BACKGROUNDS

    View Slide

  21. CSS 3 BACKGROUNDS

    View Slide

  22. CSS 3 BACKGROUNDS

    View Slide

  23. CSS 3 FONTS
    Web-safe Fonts

    View Slide

  24. CSS 3 FONTS
    Awesome Fonts!
    @font-face {
    font-family: 'Jazz';
    src: url('jazz.woff') format('woff')
    }

    View Slide

  25. CSS 3 BORDER-RADIUS

    View Slide

  26. CSS 3 BOX-SHADOW

    View Slide

  27. CSS 3 OPACITY

    View Slide

  28. SASS

    View Slide

  29. SASSY CSS
    NESTING

    View Slide

  30. NESTING BASICS
    .foo {
    color: blue;
    .bar {
    color: red;
    }
    }
    .foo {
    color: blue;
    }
    .foo .bar {
    color: red;
    }

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  35. SASSY CSS
    VARIABLES

    View Slide

  36. VARIABLES
    $red: #f01903;
    .foo {
    color: $red;
    }
    .bar {
    background: $red;
    }
    .foo {
    color: #f01903;
    }
    .bar {
    background: #f01903;
    }

    View Slide

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

    View Slide

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

    View Slide

  39. SASSY CSS
    @EXTEND

    View Slide

  40. @EXTEND
    .foo {
    color: red;
    }
    .bar {
    @extend .foo;
    }
    .foo, .bar {
    color: red;
    }

    View Slide

  41. @EXTEND EVERYWHERE
    .foo {
    color: red;
    &:hover { border: 0 }
    }
    .bar {
    @extend .foo;
    }
    .foo, .bar {
    color: red;
    }
    .foo:hover, .bar:hover {
    border: 0;
    }

    View Slide

  42. SASSY CSS
    @IMPORT

    View Slide

  43. @IMPORT
    @import "bar";
    .foo {
    color: red;
    }
    .bar {
    color: blue;
    }
    .bar {
    color: blue;
    }
    .foo {
    color: red;
    }
    _bar.scss
    foo.scss foo.css

    View Slide

  44. @IMPORT
    foo.scss
    _bar.scss
    foo.css

    View Slide

  45. SASSY CSS
    MIX-INS

    View Slide

  46. USING MIX-INS
    .foo {
    @include button(3px);
    }
    .foo {
    border-radius: 3px;
    display: inline-block;
    /* etc. */
    }

    View Slide

  47. CREATING MIX-INS
    @mixin button($radius) {
    border-radius: $radius;
    display: inline-block;
    /* etc. */
    }

    View Slide

  48. 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. */
    }

    View Slide

  49. NAMED ARGUMENTS
    @mixin foo($a, $b) {
    /* stuff */
    }
    .bar {
    @include foo($b: 1);
    }
    .baz {
    @include foo($b: 1, $a: 2);
    }
    .bar {
    /* stuff */
    }
    .baz {
    /* stuff */
    }

    View Slide

  50. SASSY CSS
    SASS SCRIPT

    View Slide

  51. NESTING BASICS
    "string #{$interpolation}"
    10 * 10 <= 150 // true
    @if (true) { /* stuff */ }
    @else if { /* other stuff */ }
    @else { /* more stuff */ }

    View Slide

  52. COMPASS

    View Slide

  53. COMPASS STYLE
    CSS 3

    View Slide

  54. 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;
    }

    View Slide

  55. CSS3 PREFIX MIX-INS
    Animation Appearance
    Background Size
    Box Shadow
    Box Sizing
    Font Face Filter
    Opacity
    Transform
    Transition
    Text Shadow Columns

    View Slide

  56. COMPASS STYLE
    HELPERS

    View Slide

  57. CSS3 PREFIX MIX-INS
    .foo {
    background: image-url('a.png');
    }
    .foo {
    background: url('//
    media.secondstreet.com/
    StaticContent/images/a.png');
    }

    View Slide

  58. COMPASS UTILITIES
    Saturation Lightness
    Color Stops
    Prefixes
    Inline Images
    Font Face √
    Tint
    sin/cos/tan
    Enumerate
    Image URL Font Files

    View Slide

  59. View Slide