$30 off During Our Annual Pro Sale. View Details »

Sass for Fun and Profit

Sass for Fun and Profit

Presented at Chicago Code Camp 2018.

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.

Fen Slattery

June 09, 2018

More Decks by Fen Slattery

Other Decks in Technology


  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!

  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