Topics Search

What is the difference between CSS variables and preprocessor variables?

What is the difference between CSS variables and preprocessor variables?
Views: 0
Variables are one of the major reasons CSS preprocessors exist at all. The ability to set a variable for something like a color, use that variable throughout the CSS you write, and know that it will be consistent, DRY, and easy to change is useful. You can use native CSS variables ("CSS Custom Properties") for the same reasons. But there are also some important differences that should be made clear.
Sponsored Links:

Similar posts...


CSS Custom Properties: Variables

CSS Custom Properties: Variables Icon
Variables invariably exist in all programming languages, and that's because they are pretty useful. You just have to store a value in a variable once, and then you can use it later multiple times, avoiding repetition. While CSS is not a programming language, lack of variables still limits its capabilities. Now that the native CSS variables are around, I would like to discuss how they are different from variables that CSS preprocessors provide and how to use them properly.

Native CSS Variables

Native CSS Variables Icon
A few weeks ago CSS variables—more accurately known as CSS Custom Properties—shipped in Chrome Canary behind the Experimental Web Platform Features flag. Native CSS variables weren’t just an attempt to copy what CSS preprocessors could already do. In fact, if you read some of the initial design discussions, you’ll see that most of the motivation for native CSS variables was to make it possible to do things you can’t do with preprocessors!

CSS Preprocessor: Creating Valuable Mixins with Stylus

CSS Preprocessor: Creating Valuable Mixins with Stylus Icon
It's impossible to write maintainable CSS for big or small projects anymore without using a CSS preprocessor. Whether you use LESS, Sass, or Stylus, it's important to take advantage of mixins, CSS preprocessor's flavor of any other language's function. In this post, I'm going to show you the basic syntax for mixins within Stylus, as well as arguments, the return keyword, and clever uses of mixins within Stylus.

Less vs. Sass – Which CSS Preprocessor is Best For You?

Less vs. Sass – Which CSS Preprocessor is Best For You? Icon
In the past, a lot of web developers were reluctant to look into CSS preprocessors, for fear of their complexity, added burden in the development process, or the possibility that they’re trying to offer a solution to an issue that they don’t believe exists. People are beginning to realize the benefits of using a CSS preprocessor, but the decision to finally try one out is made even more difficult when faced with a few different options.

Using CSS counters

Using CSS counters Icon
CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. This lets you adjust the appearance of content based on its placement in the document. CSS counters are an implementation of Automatic counters and numbering in CSS 2.1.

LESS CSS: Beginner's Guide

LESS CSS: Beginner's Guide Icon
CSS Pre-processor has now become a staple in web development. It ships plain CSS with programming traits such as Variables, Functions or Mixin, and Operation which allow web developers to build modular, scalable, and more manageable CSS styles.

Getting Started with the Sass Preprocessor

Getting Started with the Sass Preprocessor Icon
In this tutorial we will be making a very simple button with 3 states, full of awesome CSS3 features like gradients, box shadows and transitions, while relying on the preprocessor to do the hard work for us. There are a few preprocessor languages out there, but I highly recommend using Sass and the popular framework built from it, Compass. Sass can be used to structure our CSS, while we can use Compass to beef up our styles and provide fallbacks.

A Rundown of Bourbon Neat Variables

A Rundown of Bourbon Neat Variables Icon
In this last section about Bourbon Neat we’ll look at the various “built-in” Sass variables it gives us. This will be a short ride, but knowing how to tweak your grids is important. Before we start, I should remind you that most of the time your Neat variables are best placed in one central location like in your **grid-settings** partial. In any case, to avoid any surprises, make sure you import this file _before you import Neat.

Working with Blogger Variables

Working with Blogger Variables Icon
Find out how to use Blogger variables to make your blog template's fonts and colours tweakable. Full example included.

Understanding Less Guards and Loops

Understanding Less Guards and Loops Icon
The developers’ desire to bring features from programming to CSS led to creation of CSS preprocessors. They allow us to define variables and create functions just as we do so in JavaScript; but even more important, we can make our code more flexible by using conditional and iterating blocks.