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.

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
10. Variables
11. Variables Functions
12. Variables Functions Modules
13. What is Sass?
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
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 { ... } } } } } } } }
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
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
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
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.