Published in

5 Techniques to Leverage SASS

SASS gives front-end developers the power to create nested styles, variables, and perform operator logic inside the style sheet before it is compiled into a CSS file. Currently, the 33 Degrees’ website uses SASS (Syntactically Awesome Style Sheets) for generating the CSS (Cascading Style Sheet) but there are many new features that can now be utilized thanks to improved browser support. Let’s look at five ways we leveraged SASS to improve our CSS.

Naming convention

The first thing we tackled when writing our styles was developing a naming convention for elements on the page. For this, we decided to use a semantic naming approach. This is where the name is based upon the function of the element not the element’s appearance. This keeps the naming generic enough that if the element’s style were to change in the future it would not cause confusion. An example of this would be naming an element “button” instead of “button-blue-border.”

Often times though, there are several elements that share similar styles. The only difference being minor variations in each element’s styling. In these instances, a modifier name is appended with double underscores to the element name. This keeps the naming convention succinct which is advantageous in SASS as it provides the ability to nest similarly named elements together in the code. Building upon the example above, the “button” style could have two variations such as “button__primary” and “button__secondary.”

When used in conjunction with the SASS @extend function, this naming convention can be very powerful. The @extend function applies one element’s styling to another element, giving developers the ability to write concise code that is organized and easy to comprehend.

See the Pen SCSS Extend Styles by Ted Marshall (@marshath) on CodePen.

Colors

When writing color styles, we decided to move away from declaring variables for each color based upon their respective hue (i.e. “blue”). Instead, we created a function in SASS that allows a variable to behave as a collection of colors allowing a color to be referenced from several choices.

An example is an alert color pallet which consists of three colors: green for good; amber/yellow for warning; and red for error. Keeping in-line with the semantic naming convention that was established earlier, the variable or collection would be named “alert-color” and it would contain several choices for the alert state such as “good,” “warning,” and “error.”

See the Pen SCSS Colors by Ted Marshall (@marshath) on CodePen.

Shades of Color

Next, we expanded how we were handled colors to allow for the incremental lightening and darkening of a specific color. This removed the need to recall an exact value of lightening or darkening that would be applied to a color in the style sheet. Now, we can use a value between 0 through 4 to adjust the color by an incremental tint value.

Building upon the previous example, we could set an incremental value of 20% for lightening and darkening. Then we created two functions in our SASS which are named “alert-color-lighten” for lightening colors and “alert-color-darken” for darkening. Then enclosed within the function brackets, we declare an alert state such as “good” followed by a comma separator then a number value between 0 and 4 for the amount of lightening or darkening that we want applied.

See the Pen SCSS Color Shades by Ted Marshall (@marshath) on CodePen.

Font size

When it came to handling font sizes, we want the font sizing to match our software development tools like Photoshop, Illustrator, InDesign, and Word (because we like consistency). Originally, we created variables with names based upon standard print sizes with their values set to ems (i.e. $font16 = 1em). This introduced an undesirable amount of variables into our code. Instead, we wanted SASS to do the math for us.

To accomplish this, we created a variable with a one pixel baseline height value set in ems (0.0625em) which is a standard unit of web measurement equal to 16 pixels. From there, we created an @mixin function named “font-size” to do the math of converting the standard font sizes into ems (or rems) automatically. We could use the code “@import font-size(16);” to generate the style property “font-size:1em;” in the stylesheet.

See the Pen SCSS Font Sizes by Ted Marshall (@marshath) on CodePen.

Media Queries

With media queries, we wanted to implement a strategy that could grow over time as new devices, screen sizes, resolutions, and more are introduced. For this, we decided to use an @mixin function that allowed our developers to add new media queries to a group of available options, as needed.

For this technique, we declared a breakpoint mixin to establish the various breakpoints for phone, tablet, laptop, and other screen sizes. Then we can use the code “@import bp(‘tablet’) {}” to wrap the styles that need to be applied to specific screen size or resolution inside the brackets. Providing the ability to apply media queries without having to remember specific parameters which can in turn be updated globally from a single location.

See the Pen SCSS Media Queries by Ted Marshall (@marshath) on CodePen.

Those are five techniques in which we are leveraging SASS for our upcoming website redesign. We hope you found them interesting and if you have some unique ways that you are using a pre-processing language like SASS on your website, let us know by leaving a message in the comments.

Follow our blog via RSS or Email.

Privacy Policy We do not sell or share your information.

Ted is a graphic designer and front-end developer who specializes in branding, marketing, and website development.