CSS Pre-Processors: Stylus, Less & Sass

Transcript

1. CSS PRE-PROCESSORS
   Sass / Less / Stylus
   

   View Slide

2. TOPICS
   1. What is a preprocessor
   2. Preprocessors (Less, Sass, Stylus)
   3. Setup
   4. Features (beginner, intermediate, advanced)
   5. Frameworks
   

   View Slide

3. CSS PRE-PROCESSORS
   What is a Preprocessor?
   

   View Slide

4. @bermonpainter #teamsass
   

   View Slide

5. master.scss
   _normalize.scss
   _typography.scss
   _grid.scss
   _modules.scss
   _theme.scss
   master.css
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. CSS PRE-PROCESSORS
   If you write sucky CSS,
   a pre-processor won’t
   make it suck less.
   

   View Slide

10. QUICK START
    

    View Slide

11. GUI APPS
    

    View Slide

12. QUICK START
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. COMMAND LINE
    

    View Slide

17. COMMAND LINE
    $ gem install sass
    $ mv style.css style.scss
    $ sass style.scss style.css
    Sass
    

    View Slide

18. COMMAND LINE
    
    
    $ npm install less
    $ lessc style.less
    Less
    

    View Slide

19. COMMAND LINE
    
    
    $ npm install stylus
    $ stylus -c style.styl
    Stylus
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. WISEHEA RT D ESIGN →
    The designer’s guide
    to the OSX command
    prompt
    A tutorial for the modern web
    designer
    The command prompt. Once the lofty domain of that guy you know with the
    computer science degree. Now more and more the every day domain of the
    hacker web designer.
    Perhaps you’ve mastered a little Javascript or PHP, but you are realizing that
    the cool kids are playing around with stuff that is only accessible to people
    who are comfortable with the command prompt. Or, perhaps you are just
    

    View Slide

25. COMPILING
    

    View Slide

26. COMPILING
    Local
    

    View Slide

27. COMPILING
    On Deploy
    

    View Slide

28. COMPILING
    On Request
    

    View Slide

29. COMPILING
    On the Client
    (don’t do this)
    

    View Slide

30. SYNTAX
    

    View Slide

31. SYNTAX
    .widget {
    margin: 20px 10px;
    }
    !
    !
    .widget
    margin: 20px 10px
    Sass
    

    View Slide

32. SYNTAX
    .widget {
    margin: 20px 10px;
    }
    Less
    

    View Slide

33. SYNTAX
    .widget {
    margin: 20px 10px;
    }
    !
    .widget
    margin 20px 10px
    Stylus
    

    View Slide

34. BEGINNER
    

    View Slide

35. BEGINNER
    style.css > style.scss | style.less | style.styl
    Creating a pre-processed file
    Just change the file extension
    

    View Slide

36. BEGINNER
    $colorPrimary: #333;
    $siteWidth: 960px;
    !
    body {
    color: $colorPrimary;
    width: $siteWidth;
    }
    Variables – Sass
    

    View Slide

37. BEGINNER
    @colorPrimary: #333;
    @siteWidth: 960px;
    !
    body {
    color: @colorPrimary;
    width: @siteWidth;
    }
    Variables – Less
    

    View Slide

38. BEGINNER
    colorPrimary #333
    siteWidth 960px
    !
    body
    color colorPrimary
    width siteWidth
    Variables – Stylus
    

    View Slide

39. BEGINNER
    body {
    color: #333;
    width: 960px;
    }
    Variables – Output
    

    View Slide

40. BEGINNER
    nav {
    width: 200px;
    }

    nav ul {
    list-style: none;
    }

    nav ul li {
    background: #ccc;
    }
    nav ul li a{
    color: #333;
    }
    Nesting - CSS
    

    View Slide

41. BEGINNER
    nav {
    width: 200px;
    !
    ul {
    list-style: none;
    !
    li {
    background: #ccc;
    !
    a {

    color: #ccc;
    }
    }
    }
    }
    Nesting - Sass/Less
    

    View Slide

