Hey, I'm Alexandra.
Let's build a better web.

Blog

back to the blog

June 10, 2016 Web Development

An Ode to Sass: Make Your CSS Better

This was originally written and posted on the Interactive Engagement tech blog for WNET.

I’ve learned a lot since I started working at IEG in August 2014, from building better WordPress themes via MVC to the ins-and-outs of git (how I got by before, I’ll never know). The greatest tool that I’ve embraced in my tenure is Sass. For those unfamiliar, Sass is a CSS preprocessor which takes giant complex stylesheets and neatly organizes them into tiers. There are so many features which will make your development process cleaner, faster, and happier.

One little distinction before we get set off. There are two syntaxes for Sass: SCSS and indented syntax (or sometimes just Sass). SCSS (Sassy CSS) is the extension of CSS, meaning that every valid CSS stylesheet is a valid SCSS file. It also has a historical knowledge of CSS hacks and browser-specific syntax, which will enable a smoother transition when porting old stylesheets into Sass. These files are labeled .scss extension. Indented syntax uses indentation rather than brackets to indicate nesting, with new lines rather than semicolons to separate properties. These files are labeled with the .sass extension.

In this article and in my general work practice, when referring to Sass I am using SCSS.

The File System

Sass is designed to be created in individual documents, called “partials”, that compile into one document that your website calls to. This will help you organize the types of CSS you’re writing, add features from outside developers, and easily marry your base styles to your media queries. These are easily named by including an underscore at the beginning of the file, so that Sass knows it is a part of a whole. Sass partials are then added with @import to the compiler file, which

At IEG, we generally have five partials which compile into one style.css. Here they are in order of our compiling sheet:

  • _variables.scss: Sass allows creation of variables and mixins in order to create consistency throughout your styles. For example, if you use yellow throughout your website, it can be frustrating to have to find that hex code every time and ensure it’s consistent across the board. Set a variable called $yellow to the appropriate hex code and use it throughout the stylesheets instead of having to find and re-find that hex code every time. More about this later.
  • _normalize.scss: normalize helps ensure that if someone opens your website in an older or less common browser, style elements will appear consistently. This is mostly an artifact of when we supported IE8 and IE9, but it certainly doesn’t hurt to include. Read more about Normalize here.
  • _cse.scss: we use Google Custom Search across all of our sites and have developed a stylesheet partial that lets up make search look like a native feature.
  • _base.scss: this is the showstopper, big affair, main meat of our style sheet. This is where we style all of our content, from headers to footers to individual page designs. This is sub-organized via CSS comments and could easily be split out to individual features, although that would be overkill for us.
  • _mediaqueries.scss: all of our many adjustments to ensure our sites look good on a large desktop to the smallest of phones go in this sheet.

All of these partials are imported into style.scss.

The Setup

The thing that made me fall for Sass is its basic essence: nesting. This is the key to organizing your styles, respecting that parent-child div relationship, and segmenting styles that are only applicable in certain areas without having to repeat a long string of parent values. Just like HTML, CSS now has a clear visual hierarchy.

Below is a snippet of SCSS (in my _base.scss file) that we use for IEG’s web-only styleguide.

/*Style Guide Pages*/
.styleguide {
	background:#fff; padding-top:40px; color:#000;
	#ui {
		h3 {text-align:center; text-transform:uppercase; margin:2em 0 1em 0; font-weight:700;}
		.half {width:50%; float:left;}
		#thirteenui {
			background:#242424; padding:2em; margin:1em auto;
			.navui li {color:#757575;}
			.menuui > ul {width:55%; background-color:#1e1e1e; border-bottom:1px solid #3a3a3a; margin:0 auto;}
		}
	}
}

The styleguide class applies to all pages that fit in the style guide series, which then has sub-ids based on the individual page being styled. For the UI design page, I didn’t want to use images. I built the elements in CSS so that it would be easier to refer to in the future for actual use of those elements.

Within each style guide page, I style the individual elements. The organization here is so much cleaner than it would be in CSS. And it compiles to the following:

.styleguide {background:#fff; padding-top:40px; color:#000;}
.styleguide #ui {}
.styleguide #ui h3 {text-align:center; text-transform:uppercase; margin:2em 0 1em 0; font-weight:700;}
.styleguide #ui .half {width:50%; float:left;}
.styleguide #ui #thirteenui {background:#242424; padding:2em; margin:1em auto;}
.styleguide #ui #thirteenui .navui li {color:#757575;}
.styleguide #ui #thirteenui .menuui > ul {width:55%; background-color:#1e1e1e; border-bottom:1px solid #3a3a3a; margin:0 auto;}

Instead of having to repeat yourself a thousand times with parent selectors, use Sass.

The Compiler

SASS only works when it is compiled into a CSS stylesheet. There are a host of compilers out there that will take your partials and your mixins and put it all together into a singular style sheet (or multiple, if you’ve set it up that way). Compilers are the backbone that make Sass work.

Using my compiler was also a great introduction to the command line. I am very, very familiar with the fear of the command line that some front-end developers have. If you’re not ready to take that step, that’s ok. There are apps that will take that part out of the process.

I use Compass to do the heavy lifting, and once set up it is incredibly easy to repeat. To get compass set up on your machine, follow these instructions. Once Compass has been installed, you can easily replicate your setup in all future projects by copying your file structure and just adjusting what’s inside.

Variables and Mixins: Sass’s Secret Sauce

The real magic of Sass is the ability to create variables and mixins for duplicating styles in various places. In older stylesheets, in order to replicate a yellow across various items, you have to either have a brand bible that has the hex codes laid out or you have to search for an item with that yellow and copy it. That’s hardly sustainable, especially if down the line, your team wants to use a goldenrod instead of lemon yellow.

Here are some example variables and mixins:

/** Variables**/
$yellow: #fdbb2f;
$black: #000;
$blackoverlay:rgba(0,0,0,0.7);

/**Mixins**/
@mixin gradient ($place, $color1, $color2){
  background-image: linear-gradient($place, $color1, $color2);
  background-image: -o-linear-gradient($place, $color1, $color2);
  background-image: -moz-linear-gradient($place, $color1, $color2);
  background-image: -webkit-linear-gradient($place, $color1, $color2);
  background-image: -ms-linear-gradient($place, $color1, $color2);
}
@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}

The variables are simple, and can be used by themselves or as elements within a mixin. A variable is most likely the value at the end of an attribute (such as color, background, border, or font). Mixins use one or more elements that serve as values replicated with one or more attributes (such as the various transition attributes, media queries, or font sets).

Checkout those features in action:

section {
   background:$blackoverlay;
   color:$yellow;
}
article {
  @include gradient(bottom, $black 18%, $yellow 66%);
}
a {
  color: $yellow;
  @include transition(color .3s ease);
}

Variables slide right in to the value spot of your stylesheet and are the easiest to implement. Use @include for mixins, declaring the elements that change within the mixin (colors for backgrounds, transition set, etc).

So What?

Start getting organized. Start streamlining your site’s style with variables. Once you’ve started using Sass, you’ll never go back to the old CSS-way. If you want to learn more about Sass and get some tricks for using it, check out some additional resources below.

Additional Resources