In this exercise we're going to focus on how you can use variables to assign values, which can be reused by LESS throughout the stylesheet. We'll use a simple example of three blocks, using three different colors that will have been chosen based on calculated values, using operator functionality of LESS; we will explore more of this later in this book.
For this exercise you will only need your text editor. As the accompanying LESS code is very small, we will get LESS to compile it on the fly.
- Remember that template we created at the start of this chapter? Open it in your usual text editor, add the following lines, and save it as
test less variables.html:<body> <div id="div1">This is test number 1</div> <div id="div2">This is test number 2</div> <div id="div3">This is test number 3</div> </body>
- Create a second new blank document, and save this as
variables.less; add in the following lines:@red: #610000; @light_red: @red + #333; @dark_red: @red - #333; @header-font: 'Cookie', cursive; @header-font-color: #fff; #div1 { background-color: @dark_red; width: 300px; height: 100px; font-family: @header-font; font-size: 30px; color:@header-font-color; } #div2 { background-color: @red; width: 300px; height: 100px; font-family: @header-font; font-size: 30px; color: @header- font-color; } #div3 { background-color: @light_red; width: 300px; height: 100px; font-family: @header-font; font-size: 30px; color: @header-font-color; } - If you preview the
test less variables.htmlfile in your browser, you will see three blocks, with different shades of red; the bottom two are using calculated values that have been subtracted from the original@redvalue:
In this LESS code we have two parts of LESS' functionality at play here—variables and operators. The former works on a direct swap. We assign a value to a variable, in a similar fashion in many other programming languages, and get LESS to replace any instance of that variable with the appropriate value throughout the code.
The latter uses a similar process, but goes one further. It replaces each instance of a specific variable with its appropriate value, and then works out the calculation. The value rendered on screen will be the result of that calculation. We will look at operator functionality of LESS in the Using JavaScript operators in LESS recipe, later in this book.
To see the rendered CSS in action, you can use something like Firebug to view the rendered code, which will look something like the following:
#div1 {
background-color: #2e0000;
width: 300px;
height: 100px;
font-family: 'Cookie', cursive;
font-size: 30px;
color: #ffffff;
}
#div2 {
background-color: #610000;
width: 300px;
height: 100px;
font-family: 'Cookie', cursive;
font-size: 30px;
color: #ffffff;
}
#div3 {
background-color: #943333;
width: 300px;
height: 100px;
font-family: 'Cookie', cursive;
font-size: 30px;
color: #ffffff;
}The preceding example was designed to illustrate how variables can be used. If we take the concept a little further, variables can really come into their own in the following scenario.
How many times have you found yourself setting up a specific color scheme for your site, only to find you want to change it halfway through development?
When you first started developing websites, you probably did something like this: you used comments at the start of the CSS stylesheet to specify which colors would be used, right? I bet it was something like the following:
/* Colors for my Website
#ff9900 - Orange - used for links and highlighted items
#cccccc - Light Gray - used for borders
#333333 - Dark Black - Used for dark backgrounds and heading text color
#454545 - Mid Black - Used for general text color
*/
body { background: #333333; color: #454545; }
a { color:#ff9900; }
h1, h2, h3, h4, h5, h6 { color: #333333; }It works, so you're probably thinking why would I want to change it, correct? There are three good reasons to do so:
- If you decide halfway through developing the site that it's not going to be easy to update each reference, if you have a very large stylesheet.
- Unless you have a very good memory, you may find it hard to remember what each color value is, without having to resort to HTML color names.
- At present, the comments don't really serve any purpose, other than as documentation. What if we could actually use this documentation as part of the styles?
With LESS, we can alter our workflow, and use the documentation as part of the CSS styles:
/* Colors for my Website */
@color-orange: #ff9900;
@color-gray_light: #cccccc;
@color-black_dark: #333333;
@color-black_medium: #454545;
body { background: @color-black_dark; color: @color- black_medium; }
a { color: @color-orange; }
h1, h2, h3, h4, h5, h6 { color: @color-black_dark; }The beauty of using variables here is that you can use more memorable names, which could potentially refer to their location at the same time, such as @black-top-border. You can then specify all of the values in a variable block at the beginning of the CSS stylesheet. These could even be hived off into a separate LESS file and imported (more on this later). You could even put comments against each color variable if you desire, depending on how careful you've been with naming each variable!