42. BEGINNER Nesting - Stylus
    nav
    width 200px
    !
    ul
    list-style none
    !
    li
    background #ccc
    !
    a 

    color #ccc
    

    View Slide

43. BEGINNER
    nav {
    width: 200px;
    }

    nav ul {
    list-style: none;
    }

    nav ul li {
    background: #ccc;
    }
    nav ul li a{
    color: #333;
    }
    Nesting - Output
    

    View Slide

44. BEGINNER Nesting
    Pay attention to specificity
    

    View Slide

45. BEGINNER
    nav {
    width: 200px;
    !
    ul {
    list-style: none;
    }
    li {
    background: #ccc;
    }
    a {

    color: #ccc;
    }
    }
    Nesting - Sass/Less
    

    View Slide

46. BEGINNER Nesting - Stylus
    nav
    width 200px
    !
    ul
    list-style none
    !
    li
    background #ccc
    !
    a 

    color #ccc
    

    View Slide

47. BEGINNER
    nav {
    width: 200px;
    }

    nav ul {
    list-style: none;
    }

    nav li {
    background: #ccc;
    }
    nav a{
    color: #333;
    }
    Nesting - Output
    

    View Slide

48. BEGINNER
    nav {

    margin: 0; padding: 20px;
    a{
    color: #000;
    }
    a:hover,
    a:focus {
    color: #999;
    }
    a:active {
    color: #333;
    }
    }
    Reference Selector
    

    View Slide

49. BEGINNER
    nav {

    margin: 0;
    padding: 20px;
    a{
    color: #000;
    &:hover,
    &:focus {
    color: #999;
    }
    !
    &:active {
    color: #333;
    }
    }
    }
    Reference Selector - Sass/Less
    

    View Slide

50. BEGINNER
    nav 

    margin 0
    padding 20px
    !
    a
    color #000
    !
    &:hover,
    &:focus
    color #999
    !
    &:active
    color #333
    Reference Selector - Stylus
    

    View Slide

51. BEGINNER
    nav {

    margin: 0;
    padding: 20px;
    }
    nav a{
    color: #000;
    }
    nav a:hover,
    nav a:focus {
    color: #999;
    }
    nav a:active {
    color: #333;
    }
    Reference Selector - Output
    

    View Slide

52. BEGINNER
    nav {
    margin: 0;
    padding: 20px;
    !
    .ie6 & {
    padding: 10px;
    }
    .ie7 & {
    padding: 20px;
    }

    .touch & {
    width: 100%;
    }
    }
    Reference Selector - Sass/Less
    

    View Slide

53. BEGINNER
    nav
    margin 0
    padding 20px
    !
    .ie6 &
    padding 10px
    .ie7 &
    padding 20px
    

    .touch &
    width 100%
    Reference Selector - Stylus
    

    View Slide

54. BEGINNER
    nav {
    margin: 0;
    padding: 20px;
    }
    .ie6 nav{
    padding: 10px;
    }
    .ie7 nav {
    padding: 20px;
    }

    .touch nav {
    width: 100%;
    }
    Reference Selector - Output
    

    View Slide

55. master.scss
    _normalize.scss
    _typography.scss
    _grid.scss
    _modules.scss
    _theme.scss
    master.css
    Title Text @import
    BEGINNER
    

    View Slide

56. BEGINNER
    @import "setup";
    @import "reset";
    @import "base";
    @import "layout";
    @import "typography";
    @import "theme";
    @import – Sass/Less
    

    View Slide

57. BEGINNER
    @import "setup"
    @import "reset"
    @import "base"
    @import "layout"
    @import "typography"
    @import "theme"
    @import – Stylus
    

    View Slide

58. INTERMEDIATE
    

    View Slide

59. INTERMEDIATE
    .box {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    }
    Mixins - CSS
    

    View Slide

