Sass for Fun and Profit

Presented at Chicago Code Camp 2018.

Abstract:
Ugh, CSS, it seems like it has a mind of its own and feels super complicated for anything more than a simple layout. If only there was some way to apply the best parts of programming to it, like variables or functions, and make things better. Enter: Sass, an extension of CSS that makes writing your stylesheets fun and easy. In this talk, I’ll introduce the basics of Sass: variables, nesting, mixins, and importing. We’ll discuss both of the available syntaxes for Sass and work through some ways to improve existing CSS using the magic of Sass. Bring your laptop to code along! This talk assumes basic knowledge of HTML and CSS, and is a great place to start for people just starting to feel the headaches of writing pure CSS.

Transcript

1. Sass for Fun and Profit with Stephanie Slattery @sublimemarch
2. Stephanie Slattery @sublimemarch @sublimemarch
3. Who are we? @sublimemarch
4. 1. What's Sass? 2. Why would you use it? 3. What are some cool things it can do? @sublimemarch
5. 1. What's Sass? @sublimemarch
6. @sublimemarch
7. Syntactically Awesome StyleSheets @sublimemarch
8. Sass is a preprocessor scripting language! @sublimemarch
9. (okay, but what's a preprocessor scripting language) @sublimemarch
10. It's a language that takes input and processes it into some output, which is then used as the input to something else. @sublimemarch
11. Sass extends CSS. @sublimemarch
12. Your Sass file is processed and saved as a normal CSS file you can use on the web. @sublimemarch
13. Compiling Sass! After you install Sass, you compile Sass to CSS using the sass command and telling Sass which file to build from and where to output CSS to. sass input.scss output.css @sublimemarch
14. Keep compiling Sass! Use sass watch @sublimemarch
15. 2. Why would you use Sass? @sublimemarch
16. Sass lets you use features that don't exist yet in CSS3, or that aren't widely supported. @sublimemarch
17. Sass adds features of more traditional programming languages. @sublimemarch
18. Sass lets you write object-oriented CSS. @sublimemarch
19. 3. What can Sass do? @sublimemarch
20. (wait, hang on, quick note about SCSS) @sublimemarch
21. There are two different syntaxes for Sass. @sublimemarch
22. Original syntax, indented: nav color: red background-color: black a text-decoration: none color: white @sublimemarch
23. .sass files use indentation and whitespace @sublimemarch
24. Newer syntax, SCSS: nav { color: red; background-color: black; a { text-decoration: none; color: white; } } @sublimemarch
25. .scss files use curly brackets and semicolons, like CSS @sublimemarch
26. aka Sassy CSS @sublimemarch
27. ...and we're going to use SCSS for examples. @sublimemarch
28. 3a. Why would you use SCSS instead of Sass? @sublimemarch
29. CSS files are valid SCSS files. CSS files aren't valid Sass files. @sublimemarch
30. It's easy to read and write even if you aren't familiar with actual Sass features. @sublimemarch
31. You maybe have opinions on whitespace delineated languages. @sublimemarch
32. 3b. What can Sass do? @sublimemarch
33. Variables! @sublimemarch
34. Variables are the way to store information you want to reuse throughout your styles. @sublimemarch
35. You can store any CSS value, like colors or font stacks. @sublimemarch
36. Use $ to make something a variable. $purple: #5C528D; $big-padding: 100px; $best-font: "Comic Sans"; @sublimemarch
37. What do I use variables for? — colors — font families — padding values — border values — font sizes — themes @sublimemarch
38. You can chain variables. $purple: #5C528D; $brand-color: $purple; @sublimemarch
39. Nesting @sublimemarch
40. HTML has a clear nested, visual hierarchy, but CSS doesn't. Sass lets you nest your CSS selectors in a way that follows this same visual hierarchy. @sublimemarch
41. <nav> <ul> <li> <a href="/home">Home</a> </li> <li> <a href="/about">About</a> </li> <li> <a href="/contact">Contact</a> </li> </ul> </nav> @sublimemarch
42. nav { background-color: blue; ul { margin-right: 30px; li { background-color: red; a { text-decoration: none; } } } } @sublimemarch
43. But this compiles into... nav { background-color: blue; } nav ul { margin-right: 30px; } nav ul li { background-color: red; } nav ul li a { text-decoration: none; } @sublimemarch
44. Watch out for overly specific selectors if you nest deeply! @sublimemarch
45. Nested Properties @sublimemarch
46. You can also do this with properties that share the same prefix! section { font: { family: "Comic Sans"; size: 24px; weight: bold; } } @sublimemarch
47. which compiles into: section { font-family: "Comic Sans"; font-size: 24px; font-weight: bold; } @sublimemarch
48. Referencing Parent Selectors @sublimemarch
49. Use & to stick a selector onto its parent, instead of creating a nested selector. ul { background-color: blue; li { color: white; &:first-child { margin-left: 30px; } } } @sublimemarch
50. which compiles into... ul { background-color: blue; } ul li { color: white; } ul li:first-child { margin-left: 30px; } @sublimemarch
51. Mixins @sublimemarch
52. Mixins let you make groups of declarations to reuse across the site. @mixin input-styling { color: black; font-size: 18px; padding: 10px 5px; } input[type="text"] { @include input-styling; } @sublimemarch
53. You can pass content to a mixin. @mixin phone-and-tablet { @media only screen and (max-width: 960px) { @content; } } @include phone-and-tablet { margin: 0 30px; } @sublimemarch
54. Which becomes: @media only screen and (max-width: 960px) { margin: 0 30px; } @sublimemarch
55. You can pass values into a mixin. @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } input { @include border-radius(8px); } @sublimemarch
56. Which becomes: input { -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; } @sublimemarch
57. When I use mixins: — media queries — animations — theming — borders @sublimemarch
58. Imports @sublimemarch
59. CSS has imports that let you split your CSS into smaller, more maintainble portions. @sublimemarch
60. But! Each time you use @import in CSS, it creates another HTTP request. @sublimemarch
61. Sass uses @import from CSS, but it combines the files together, so there's just one HTTP request. @sublimemarch
62. Extend @sublimemarch
63. @extend lets you share a set of CSS properties from one selector to another. .button { font-family: "Comic Sans"; padding: 10px 14px; } .blue-button { @extend .button; background-color: blue; } @sublimemarch
64. Which becomes: .button { font-family: "Comic Sans"; padding: 10px 14px; } .blue-button { font-family: "Comic Sans"; padding: 10px 14px; background-color: blue; } @sublimemarch
65. You can also use placeholder classes that only show when extended. %button { font-family: "Comic Sans"; padding: 10px 14px; } .blue-button { @extend %button; background-color: blue; } @sublimemarch
66. Which becomes: .blue-button { font-family: "Comic Sans"; padding: 10px 14px; background-color: blue; } @sublimemarch
67. String Interpolation @sublimemarch
68. Use #{} to include text. @mixin border($side) { border-#{$side}: 3px solid blue; padding-#{$side}: 20px; } .box { @include border(left); } @sublimemarch
69. Compiles into: .box { border-left: 3px solid blue; padding-left: 20px; } @sublimemarch
70. And so much more! — control statements (if, for, each, while) — operators (+, -, *, /, %) — color operators (rgba) @sublimemarch
71. Sass for Fun and Profit @sublimemarch stephanie.slattery.website @sublimemarch