If you’ve been using Sass for a while, but find yourself writing seemingly basic code that doesn’t look very different from vanilla CSS, then this article is for you. We’ll explore ten ways to put Sass to use, taking advantage of some of its more intermediate to advanced features. Year after year, I continue to be impressed with the language’s capabilities and would like to share some of the tricks I’ve learned. This article assumes you have at least some working experience with Sass. If not, get your hands dirty with one of the many great resources on the internet. The Sass documentation is a great place to start. They don’t call them Syntactically Awesome Style Sheets for nothing, so let’s get started on these 10 Sass tips created to take your skills to the next level.
1. Parent Selector
Select a parent from within the child selector.
SCSS
Instead of having to make a new selector for .container .text outside of the .text block, you can just write your selector inside of .text, followed by the &.
Compiled CSS
HTML
2. Suffixes
Here’s a cool way to generate suffixes based on a particular class. Use &- followed by the desired suffix. In this case, &-pink will create .container-pink when it’s used inside of .container.
SCSS
Compiled CSS
HTML
3. String Interpolation
String interpolation will render the result of a SassScript expression as compiled CSS. In this basic example, we’re setting color variables, then rendering them out as CSS comments.
SCSS
Notice how we use string interpolation directly in the comment.
Compiled CSS
4. Placeholders
Placeholders are similar to variables in that they aren’t compiled in the actual CSS. The benefit of this is that they keep your code clean by rendering only the output of the placeholder. They can be extended anywhere in your code. Placeholders can be useful when you want to extend some particular properties across multiple selectors. Start your placeholder with a percentage sign %, so for example you could write %my-placeholder, and extend it inside your selector with @extend.
SCSS
Compiled CSS
HTML
5. Default value in mixins
When using a mixin, you normally need to pass in every argument that will be required. The advantage of using a default value is that you aren’t required to pass an argument in, but you can always override the default you’ve set. In this Sass tip example, I’m overriding the defaults for the second h1 as I pass in an argument of darkcyan.
SCSS
Compiled CSS
HTML
6. Null
Let’s expand on what we just did with using a default value, except this time, we’ll use null as a default value. If no arguments are passed in, nothing will be compiled in the CSS for opacity, but if an argument is passed in, it will be compiled in the CSS. This is a nice trick because your CSS won’t be bloated with unused styles.
SCSS
Compiled CSS
HTML
7. Color Functions
Color functions open a world of options for manipulating colors. They are built into Sass and can be used to dynamically generate CSS based on your needs. Here, we instantiate our scale-color function, passing in a color, and a saturation percentage. There are many color functions, and I encourage you to experiment with them.
SCSS
Compiled CSS
When compiled, the hexidecimal color here is the result of the expression.
HTML
8. @if to Change Contrast
Here’s a great Sass tip: Sass has control flow built into it. There are four types of control available to use: @if, @each, @for, and @while. Here, we use an @if conditional to determine if our colors meet the desired threshold for contrast; we then render the text color based on the outcome.
SCSS
Compiled CSS
HTML
9. @debug
When using Sass, there may be times when you need to know the value of an expression. If you use JavaScript, you have probably used console.log() to print the results of an expression to the console. The good news is that Sass has something similar. For example, it might be more work than it’s worth to figure out the saturation of #e1d7d2 yourself, but @debug is happy to do the math for you, right in the console!
SCSS
Compiled CSS
10. Use @for to Build Your Own Utility Classes
You can even use loops in Sass. @for is one of the four types of control flow currently in Sass. Here, we’re going to generate some utility classes. We’re using the unquote function to return a string of "px", but without quotes. As you might be wondering, there’s also a quote function, which will return the same thing, but with quotes, of course. Note the use of string interpolation.
SCSS
Compiled CSS
HTML
Here’s a full list of all the CodePen examples for you to explore:
1. Parent Selector
2. Suffixes
3. String Interpolation
4. Placeholders
5. Default value in mixins
6. Null
7. Color Functions
8. @if To Change Contrast
9. @debug
10. Use @for To Build Your Own Utility Classes
Thank you!
Thanks for taking the time to read these Sass tips. I hope you’ve found some of these items that I’ve picked up over the years to be useful for your daily Sass workflow.
Thanks for your useful tips. I’m not a tech-savvy but they are really clear and easy to follow.