60. INTERMEDIATE
    @mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
    }
    .box {
    @include border-radius(5px);
    }
    Mixins - Sass
    

    View Slide

61. INTERMEDIATE
    .border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
    }
    .box {
    .border-radius(5px);
    }
    Mixins - Less
    

    View Slide

62. INTERMEDIATE
    border-radius radius
    -webkit-border-radius radius
    -moz-border-radius radius
    -ms-border-radius radius
    -o-border-radius radius
    border-radius radius
    !
    .box
    border-radius 5px
    Mixins - Stylus
    

    View Slide

63. INTERMEDIATE
    .box {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    }
    Mixins - Output
    

    View Slide

64. INTERMEDIATE
    .borders {
    border: 1px solid #efefef;
    padding: 10px;
    }
    p {
    @extend .borders;
    font-size: 20px;
    }
    ul, ol {
    @extend .borders;
    text-transform: uppercase;
    }
    @extend – Sass
    

    View Slide

65. INTERMEDIATE
    .borders {
    border: 1px solid #efefef;
    padding: 10px;
    }
    p {
    &:extend(.borders);
    font-size: 20px;
    }
    ul, ol {
    &:extend(.borders);
    text-transform: uppercase;
    }
    :extend – Less
    

    View Slide

66. INTERMEDIATE
    .borders
    border 1px solid #efefef
    padding 10px
    !
    p
    @extend .borders
    font-size 20px
    !
    ul, ol
    @extend .borders
    text-transform uppercase
    @extend – Stylus
    

    View Slide

67. INTERMEDIATE
    .borders, p, ul, ol {
    border: 1px solid #efefef;
    padding: 10px;
    }
    p {

    font-size: 20px;
    }
    ul, ol {
    text-transform: uppercase;
    }
    @extend – Output
    

    View Slide

68. INTERMEDIATE
    %borders {
    border: 1px solid #efefef;
    padding: 10px;
    }
    p {
    @extend %borders;
    font-size: 20px;
    }
    ul, ol {
    @extend %borders;
    text-transform: uppercase;
    }
    @extend + Placeholder – Sass
    

    View Slide

69. INTERMEDIATE
    %borders
    border 1px solid #efefef
    padding 10px
    !
    p
    @extend %borders
    font-size 20px
    !
    ul, ol
    @extend %borders
    text-transform uppercase
    @extend + Placeholder – Stylus
    

    View Slide

70. INTERMEDIATE
    p, ul, ol {
    border: 1px solid #efefef;
    padding: 10px;
    }
    p {

    font-size: 20px;
    }
    ul, ol {
    text-transform: uppercase;
    }
    @extend – Stylus
    

    View Slide

71. ADVANCED
    

    View Slide

72. ADVANCED
    $grid-columns: 12;
    $grid-width: 960px;
    !
    @function calculate-column-width($cols) {
    @return (($grid-width / $grid-columns) * $cols / $grid-width) * 100%;
    }
    !
    #container {
    margin: 0 auto;
    width: 100%;
    }
    article {
    float: left;
    width: calculate-column-width(8);
    }
    aside {
    float: right;
    width: calculate-column-width(4);
    }
    Functions – Sass
    

    View Slide

73. ADVANCED
    @grid-columns: 12;
    @grid-width: 960px;
    !
    .calculate-column-width(@cols) {
    width: (((@grid-width / @grid-columns) * @cols / @grid-width) * 100%);
    }
    !
    #container {
    margin: 0 auto;
    width: 100%;
    }
    article {
    float: left;
    .calculate-column-width(8);
    }
    aside {
    float: right;
    .calculate-column-width(4);
    }
    Functions – Less
    

    View Slide

74. ADVANCED
    grid-columns 12
    grid-width 960px
    !
    calculate-column-width(cols)
    ((grid-width / grid-columns) * cols / grid-width) * 100%
    !
    #container
    margin 0 auto
    width 100%
    !
    article
    float left
    width calculate-column-width(8)
    !
    aside
    float right
    width calculate-column-width(4)
    Functions – Stylus
    

    View Slide

