Using Variables in Sass to Streamline CSS

sass_feat

Sass is short for Syntactically Awesome Style Sheets, and it essentially provides a more user-friendly (but also more flexible) method for writing CSS markup for applications and sites. In this post, we’re looking at the advantage of using variables within Sass, something that is simply not possible using CSS3 alone.

The following lesson and videos come from our new Learning Sass Tutorial Video series, now available as a direct download for $24.95 or streaming with the rest of our catalog through the Learning Library plan.

The Benefit of Variables

As an extension language, Sass allows you to do much more with CSS than you normally could. Variables play a big part in this.

Within a Sass style sheet, variables are marked by a $ symbol. Variables let you store settings in a sort of shorthand that can be used later throughout your code.

For example, in the first Variables video below, the first line of our scss file established a color value:

$bright-red: #f00;

Now, any time you use the variable $bright-red throughout your sheet, it will ultimately show up on your page as the color #f00, or whatever you choose to change it to in the future.

You can also use variables for predefined font stacks and other configurations that would otherwise be much longer to type. The real magic of variables, however, lies in their ability to be combined. Further down in the same sheet, for example, is a new variable reference:

$header-title-color: $bright-red;

Now, the original variable can be leveraged within a more descriptive, functional variable as you design your page, while at the same time allowing further flexibility to be modified at a later date. Another incredibly useful option when working with variables is to make calculations using them, which is highlighted in the Variables: Part 2 video below.

To get started with the featured free videos, you should first install Sass on your computer, using the instructions found in the free Chapter 2 videos on our “>training page, or elsewhere online.

To follow along, you can access the author’s work file here.

Nesting

Variables in Sass: Part 1

Variables in Sass: Part 2

Comments

comments

Save $50 when you sign up for an annual Learning Library account Learn More