Join Joe Marini for an in-depth discussion in this video Using variables, part of CSS with LESS and Sass.
Let's start off by looking at using variables in LESS. Using variables just by themselves is one of those features that will probably make you want to stop using plain old CSS, and switch to something like LESS, or Sass. Variables define placeholders for values that are going to be used in several places throughout your CSS styles. Variables can have different kinds of values. They could be colors, they could be strings, they could be numbers, and we'll see an example of that in just a moment. It doesn't take a whole lot of imagination to see an example where this would be really useful.
Let's imagine that I had some CSS, and I had an accent color, and the accent color is #24a, which is what I've given it here. And you can see I'm using it on a span, and I might use it somewhere else in my code. I might have a column, I might have a sidebar, I might have some other elements that use this color. Now, a couple of problems become apparent pretty quickly. Number one, if I ever decided to change this color, I would have to do a search and replace on all the places where I used the color, and that's error-prone, and it's time-consuming. And if I use any other colors that are based on this color, then those would all have to change too.
I would have to go back and recalculate them, figure out what the right color to use is, and so on, and so forth. Variables help solve this problem, and in LESS, the way that you define a variable is by using the @ symbol. So here, I have @accentColor, and I've given it the hex value of 24a. And now I can just go ahead and use this variable in place of all the other places where I've used it. I think this is pretty self-evident how useful this is. Let's jump over to the code, and see some real examples in action.
So here we are in the code, and I've got my ExamplesSnippets file open, and scroll down to Chapter 2, which is the chapter we're working in. This is all the basic LESS features, and we're going to start off using variables. Let's go ahead and open up the var_styles.less file, and this is where we're going to be doing our work for this example. And I'll also open up the LESS_SampleDoc file, and this is the sample file that we're going to use as a test bed for all of our LESS work in this chapter. And you can see it's a pretty straightforward document.
It has some divs, it has a header, some body content, I've got an unordered list in here; I have a footer. Back to the Snippets. Let's start off with something simple. I'm going to Copy these first two lines here that define some color variables. I'm going to paste them into my var_styles.less file, and then let's use them somewhere. So I'll copy over the definitions for h1, and h2, and I'll paste that in here. Let's take a look at what it is we've done.
I've got two Variables; @myColor1, and @myColor2, and then I'm using them in the rule definitions for h1 and h2 here. Well, right now I'm only using @myColor1, but I could use @myColor2 just as easily. I'm just demonstrating that, in this case, I've got a named color, here I've got a hex color, so you can have variables of different types. So let's go ahead and save this, and when we save this, the SimpLESS compiler, which is running in the background, is now watching this file, and will generate the CSS for us. So let's go ahead and open up var_styles.css, and you can see, sure enough, that for h1 and h2, we have the color, which has been translated into its hex equivalent, which in this case is 0080, and that's a navy color, and you can see it's been minified.
So let's close this. We'll save, we'll go back to the sample file, and now in the href for the style sheet, I can just refer it to a regular CSS file now. I'll type var, and I'll just use the var_styles.css, and save, and let's go ahead and bring this up in the browser, and see what it looks like. I'll just go ahead and bring this up in Firefox, and you can see that the colors for the h1 and the h2 are now in fact navy. So far, so good. Let's head back to the code.
Let's copy over some other examples. I'm going to bring over this line here from @myStringVar on down to @paddingVar. I'll copy those, and I'll paste them in down here. And then let's copy over the code that uses them, so I'll select these lines, and copy and paste those down here. Let's take a look at what it is that we've done. So we've already seen the examples where I have two color variables. I've defined a variable now for a string, and we'll see how that's used in the moment.
I've got a font size variable, and then I have a couple of variables that are multi-value. So here for padding, I've defined a padding definition that uses the different sides of padding. For the border, I had defined a variable that has a thickness, a border type, and in fact, I'm reusing the color variable that I defined up here. So I can use variables inside my variables. Let's scroll down into the rules. You can see that here for the rule definition for the element with the ID of mypara, which if we go back to the HTML, you can see that that's this paragraph right here, I'm saying, make the font size whatever the font size variable is, and I'm using the border and padding variables to assign some border and padding.
And for the string variable, I'm going to use the pseudo-selector in CSS for after, which will insert the content defined by the string variable at the end of that paragraph. If we look back in the source, we have sample paragraph of text, and if all goes well, with an appended string, will be added into the document. So let's save. I'm going to switch back to the HTML document, and we'll bring this up in Firefox.
And you can see that we have our colored h1's, like we had before. Here we have our mypara element, with a 4 pixel blue border. You can see that's been padded. The font size has been set, and sure enough, with an appended string, was added into the document. So hopefully this gives you an idea of how powerful variables can be. Variables can really save you a lot of time. They can really make your CSS a lot easier to read and maintain, and it's one of the features that you're going to love about using LESS, and later on, you'll see about Sass.
The first section focuses on LESS (Leaner CSS) and how it can be used on both the client and the server. The lessons show how to work with variables, mixins, nested rules, and other features to easily create maintainable CSS.
The second section introduces Sass (Syntactically awesome stylesheets), which contains many of the same features as LESS, along with a few new ones. Joe also compares and contrasts the two tools, and explains how your platform and needs may influence which tool you choose.
- What are LESS and Sass?
- Using variables in your CSS
- Working with reusable and parameterized mixins
- Implementing nested rules
- Combining CSS rules with operations
- Using the built-in functions in LESS and Sass
- Controlling the CSS output formatting
- Importing external files