75. ADVANCED
    #container {
    margin: 0 auto;
    width: 100%;
    }
    article {
    float: left;
    width: 66.66667%;
    }
    aside {
    float: right;
    width: 33.33333%;
    }
    Functions – Output
    

    View Slide

76. ADVANCED
    rgba($color, $alpha)
    hue($color)
    saturation($color)
    lightness($color)
    adjust-hue($color, $degrees)
    lighten($color, $amount)
    darken($color, $amount)
    saturate($color, $amount)
    desaturate($color, $amount)
    grayscale($color)
    complement($color)
    invert($color)
    Color Functions – Sass
    

    View Slide

77. ADVANCED
    lighten(@color, amount);
    darken(@color, amount);
    saturate(@color, amount);
    desaturate(@color, amount);
    fadein(@color, amount);
    fadeout(@color, amount);
    fade(@color, amount);
    spin(@color, amount);
    Color Functions – Less
    

    View Slide

78. ADVANCED
    rgba(color, alpha)
    lighten(color, amount)
    darken(color, amount)
    desaturate(color, amount)
    saturate(color, amount)
    invert(color)
    hue(color)
    saturation(color)
    lightness(color)
    Color Functions – Stylus
    

    View Slide

79. ADVANCED
    @if
    @else if
    @else
    @then
    @for
    @each
    @while
    Control Directives – Sass
    

    View Slide

80. ADVANCED
    when
    Control Directives – Less
    

    View Slide

81. View Slide

82. ADVANCED
    if
    else if
    else
    unless
    for
    Control Directives – Stylus
    

    View Slide

83. ADVANCED
    @mixin buttons($color, $type) {
    @if $type == "flat" {
    background-color: $color;
    } @else if $type == "gradient" {
    background: linear-gradient($color, darken($color, 20%));
    } @else if $type == "glossy" {
    background: linear-gradient($color 50%,darken($color, 20%) 50%);
    } @else {
    background-color: $color;
    }
    }
    .button {
    @include buttons(green, glossy);
    }
    if, else – Sass
    

    View Slide

84. ADVANCED
    .buttons (@color, @type) when (@type == "flat") {
    background-color: @color;
    }
    .buttons (@color, @type) when (@type == "gradient") {
    background: linear-gradient(@color, darken(@color, 20%));
    }
    .buttons (@color, @type) when (@type == "glossy") {
    background: linear-gradient(@color 50%, darken(@color, 20%) 50%);
    }
    !
    .button {
    .buttons(green, glossy);
    }
    when (if, else) – Less
    

    View Slide

85. ADVANCED
    buttons(color, type)
    if type == "flat"
    background-color color
    else if type == "gradient"
    background linear-gradient(color, darken(color, 20%))
    else if type == "glossy"
    background linear-gradient(color 50%,darken(color, 20%) 50%)
    else
    background-color color
    !
    .button
    buttons(green, glossy)
    if, else – Stylus
    

    View Slide

86. ADVANCED
    .button {
    background: linear-gradient(#008000 50%, #001a00 50%);
    }
    if, else – Output
    

    View Slide

87. ADVANCED
    @for $i from 1px to 5px {
    .border-#{$i} {
    border: $i solid #000;
    }
    }
    for loop – Sass
    

    View Slide

88. ADVANCED
    .border-1px {
    border: 1px solid black;
    }
    .border-2px {
    border: 2px solid black;
    }
    .border-3px {
    border: 3px solid black;
    }
    .border-4px {
    border: 4px solid black;
    }
    for loop – Output
    

    View Slide

89. ADVANCED
    $emotions: happy sad excited mustached;
    !
    @each $emotion in $emotions {
    .feeling-#{$emotion} {
    background-image: url("images/feeling-#{$emotion}");
    }
    }
    each loop – Sass
    

    View Slide

