- Be able to explain what Sass is and why it's used
- Use variables to make code more flexible
- Understand how to use nesting to help DRY up selectors and properties
- Differentiate between
@extend,@import,@mixin&@include, and@function
Sass is a superset of CSS that adds power and elegance to the basic language. You can do all the normal CSS things plus way more!
- You write a combination of CSS and SassScript, which compiles to proper CSS.
- It allows you to use variables, nested rules, mixins, inline imports and more, all with a fully CSS-compatible syntax.
- Sass helps keep large stylesheets well-organized, and helps get small stylesheets up and running quickly...
Sass syntax originated from Haml. Some developers didn't like a syntax that was so foreign from CSS and so the developers that created Sass introduced SCSS which is 'the new main syntax' for Sass.
Explore these Codepens. When you open them, you'll notice that the CSS column has a header of CSS (scss). This means that you're currently looking at Sass. Compare this to what you see when you click on the drop-down arrow at the top-right of the column and click "View Compiled CSS". Now you're looking at the CSS after it's been compiled from Sass.
Some things to consider...
- In what ways does Sass look different than Vanilla CSS?
- How might writing out Sass be easier / faster than writing out vanilla CSS?
We don't expect you to understand exactly what the Sass is doing in these examples. Just think about it on a higher level.
For the remainder of the class, you will be divided into group that will researching certain aspects of Sass and teach them back to the class. Each group must create and demo a Codepen that shows their designed topic in action.
- What are Sass variables? What problem do they solve?
- How do you define a variable?
- What values can you store in a variable?
- What are some common use cases?
- How does scope work with Sass variables?
Sass allows us to use variables which are defined with $. Variables can store
strings, numbers, colors, arrays, and objects. Variable names should relate to
their usage and not there value e.g. ✅$border-color vs. ❌$red. One big
advantage to using variables it makes it easy to update properties.
- What does "nesting" mean in Sass? What problem does it solve?
- What does
&mean? - What's the difference between selector nesting and property nesting? Show examples of each.
- How much nesting is too much nesting?
- What is Sass inheritance? What problem does it solve?
- How do we use
@extendto implement inheritance? - What does an
@extendexample look like when compiled to vanilla CSS. - What are some common use cases?
- What are mixins? What problem do they solve?
- How do we define and use a mixin?
- In what way might a mixin resemble a programming language?
- What is a common example of a mixin?
If you're group finishes early, look into Sass functions!
If there's time left, give this exercise a shot.
Use Sass to style the provided elements to recreate the image at bottom of the Codepen. You shouldn't need to modify the HTML at all.
Don't try to implement all the above Sass features at once. Instead, take the following steps...
- Complete the exercise, making sure to use variables for repeated values and nesting selectors where applicable.
- Once you're done, identify repeated chunks of code and define them in single selectors. Then apply them throughout your code using
@extendstatements. - BONUS: Use mixins and/or functions to to generate the font and background colors for each button.
**SOLUTION:**
[Only take a peek. No copy-and-pasting.](http://codepen.io/adambray/pen/yegjdj)Webpages don't know what to do with raw Sass/SCSS, these files need to be compiled to regular CSS to be used.
This can be done a number of different ways...
- Using a GUI program/plugin like
sass-autocompileapm install sass-autocompile
- Letting a build tool like Grunt/Gulp/Webpack/npm-scripts handle the compilation with an additional package/plugin.
There a good number of libraries of mixins and functions that can extend the functionality of Sass. Most are used by @importing the library @includeing the mixins where desired.
Bourbon + Neat are similar to bootstrap but are a lot more flexible and don't require a bunch of classes everywhere. Super cool!
- Bourbon is "a simple and lightweight mixin library."
- Neat is "a lightweight semantic grid framework for Sass and Bourbon."
Compass is another framework that adds a bunch of extra features, a lot of the most useful ones are mixins that add vendor prefixes to styles. I've never used it but it's out there and pretty popular.
If you're worried about vendor prefixes there is also autoprefixer. It's not a sass thing but cool regardless and potentially a good alternative to compass if you're only concerned with prefixes.
- Name 3 benefits of Sass.
- Describe how variables work in Sass
- Understand how to use nesting to help DRY up selectors and properties
- Differentiate between
@extend,@import,@mixin&@include, and@function
- Super cool custom framework
- From the scotch.io tutoral - build your own framework ]
- Or, check out the follow-up lesson, Sass Directives
Guides:
- Official getting started guide
- Scotch.io - Build your own framework
- TheSassWay - Pure sass functions
- Sitepoint - Function basics
- Sitepoint - Control directives
- Docs for functions
Examples:
- 3D Buttons with Sass
- Github's Style Guide, Primer CSS