Four Features of Sass That Will Make You Feel Like the Sassy Dev You Know You Are

Mallory Woods
Oct 16 · 4 min read

What is Sass?

Sass is an extension of CSS that adds power and elegance to the basic language.

Even a newbie developer knows how quickly a CSS stylesheet can get bloated, messy and difficult to update. Sass is a preprocessor and syntax that provides a few tools and structures to make up for the shortcomings of CSS. I wanted to share four of those features that make organizing and writing maintainable CSS easier.

I highly recommend Hugo Giraudel’s Sass Guidelines for a more complete and detailed overview of the nuances of Sass (the preprocessor), Sass (the syntax) and SCSS (the syntax).

7–1 Pattern

7 folders, 1 file

This architectural pattern sets up your partial files in 7 different folders, with a single file at the root level (usually named main.scss) which imports them all to be compiled into a CSS stylesheet.

This allows you to keep a separation of concerns, even within stylesheets. Styling an h2 header that might be used throughout the site? Toss that in your /base/_typography folder, and when you need to adjust the margin-bottom, you’ll know exactly where to look. And more importantly, the next developer making updates down the road will also know where to look!

Here’s what that pattern looks like:

sass/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _functions.scss # Sass Functions
| |– _mixins.scss # Sass Mixins
| |– _placeholders.scss # Sass Placeholders
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
| … # Etc.
|
|– components/
| |– _buttons.scss # Buttons
| |– _carousel.scss # Carousel
| |– _cover.scss # Cover
| |– _dropdown.scss # Dropdown
| … # Etc.
|
|– layout/
| |– _navigation.scss # Navigation
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _footer.scss # Footer
| |– _sidebar.scss # Sidebar
| |– _forms.scss # Forms
| … # Etc.
|
|– pages/
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
| … # Etc.
|
|– themes/
| |– _theme.scss # Default theme
| |– _admin.scss # Admin theme
| … # Etc.
|
|– vendors/
| |– _bootstrap.scss # Bootstrap
| |– _jquery-ui.scss # jQuery UI
| … # Etc.
|
`– main.scss # Main Sass file
source: https://sass-guidelin.es

Variables

Define once, use anywhere.

Variables allow us to define a value in one place, but use that value anywhere we want in the stylesheet. This keeps consistent styling throughout a stylesheet and makes updating a breeze.

Declare variables by prepending them with a dollar symbol $ and, just like a variable in any other coding language, you’ll want to choose a concise, specific name.

As a rule of thumb, if you find yourself repeating the same styling for more than three selectors, it‘s probably worth creating a variable.

// COLORS
$color-primary: #7ed56f;
$color-secondary: #FFB900;
$color-black: #999;
// FONT
$font-size-default: 1.6rem;
// BOX-SHADOW
$box-shadow-default: 0 1rem 2rem rgba($color-black, .1);

Let’s imagine that you’ve spent a few weeks developing a gorgeous site for your Aunt Becky’s small business, Becky’s Bagels. Things are looking good, but at the last minute Aunt Becky wants to introduce a new color palette to really make things POP!

Without variables you might spend all night scanning hundreds of lines of code for every instance of Blueberry Bagel (#0075e1) to replace it with Smoked Salmon (#ffcfbf). But with variables you can easily update the variable definition and see those changes take effect everywhere immediately.

Nesting

keeping selectors concise

Selector nesting gives us a way to compute long selectors (rather than repeating ourselves) by nesting shorter selectors within each other. This method is often used along with BEM (block__element — modifier) naming conventions (another blog on BEM to come soon…).

To nest selectors, place an ampersand & in place of the parent selector name.

One downside to nesting is that it ultimately makes your code harder to read. However, one recommended application for nesting is for pseudo-classes and pseudo-selectors. These selectors are so closely related, that it makes sense to keep them connected through nesting:

.btn {
color: $color-primary;

&:hover {
color: $color-secondary;
}

&::before {
content: 'Click Here!';
}
}

See what I mean by tough to read? Let’s take a look at the compiled css to get a crystal clear idea of what we’ve just written:

// compiled css:.btn {
color: #7ed56f;
}
.btn:hover {
color: #FFB900;
}
.btn::before {
content: 'Click Here!';
}

Mixins

a good recipe

Another good rule of thumb is that if you have a group of CSS properties that always appear together for a specific reason, it’s a good idea to create a mixin. An example would be clear-fix for floated elements. The micro-clearfix hack from Nicolas Gallagher below is a fantastic mixin that you should drop into your own stylesheets

Mixins are declared using the prefix@mixin and are invoked within the partial file using @include followed by the mixin name.

// _mixins.scss@mixin clearfix {
&::after {
content: '';
display: table;
clear: both;
}
}
//_header.scss.header {
@include clearfix
}

That’s all for now, folks. I hope this helps you get started on your Sass journey. Give me a shout on Twitter to let me know how it goes!

#sassy

The Startup

Medium's largest active publication, followed by +526K people. Follow to join our community.

Mallory Woods

Written by

The Startup

Medium's largest active publication, followed by +526K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade