When writing any CSS, look at some of the common values like the colors, fonts, font sizes, and the grid layout. These basic design elements need to be incorporated in your styelsheet. One of the ways Sass can greatly help is with variables. With Sass these common values can be abstracted and placed in associated variables which can be referenced when needed.
Variables allow you to name CSS values that you use repeatedly and then refer to them by name rather than repeating the value over and over. You can also name values you only use once in order to make it more clear what they're for.
Sass and Compass in Action page 32
The major advantage of using variables in Sass is that now you have a single point of reference which allows for better maintainability and code extensibility. If there is any change to the CSS style, in theory changing the variable should handle the change (I mention in theory because sometimes practical issues provide exceptions to this rule). Let's look at the following variable declarations:
// Create primary color palette for the site
//Primary colors palette
// -------------------------
$blue: #3481CF !default;
$white: #FFFFFF !default;
$black: #000000 !default;
$gray: #7F7F7F !default;
// Create derivative color palette from the primary color palette
//Derivative colors
// -------------------------
$dark-gray: darken($gray, 23.14%) !default; //#444
$darker-gray: darken($dark-gray, 6.6667%) !default; //#333
$darkest-gray: darken($dark-gray, 17.25%) !default; //#181818
// Set a semantic alias to the color variable based on the dark gray color that was instantiated from the derivative colors
//Font information
// -------------------------
$font-color: $darker-gray;
$anchor-color: $darker-gray;
// Additionally, primary, secondary, tertiary, and any number of colors can be created
//Color use palette
// -------------------------
$primary-color: $blue;
$secondary-color: $black;
$tertiary-color: $white;
// When creating the base CSS, I will assign the font color alias variable that was instantiated earlier
p {
color: $font-color;
}
a {
color: $anchor-color;
&:hover {
color: darken($anchor-color, 20%);
}
}
As illustrated in this this example, we are able to instantiate variables using values which, in this case, are hexadecimal colors. We can also instantiate additional variables using existing variables, this is referred to as aliasing. The functions used for the $dark-gray variable are existing color functions provided by Sass. We will cover functions in more detail in chapter 6, however in the meantime lets surmise that this function will take the existing gray color and darken it by 23.14%.
It is important to keep in mind that we now have created a maintainable and easily scaleable color scheme for our site. We will be referencing this set of colors throughout our Sass stylesheets. In the future, if there is a requirement for the color scheme to be changed, the change can be done at the point of instantiation in the _config.scss file. For example, if the requirement is that the the grays should be a shade darker for example instead of #7f7f7f we want #7b7b7b, we can change the $gray variable which will trickle down to all referenced variables in the stylesheet.
We have now created a file that will contain the basic variables for our site. A maintainable and scalable file for the stylesheet and site design. We will discuss this in more detail in using a _config file section.
When discussing variables in any programming language, it's important to understand how variables are scoped. Let's take a look at how Sass handles the scoping of variables.