CSS Study Group 2

Transcript

1. 1.

   CSS3 & SASS CSS STUDY GROUP WITH COMPASS

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

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

   }
4. 4.

   CSS 3

5. 5.

   CSS LEVEL 3 MEDIA QUERIES

6. 6.

   None
7. 7.

   None
8. 8.

   /* small-screen styles */ .header { width: 100%; } @media

   (min-width: 481px) { /* large-screen styles */ .header { width: 50%; } }
9. 9.

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

   LOGICAL IF
10. 10.

    @media (min-width: 481px) and (max-width: 1280px) { .header { width:

    50%; } } LOGICAL AND
11. 11.

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

    } } LOGICAL OR
12. 12.

    @media not all and (min-width: 481px) { .header { width:

    50%; } } LOGICAL NOT
13. 13.

    CSS LEVEL 3 VENDOR PREFIXES

14. 14.

    None
15. 15.

    None
16. 16.

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

17. 17.

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

    3px; }
18. 18.

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

    3px; }
19. 19.

    CSS LEVEL 3 MODULES

20. 20.

    CSS 3 BACKGROUNDS

21. 21.

    CSS 3 BACKGROUNDS

22. 22.

    CSS 3 BACKGROUNDS

23. 23.

    CSS 3 FONTS Web-safe Fonts

24. 24.

    CSS 3 FONTS Awesome Fonts! @font-face { font-family: 'Jazz'; src:

    url('jazz.woff') format('woff') }
25. 25.

    CSS 3 BORDER-RADIUS

26. 26.

    CSS 3 BOX-SHADOW

27. 27.

    CSS 3 OPACITY

28. 28.

    SASS

29. 29.

    SASSY CSS NESTING

30. 30.

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

    } } .foo { color: blue; } .foo .bar { color: red; }
31. 31.

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

    red; } } .foo { color: blue; } .foo:hover { color: red; }
32. 32.

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

    color: red; } } .foo { color: blue; } .baz .foo { color: red; }
33. 33.

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

    red; } } .foo { color: blue; } .bar { color: red; }
34. 34.

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

    color: red; } } .foo { color: blue; } @media (screen) { .foo { color: red; } }
35. 35.

    SASSY CSS VARIABLES

36. 36.

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

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

    VARIABLE SCOPE $red: #f01903; .foo { $red: #a12014; color: $red;

    } .bar { background: $red; } .foo { color: #a12014; } .bar { background: #f01903; }
38. 38.

    VARIABLE DEFAULT $red: #f01903; .foo { $red: #a12014 !default; color:

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

    SASSY CSS @EXTEND

40. 40.

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

    } .foo, .bar { color: red; }
41. 41.

    @EXTEND EVERYWHERE .foo { color: red; &:hover { border: 0

    } } .bar { @extend .foo; } .foo, .bar { color: red; } .foo:hover, .bar:hover { border: 0; }
42. 42.

    SASSY CSS @IMPORT

43. 43.

    @IMPORT @import "bar"; .foo { color: red; } .bar {

    color: blue; } .bar { color: blue; } .foo { color: red; } _bar.scss foo.scss foo.css
44. 44.

    @IMPORT foo.scss _bar.scss foo.css

45. 45.

    SASSY CSS MIX-INS

46. 46.

    USING MIX-INS .foo { @include button(3px); } .foo { border-radius:

    3px; display: inline-block; /* etc. */ }
47. 47.

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

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

    NAMED ARGUMENTS @mixin foo($a, $b) { /* stuff */ }

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

    SASSY CSS SASS SCRIPT

51. 51.

    NESTING BASICS "string #{$interpolation}" 10 * 10 <= 150 //

    true @if (true) { /* stuff */ } @else if { /* other stuff */ } @else { /* more stuff */ }
52. 52.

    COMPASS

53. 53.

    COMPASS STYLE CSS 3

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

    CSS3 PREFIX MIX-INS Animation Appearance Background Size Box Shadow Box

    Sizing Font Face Filter Opacity Transform Transition Text Shadow Columns
56. 56.

    COMPASS STYLE HELPERS

57. 57.

    CSS3 PREFIX MIX-INS .foo { background: image-url('a.png'); } .foo {

    background: url('// media.secondstreet.com/ StaticContent/images/a.png'); }
58. 58.

    COMPASS UTILITIES Saturation Lightness Color Stops Prefixes Inline Images Font

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

    None