90. ADVANCED
    .feeling-happy {
    background-image: url("images/feeling-happy");
    }
    .feeling-sad {
    background-image: url("images/feeling-sad");
    }
    .feeling-excited {
    background-image: url("images/feeling-excited");
    }
    .feeling-mustached {
    background-image: url("images/feeling-mustached");
    }
    each loop – Output
    

    View Slide

91. ADVANCED
    $small-breakpoint: 480px;
    $medium-breakpoint: 768px;
    $large-breakpoint: 1024px;
    !
    aside {
    width: 100%;
    @media screen and (min-width: $small-breakpoint) {
    width: 100px;
    float: right;
    }
    @media screen and (min-width: $medium-breakpoint) {
    width: 200px;
    }
    @media screen and (min-width: $large-breakpoint) {
    width: 400px;
    }
    }
    Media Queries – Sass
    

    View Slide

92. ADVANCED
    @small-breakpoint: 480px;
    @medium-breakpoint: 768px;
    @large-breakpoint: 1024px;
    !
    aside {
    width: 100%;
    @media screen and (min-width: @small-breakpoint) {
    width: 100px;
    float: right;
    }
    @media screen and (min-width: @medium-breakpoint) {
    width: 200px;
    }
    @media screen and (min-width: @large-breakpoint) {
    width: 400px;
    }
    }
    Media Queries – Less
    

    View Slide

93. ADVANCED
    small-breakpoint 480px
    medium-breakpoint 768px
    large-breakpoint 1024px
    !
    aside
    width 100%
    !
    @media screen and (min-width small-breakpoint)
    width 100px
    float right
    !
    @media screen and (min-width medium-breakpoint)
    width 200px
    @media screen and (min-width large-breakpoint)
    width 400px
    Media Queries – Stylus
    

    View Slide

94. ADVANCED
    aside {
    width: 100%;
    }
    @media screen and (min-width: 480px) {
    aside {
    width: 100px;
    float: right;
    }
    }
    @media screen and (min-width: 768px) {
    aside {
    width: 200px;
    }
    }
    @media screen and (min-width: 1024px) {
    aside {
    width: 400px;
    }
    }
    Media Queries – Output
    

    View Slide

95. ADVANCED
    @mixin respond-to($name){
    @if $name == small-screen {
    @media only screen and (min-width: 320px) {
    @content
    }
    }
    @if $name == large-screen {
    @media only screen and (min-width: 960px) {
    @content
    }
    }
    }
    aside {
    width: 25%
    @include respond-to(small-screen) {
    width: 100%;
    }
    }
    @content – Sass
    

    View Slide

96. ADVANCED
    aside {
    width: 25%
    }
    !
    @media only screen and (min-width: 320px) {
    aside {
    width: 100%
    }
    }
    @content – Output
    

    View Slide

97. ADVANCED
    $icons: (
    home: e601,
    about: e602,
    services: e603
    );
    !
    @each $icon-name, $icon-keycode in $icons {
    .icon-#{$icon-name} {
    &:before {
    content: "#{$icon-keycode}";
    }
    }
    }
    Hash Maps – Sass
    

    View Slide

98. ADVANCED
    icons = {
    home: e601,
    about: e602,
    services: e603
    }
    !
    for icon-name, icon-keycode in icons {
    .icon-{icon-name} {
    &:before {
    content: “\{icon-keycode}";
    }
    }
    }
    Hash Maps – Stylus
    

    View Slide

99. ADVANCED
    .icon-home:before {
    content: “\e601";
    }
    .icon-about:before {
    content: “\e602";
    }
    .icon-services:before {
    content: “\e603";
    }
    Hash Maps – Output
    

    View Slide

100. FRAMEWORKS
     

     View Slide

101. View Slide

102. View Slide

103. View Slide

104. View Slide

105. View Slide

106. View Slide

107. View Slide

108. View Slide

109. View Slide

110. View Slide

111. fin.
     

     View Slide