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

CSS Pre-Processors: Stylus, Less & Sass

CSS Pre-Processors: Stylus, Less & Sass

Given originally at http://frontenddesignconference.com.

Updated for:

http://eduiconf.org/
http://ncdevcon.com/
http://www.fitc.ca/unleashed
http://futureofwebdesign.com/nyc-2013/

An overview of the popular pre-processors: Stylus, Less & Sass, with features subdivided up into easy to learn sections of beginner, intermediate and advanced.

Bermon Painter

April 27, 2014
Tweet

More Decks by Bermon Painter

Other Decks in Programming

Transcript

  1. CSS PRE-PROCESSORS
    Sass / Less / Stylus

    View full-size slide

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

    View full-size slide

  3. CSS PRE-PROCESSORS
    What is a Preprocessor?

    View full-size slide

  4. @bermonpainter #teamsass

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. COMMAND LINE

    View full-size slide

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

    View full-size slide

  9. COMMAND LINE


    $ npm install less
    $ lessc style.less
    Less

    View full-size slide

  10. COMMAND LINE


    $ npm install stylus
    $ stylus -c style.styl
    Stylus

    View full-size slide

  11. 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 full-size slide

  12. COMPILING
    Local

    View full-size slide

  13. COMPILING
    On Deploy

    View full-size slide

  14. COMPILING
    On Request

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. BEGINNER
    nav {
    width: 200px;
    }

    nav ul {
    list-style: none;
    }

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

    View full-size slide

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

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

    View full-size slide

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

    color #ccc

    View full-size slide

  27. BEGINNER
    nav {
    width: 200px;
    }

    nav ul {
    list-style: none;
    }

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

    View full-size slide

  28. BEGINNER Nesting
    Pay attention to specificity

    View full-size slide

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

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

    View full-size slide

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

    color #ccc

    View full-size slide

  31. BEGINNER
    nav {
    width: 200px;
    }

    nav ul {
    list-style: none;
    }

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

    View full-size slide

  32. BEGINNER
    nav {

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

    View full-size slide

  33. BEGINNER
    nav {

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

    View full-size slide

  34. BEGINNER
    nav 

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

    View full-size slide

  35. 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 full-size slide

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

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

    View full-size slide

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

    .touch &
    width 100%
    Reference Selector - Stylus

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. INTERMEDIATE

    View full-size slide

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

    View full-size slide

  44. 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 full-size slide

  45. 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 full-size slide

  46. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  52. 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 full-size slide

  53. 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 full-size slide

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

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

    View full-size slide

  55. 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 full-size slide

  56. 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 full-size slide

  57. 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 full-size slide

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

    View full-size slide

  59. 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 full-size slide

  60. 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 full-size slide

  61. 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 full-size slide

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

    View full-size slide

  63. ADVANCED
    when
    Control Directives – Less

    View full-size slide

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

    View full-size slide

  65. 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 full-size slide

  66. 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 full-size slide

  67. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  70. 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 full-size slide

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

    View full-size slide

  72. 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 full-size slide

  73. 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 full-size slide

  74. 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 full-size slide

  75. 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 full-size slide

  76. 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 full-size slide

  77. 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 full-size slide

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

    View full-size slide

  79. 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 full-size slide

  80. 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 full-size slide

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

    View full-size slide