Intro to Sass

Intro to Sass

Curious about preprocessors? Meet Sass, the most mature, stable, and powerful professional grade CSS extension language in the world. I'll go through the basics and show you how Sass can give you CSS superpowers, both for small and large scale projects.

Slides from Devstaff meetup in Heraklion, Greece.

1b8ad785acdd1ce1c99914b1c2a4e10e?s=128

Zaharenia Atzitzikaki

October 13, 2016
Tweet

Transcript

  1. 6.

    CSS .module { ... } .module .title { ... }

    .module .title span { ... } .module .footer { ... }
  2. 9.
  3. 10.
  4. 14.
  5. 15.

    Sass // SCSS syntax $color: #f00; .link { color: $color;

    text-decoration: underline; &:hover { text-decoration: none; } } // Sass syntax $color: #f00 .link color: $color text-decoration: underline &:hover text-decoration: none
  6. 21.
  7. 22.
  8. 25.
  9. 26.

    Sass .modal { background-color: #fff; border: 1px solid rgba(0, 0,

    0, 0.3); .modal-header { padding: 15px 20px; border-bottom: 1px solid #eee; } .modal-footer { padding: 14px 15px 15px; text-align: center; } }
  10. 27.

    CSS .modal { background-color: #fff; border: 1px solid rgba(0, 0,

    0, 0.3); } .modal .modal-header { padding: 15px 20px; border-bottom: 1px solid #eee; } .modal .modal-footer { padding: 14px 15px 15px; text-align: center; }
  11. 29.

    Sass body { .container { .content { .articles { &

    > .post { .title { h1 { a { } } } .content { p { ... } ul { li { ... } }
  12. 30.

    Sass } h4 { a { ... } } p

    { a { ... } } ul { li { ... } } } } } } } }
  13. 31.
  14. 33.

    Sass .box { .box-section a { color: fuchsia; text-decoration: none;

    &:hover { text-decoration: underline; } &.disabled { color: grey; } } }
  15. 34.

    CSS .box .box-section a { color: fuchsia; text-decoration: none; }

    .box .box-section a:hover { text-decoration: underline; } .box .box-section a.disabled { color: grey; }
  16. 36.

    .box { … &-header { … } } .box {

    … } .box-header { … }
  17. 38.

    .box { … .checkout & { … } } .box

    { … } .checkout .box { … }
  18. 40.

    .box { … & + & { … } }

    .box { … } .box + .box { … }
  19. 41.
  20. 42.
  21. 44.
  22. 45.

    Sass @mixin box { background-color: #fff; border: 1px solid #ccc;

    border-radius: 4px; width: 100px; height: 100px; } .box { @include box; }
  23. 46.

    Sass @mixin box($width, $height: $width) { background-color: #fff; border: 1px

    solid #ccc; border-radius: 4px; width: $width; height: $height; } .box { @include box(100px, 300px); }
  24. 49.
  25. 51.

    Sass .alert { padding: 15px; font-size: 1.2em; line-height: 1; color:

    #fff; background: $color-accent; @include shadow(0, 1px, 2px, rgba(0,0,0,.5)); @include rounded(10px); } .alert-positive { background: #9c3; } <div class="alert alert-positive">...</div>
  26. 52.

    Sass .alert { padding: 15px; font-size: 1.2em; line-height: 1; color:

    #fff; background: $color-accent; @include shadow(0, 1px, 2px, rgba(0,0,0,.5)); @include rounded(10px); } .alert-positive { @extend .alert; background: #9c3; } <div class="alert-positive">...</div>
  27. 53.

    CSS .alert, .alert-positive { padding: 15px; font-size: 1.2em; line-height: 1;

    color: #fff; background: yellow; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); border-radius: 10px; } .alert-positive { background: #9c3; }
  28. 55.

    Sass .top-navigation, .subnav, .sidenav, #header, .main-footer, .inbox__actions, .feed__item__selector input[type="checkbox"], .feed__item__main

    .avatar, .feed__item__main .control-faux, .feed__item__actions, .feed__item__title .js-visibility, .feed__item__preview__text, .scroll-shelf, .profile__toolbar, .profile__footer, .profile__section__header .download, .overlay__shelf,
  29. 58.

    Sass %alert { padding: 15px; font-size: 1.2em; line-height: 1; color:

    #fff; background: $color-accent; @include shadow(0, 1px, 2px, rgba(0,0,0,.5)); @include rounded(10px); } .alert-positive { @extend %alert; background: #9c3; } .alert-negative { @extend %alert; background: #c00; }
  30. 59.

    Sass .alert-positive, .alert-negative { padding: 15px; font-size: 1.2em; line-height: 1;

    color: #fff; background: $color-accent; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); border-radius: 10px; } .alert-positive { background: #9c3; } .alert-negative { background: #c00; }
  31. 61.

    Sass %alert { padding: 15px; font-size: 1.2em; line-height: 1; color:

    #fff; @include shadow(0, 1px, 2px, rgba(0,0,0,.5)); @include rounded(10px); } .alert-positive { @extend %alert; background: #9c3; } .alert-negative { @extend %alert; background: #c00; }
  32. 62.

    CSS .alert-positive, .alert-negative { padding: 15px; font-size: 1.2em; line-height: 1;

    color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); border-radius: 10px; } .alert-positive { background: #9c3; } .alert-negative { background: #c00; }
  33. 63.

    Sass @mixin alert($background: "yellow") { padding: 15px; font-size: 1.2em; line-height:

    1; color: #fff; background: $background; @include shadow(0, 1px, 2px, rgba(0,0,0,.5)); @include rounded(10px); } .alert-positive { @include alert(#9c3); } .alert-negative { @include alert(#c00); }
  34. 64.

    CSS .alert-positive { padding: 15px; font-size: 1.2em; line-height: 1; color:

    #fff; background: #9c3; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); border-radius: 10px; } .alert-negative { padding: 15px; font-size: 1.2em; line-height: 1; color: #fff; background: #c00; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); border-radius: 10px; }
  35. 66.
  36. 70.
  37. 71.
  38. 73.

    Sass $grid-columns: 12; $grid-width: 960px; @function columns($cols) { @return (($grid-width

    / $grid-columns) * $cols) + “px”; } main { width: columns(9); // 720px } aside { width: columns(3); // 240px }
  39. 74.

    Sass @function black($opacity) { @return rgba(0, 0, 0, $opacity); }

    @function white($opacity) { @return rgba(255, 255, 255, $opacity); } .faded-text { color: black(0.5); } .faded-panel { background-color: white(0.3); }
  40. 77.
  41. 78.

    Sass @mixin gradient-vertical($start-color: #555, $end-color: #333) { background-color: mix($start-color, $end-color,

    60%); background-image: linear-gradient(to bottom, $start-color, $end-color); background-repeat: repeat-x; } .box { @include gradient-vertical(#f8af1e, #097380); } mix
  42. 80.
  43. 81.

    Sass $variable: "hi!"; /* This is a comment which can

    span * several lines. * It can also make use of variables! #{$variable} */ .box { ... } // This is a single-line comment // It won't appear in the CSS output 
 a { ... }
  44. 85.
  45. 86.
  46. 87.