Adding Variables

Our row backgrounds need alternating colors. Using Sass, of course, we know better than just to put the raw color value in: we create a variable for this color in case we need it in other places, too. You could simply create the variable at the top of your "_layout.scss" file. But Bitters comes with a _variables.scss file that we can extend with a new variable for our color:

// Colors
$blue: #1565c0;
$dark-gray: #333;
$medium-gray: #999;
$light-gray: #ddd;
$row-background: #F2EEDA;

We can then use this in our _layout.scss styles:

&:nth-child(odd) {
  background: $row-background;

Adding variables - GitHub

The _variables.scss file is also the place where other colors and font sizes, line heights and border styles are defined. If you want to customize anything you should look here, first.


Since we concentrate on the specifics of Bourbon, Neat, and Bitters, we won't talk about all the Sass stylings we make to achieve the final look. For example, we won't talk about the simple stylings for the navigation area. You can, however, inspect those changes, too, as they are contained as commits in the project repository.

Get our popular Git Cheat Sheet for free!

About Us

As the makers of Tower, the best Git client for Mac and Windows, we help over 100,000 users in companies like Apple, Google, Amazon, Twitter, and Ebay get the most out of Git.

Just like with Tower, our mission with this platform is to help people become better professionals.

That's why we provide our guides, videos, and cheat sheets (about version control with Git and lots of other topics) for free.