Advertisement
HTML/CSS

Quick Tip: Name Your SASS Variables Modularly

by

When working with CSS preprocessors like Sass, Less (or any other programming language for that matter) you're going be leveraging the power of variables. However, if you spontaneously create your variable names as you code, the odds are your naming convention will lack cohesiveness. You should think about organizing your variable names (and project for that matter) modularly. This will bring structure and unity to your project as a whole, making it easier to understand and navigate the whole thing.


A Naming Suggestion

Say you need a variable for text color in your project. You could call it $text-color, or should you call it $color-text? How do you decide? Choosing one at random can contribute to a lack of structure as the number of variables in your project increases. As experience shows, we often forget exactly how we named variables for particular projects. This leads to confusion and time-consuming methods of global search-and-replace for variable names.

What we need is a rule for defining and selecting our variable names. A great way to keep modularity in your project is to group variables that share relationships and commonalities. Then you can name them by arranging words that describe their function from generic to specific (much the same way CSS works with specificity) from left-to-right.

For example, if I have four variables for four different border colors, I can name them all starting with "border" (as that's the generic term they all share) and get more specific with a left-to-right reading. Grouping and naming variables in this manner makes your code easier to read, comprehend and recall.

var-variable-names

Generic to Specific: An Example

Let's suppose we're working in SASS and we want to create a number of variables that define our project's color palette. If we are working with a shade of blue, we might create some variables like this:

$blue;
$dark-blue;
$medium-blue;
$darkest-blue;
$light-blue;
$lightest-blue;

A better way to name these variables would be to start with the generic word they all share in common: blue. Then we can get more specific from left to right:

$blue;
$blue-dark;
$blue-darkest;
$blue-light;
$blue-lightest;

This not only helps in recollection, but will allow a text editor (such as Sublime Text, Coda etc.) to easily suggest colors. This way you don't have to memorize exactly how you named your variables. Rather, you can start generically and get more specific as the text editor auto-suggests variable names. All you have to remember is you want a color of blue. So you begin typing $blue and you can get a list of all the different blues you've created!


Hinting Example

Imagine I'm working on a large project and I've grouped all my variables that contain color values by prefixing them with the generic word they all have in common: color.

// OK
$border-color;
$dark-border-color;
$light-color-border;
$highlight;
$link;
$link-dark;
$text;
$color-text;
$link-color-light;
$lightest-text-color;
// Better
$color-border;
$color-border-dark;
$color-border-light;

$color-highlight;

$color-link;
$color-link-dark;
$color-link-light;

$color-text;
$color-text-light;
$color-text-lightest;

Then, let's say I needed a color for a border. I begin typing border: 1px solid $colo and my text editor can suggest all the color variables I've defined for my project.

var-color-

Perhaps I have a lot of colors in my project but I only want border colors. I could pre-define a few variables with my desired border colors. Then, when coding, I can simply continue narrowing the specificity of my variable name border: 1px solid $color-border and my text editor will auto-suggest any variables I have by that prefix. All I have to do is chose the one I want!

var-color-border

Even if you didn't have code hinting, this would still be an effective way of naming your variables. It helps you easily recollect what you've named variables because variables that share relationships share prefixes.


Conclusion

Naming your variables in this modular way will help you understand your project conceptually before you code, while you code, and after you code. It's a win-win-win situation!

Related Posts
  • Code
    Web Development
    Alternatives to PrefixrCss3 wide retina preview
    With Prefixr no longer being developed, let's look at a few alternatives for managing CSS vendor prefixes.Read More…
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Code
    HTML & CSS
    AbsurdJS or Why I Wrote My Own CSS PreprocessorAbsurd 400
    As a front-end developer, I'm writing a lot of CSS and using pure CSS is not the most efficient way nowadays. CSS preprocessors are something which have helped me a lot. My first impression was that I finally found the perfect tool. These have a bunch of features, great support, free resources and so on. This is all true and it still applies, but after several projects, I realized that the world is not so perfect. There are two main CSS preprocessors - LESS and SASS. There are some others, but I have experience with only these two. In the first part of this article I'll share with you what I don't like about preprocessors and then in the second part I'll show you how I managed to solve most of the problems that I had.Read More…
  • Web Design
    HTML/CSS
    Foundation's Sassy Styles ExplainedFoundation sass retina1
    In this tutorial we'll cover what can be done with the flexible Sass styles included in the Foundation framework. A lot of these offer a more customisable feature set than that of the CSS version, plus there are shortcuts which can be used to style items such as the top bar quickly and easily.Read More…
  • Code
    Theme Development
    Using CSS Preprocessors With WordPress - LESS + CodeKitUsing preprocessors with wordpress what are they
    In the first part of this series I gave a quick overview of the popular CSS preprocessors LESS and SASS. I also shared a few of the frameworks in which they are used. I plan on taking a deeper dive into LESS and talking about the parts of the language I use most often. I also plan on showing you how to get started using it with CodeKit. Let's dig in!Read More…
  • Code
    Creative Coding
    Cross-Platform Sass and Compass in WordPressSass compass preview
    I find it particularly interesting when other developers share their workflow tips and tricks. It can be very helpful to take a sneak-peak into somebody else's development world and find out what tools they are using to make their own life easier. Well today I'm going to show you a portion of my own workflow - specifically how to use Sass and Compass when developing a WordPress theme. Instead of simply explaining the configuration and tools needed, I thought it would be better to start from scratch and show you exactly what's needed to get going when developing a WordPress theme that uses Sass and Compass. I hope this article sounds interesting to you and I'm looking forward to sharing a small part of my workflow with you - I encourage you to do the same.Read More…