Now that we've created the variables Sass file, we need to import it into our custom style sheet. Open up custom.css in your text editor and paste the following line of code at the top of the file:

@import "components/_variables.scss"; 

It's important to note that this file must be at the top of your custom style sheet file. The variables will cascade through all the code that follows them so they must load first. Let's start filling out our variables file with a color palette.

Save the custom style sheet and then go back to the variables file. Let's start by inserting a color palette into the variables file like this:

$red: #e74c3c; 
$red2: #c0392b; 
$blue: #3498db; 
$blue2: #2980b9; 
$green: #2ecc71; 
$green2: #27ae60; 
$yellow: #f1c40f; 
$yellow2: #f39c12; 
$purple: #9b59b6; 
$purple2: #8e44ad; 
$white: #fff; 
$off-white: #f5f5f5; 
$grey: #ccc; 
$dark-grey: #333; 
$black: #000; 

As you can see, I've set up a palette of several colors that I'll use through my components and later my theme. Here are a few key points to keep in mind:

The next thing you should add to your collection of variables is background colors. As we move through this variables file, we're going to create a variable for all properties that get used over and over again in our style sheet.

Add the following background color variables to the file:

$primary-background: $white; 
$secondary-background: $off-white; 
$inverse-background: $black; 

Let me explain, as best practice, how I have set this up:

Setting up the background color variables is pretty simple. Next let's set up our base typography variables.

The next section of variables we are going to set up is for the base typography styles. Insert the following code after the background colors:

$body-copy: helvetica, arial, verdana, sans-serif; 
$heading-copy: helvetica, arial, verdana, sans-serif; 
$base-font-size: 16px; 
$font-size: 1em; 
$base-line-height: 1.75; 

Let me explain why I'm setting the following variables for the typography:

Now that we've set up our typography variables, let's move on to coding our text colors.

As with the background colors, we need to set up some common color styles for text, as well as defining some colors for base HTML tags such as <pre> and <code>. Insert the following markup after the typography variables in the file:

$primary-text: $black; 
$light-text: $grey; 
$loud-text: $black; 
$inverse-text: $white; 
$code-text: $red; 
$pre-text: $blue; 

Let me break down how each variable is set up:

That finishes off the color variables that I recommend setting up. Feel free to add more if you have other uses you want to cover. Next we'll continue with some text colors by adding links.

An extension of basic text colors will be colors for links in our project. Go ahead and add the following code after the text colors in the file:

$primary-link-color: $purple; 
$primary-link-color-hover: $purple2; 
$primary-link-color-active: $purple2; 

In this case, I've decided to only define a primary link color to keep things simple. In your own projects, you will likely want to come up with a couple more variations.

Like I said, I've kept the link variables simple. It's nice to try and keep your set of variables as compact as possible. If you have too many then it starts to defeat the purpose of using them as it will be harder to remember them in your code. Next let's cover the variables we should set up for borders.

Another CSS property that gets used often is borders. That makes it a great candidate for Sass variables. Insert the following code after the link colors in the file:

$border-color: $grey; 
$border-size: 1px; 
$border-type: solid; 
$border-focus: $purple; 

Let me explain why I've set up the border variables in this manner:

That concludes all the border variables I would recommend including. Next let's include some basic layout variables.

For consistent spacing throughout your designs, it's a good idea to use variables for margin and padding so that you can standardize on size. These properties are also used often so it's smart to make them variables that can be reused. Add the following code after the border markup:

$margin: 1em; 
$padding: 1em; 

All I'm doing here is setting a base size (for both padding and margin) 1em. Again, it's a good idea to set both of these to 1em because it is easy to do the math if you want to use Sass operators to increase or decrease the values of specific components. Those are the last variables that I would recommend adding to your variables file. However, we should add at least one mixin to the file before we are finished.

Since mixins will also be used through a number of your components, you should define them in this variables file. Then they will be available to all the CSS code that follows them in the custom theme file. At the very least, I would recommend setting up a mixin for border-radius, which I will show you how to do next. You may also want to include additional mixins for other CSS3 features.

We talked a little bit about mixins earlier but let's review them again now that we are actually applying them to our project. Insert the following code after the layout variables in your file:

@mixin border-radius($radius) { 
  -webkit-border-radius: $radius; 
     -moz-border-radius: $radius; 
      -ms-border-radius: $radius; 
          border-radius: $radius; 
} 

In Less, it is possible to set a global value for all your border-radius in a mixin. However, with Sass you have to set up the above formula but then on the actual selectors that follow you have to set the actual border-radius value. An example of that would look like this:

.my-component { 
  @include border-radius(5px); 
 } 

In this example, I've added the border-radius mixin to a CSS class called .my-component. The component will have a border-radius of 5px applied to it. You will need to repeat this step on any CSS class or component where you want to apply the border-radius mixin. That concludes our variables Sass file. We went over a bunch of code there, so let's see what it all looks like together. I've also included some CSS comments in the following code to help remind you what each section does:

/* variables */ 
 
/* color palette */ 
$red: #e74c3c; 
$red2: #c0392b; 
$blue: #3498db; 
$blue2: #2980b9; 
$green: #2ecc71; 
$green2: #27ae60; 
$yellow: #f1c40f; 
$yellow2: #f39c12; 
$purple: #9b59b6; 
$purple2: #8e44ad; 
$white: #fff; 
$off-white: #f5f5f5; 
$grey: #ccc; 
$dark-grey: #333; 
$black: #000; 
 
/* background colors */ 
$primary-background: $white; 
$secondary-background: $off-white; 
$inverse-background: $black; 
 
/* typography */ 
$body-copy: helvetica, arial, verdana, sans-serif; 
$heading-copy: helvetica, arial, verdana, sans-serif; 
$base-font-size: 16px; 
$font-size: 1em; 
$base-line-height: 1.75; 
 
/* text colors */ 
$primary-text: $black; 
$light-text: $grey; 
$loud-text: $black; 
$inverse-text: $white; 
$code-text: $red; 
$pre-text: $blue; 
 
/* links */ 
$primary-link-color: $purple; 
$primary-link-color-hover: $purple2; 
$primary-link-color-active: $purple2; 
 
/* border */ 
$border-color: $grey; 
$border-size: 1px; 
$border-type: solid; 
$border-focus: $purple; 
 
/* layout */ 
$margin: 1em; 
$padding: 1em; 
 
/* border-radius mixin */ 
@mixin border-radius($radius) { 
  -webkit-border-radius: $radius; 
     -moz-border-radius: $radius; 
      -ms-border-radius: $radius; 
          border-radius: $radius; 
} 

Now that we have all our variables and mixins set up, let's go ahead and start to learn how to apply them. We'll continue to build on the button example we started earlier by extending it into a custom look and feel.