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. Sass Syntactically Awesome Style Sheets Devstaff Heraklion • October 2016

    Zaharenia Atzitzikaki • @sugarenia
  2. Sass Syntactically Awesome Style Sheets Devstaff Heraklion • October 2016

    Zaharenia Atzitzikaki • @sugarenia
  3. I’m Zaharenia. Lead designer @ Workable

  4. Sass? Why?

  5. CSS is repetitive

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

    .module .title span { ... } .module .footer { ... }
  7. CSS is very repetitive

  8. CSS was not made for this

  9. None
  10. Variables

  11. Variables Functions

  12. Variables Functions Modules

  13. What is Sass?

  14. None
  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
  16. You can start now.

  17. How to install

  18. $> gem install sass

  19. $> sass --watch scss:css

  20. style.scss > style.css

  21. None
  22. None
  23. Don’t edit the .css file! PITFALL

  24. Using Sass

  25. Nesting

  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; } }
  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; }
  28. Don’t mimic DOM! PITFALL

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

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

    { a { ... } } ul { li { ... } } } } } } } }
  31. None
  32. Parent reference

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

    &:hover { text-decoration: underline; } &.disabled { color: grey; } } }
  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; }
  35. .box { … &-header { … } }

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

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

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

    { … } .checkout .box { … }
  39. .box { … & + & { … } }

  40. .box { … & + & { … } }

    .box { … } .box + .box { … }
  41. Variables

  42. Sass $color: #f00; $border: 1px solid $color; .link { color:

    $color; border-bottom: $border; }
  43. Sass // Colors $color-link: #01579b; $color-text: #607d8b; $color-danger: #d32f2f; $color-success:

    #43a047; $color-alert: #ffca28;
  44. Mixins

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

    border-radius: 4px; width: 100px; height: 100px; } .box { @include box; }
  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); }
  47. Don’t worry about bloat

  48. Don’t use mixins for vendor prefixes PITFALL

  49. Extends

  50. This is a generic alert! This is a positive alert!

  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>
  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>
  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; }
  54. Multiple extends will bite you PITFALL

  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,
  56. Sass .timeline__item--import, .hashtag-add__field, .hashtag-add__toggle, .hashtag__remove, .ticker.hide, .followers, .dropdown-menu, .alert .btn-compact

    { ... }
  57. Extending placeholders

  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; }
  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; }
  60. Mixin or extend?

  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; }
  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; }
  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); }
  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; }
  65. @extend for related modules @mixin when you need arguments RULE

    OF THUMB
  66. @import

  67. @import "variables"; @import "mixins"; @import "layout"; style.scss

  68. _variables.scss _layout.scss _mixins.scss style.css

  69. PITFALL The 4096 selector limit in IE

  70. None
  71. Functions

  72. Custom functions

  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 }
  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); }
  75. Helper functions

  76. Sass .button { background-image: linear-gradient( to bottom, lighten(#c00, 5%), darken(#c00,

    5%) ); } darken/lighten
  77. None
  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
  79. With gradient support Without gradient support

  80. Comments

  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 { ... }
  82. Sass tools

  83. Sassmeister

  84. sassmeister.com

  85. Linting

  86. None
  87. None
  88. Libraries & frameworks

  89. compass-style.org

  90. bourbon.io

  91. neat.bourbon.io

  92. bitters.bourbon.io

  93. refills.bourbon.io

  94. BONUS! Workable Style Guide https://github.com/Workable/css-style-guide

  95. Devstaff Heraklion • October 2016 Zaharenia Atzitzikaki • @sugarenia Thanks!

    You rock.