Chapter 2. Using Variables and Mixins

In this chapter, you will study Less in more detail, where you will learn more about variables and mixins. Variables in Less are often defined in a single place, but they can be used or overridden elsewhere in the code. In Less, you can override a variable by putting the definition afterwards. Variables are used to define commonly used values that can be edited only once at a single place. Based on the Don't Repeat Yourself (DRY) principle, commonly used values will help you build websites that are easier to maintain. Mixins are used to set the properties of a class. They bundle multiple declarations in a single line of code and are also reusable. You will learn how to create, use, and reuse them in your project and write better CSS without code duplications.

This chapter will cover the following topics:

• Using comments in Less

• Using variables

• Variable interpolation

• Escaping values

• Using mixins

Using comments in Less

Comments make your code clear and readable for others. It is important that you are able to understand them clearly. That is why this chapter starts with some notes and examples of comments.

Tip

Don't be sparse with your comments when keeping the file size, download time, and performance in mind. In the process of compiling and minimizing your final CSS code, comments and other layout structures will be effectively removed. You can add comments for understanding and readability wherever needed.

In Less, you can add comments in the same way as you did while writing the CSS code. Comment lines are placed between /* */. Less also allows single-line comments that start with //.

Using Less, only the true CSS comments (/* */) will be included in the generated CSS file. Minimizers will remove these comments in your final compiled style sheet. An example of this can be seen in the following code:

/* comments by Bass
.mixins() { ~"this mixin is commented out"; }
*/

Nested comments...

Using variables

Variables in Less help you to keep your files organized and easy to maintain. They allow you to specify widely used values in a single place and then allow you to reuse them throughout your Less code. The properties of the final style sheet can be set with variables. So, imagine that you don't have to search for every declaration of a specific color or value in your style sheets any more. How does all of this work? Variables will start with @ and have a name.

Examples of such variables include @color, @size, and @tree. To write the name of these variables, you are allowed to use any alphanumeric character, underscores, and dashes. This means that @this-is-variable-name-with-35-chars is a valid variable name.

Unfortunately, the use of @ is ambiguous in Less. As you have seen in the preceding chapter, parameters used by mixins also start with @. That's not all! As a valid CSS code is also a valid Less code, there will be CSS media query declarations that also start with @. The...

Variable interpolation

In Less, variables can be used inside selector names, property names, URLs, and even import rules. The compiler applies string interpolation to replace the variable reference with its corresponding value.

Variables can be written with curly brackets around their name to prevent ambiguity. Take a look at the following Less code example:

@var: less;
.@{var} {
  property: ~"@{var}-5";
}

The preceding code will get compiled in CSS as follows:

.less {
  property: less-5;
}

Since Less v1.6, you can also use variable interpolation for properties. You can see this if you inspect the following Less code:

@property: width;
.fixed {
  @{property}: 100%;
  max-@{property}: 500px;
}

The preceding code will get compiled in CSS as follows:

.fixed {
  width: 100%;
  max-width: 500px;
}

In some situations, you will need quotes around the values; escaping these values will be explained in the next section. Variable interpolation can also be used to create variable variables, as can be seen in...

Escaping values

Less is an extension of CSS. This means that Less gives an error when you try to compile a CSS syntax that is not valid or uses a proprietary syntax, which Less doesn't recognize. Note that Less only checks the syntax and does not check whether the assigned value makes sense. The following code assigns a color to the width property:

p {
  width: darkblue;
}

Although the CSS syntax for the width property only allows auto | value | initial | inherit, with value the width value in px, cm, em, and so on, or a percentage assigned. Less also compiles the invalid color value.

Some browsers define properties with an invalid CSS code. Well-known examples will include some properties, such as property: ms:somefunction(). Some of these rules can be replaced by vendor-specific rules. It is important to note that the invalid property values won't get compiled in Less. To compile the property: ms:somefunction() value in your CSS code, you can use the following Less code:

selector {
property...

Using mixins

Mixins play an important role in Less. You saw mixins in the preceding chapter when the rounded-corners example was discussed. Mixins take their naming conventions from object-oriented programming. They look like functions in functional programming, but in fact, act like C macros. Mixins in Less allow you to embed all the properties of a class into another class by simply including the class name as one of its properties, as shown in the following code:

.mixin(){
  color: red;
  width: 300px;
  padding: 0 5px 10px 5px;
}
p{
  .mixin();
}

The preceding code will get compiled in the following code:

p{
  color: red;
  width: 300px;
  padding: 0 5px 10px 5px;
}

In the final CSS code used on the website, every <p> paragraph tag will be styled with the properties defined in the mixin() function. The advantage will be that you can apply the same mixin on different classes. As seen in the rounded-corners example, you only have to declare the properties once.

Try opening less/mixins...

Summary

In this chapter, you learned about variables and mixins. You saw how defining variables and mixins at a single place will reduce your code and make it easy to maintain.

In the next chapter, you will learn more about mixins and how to nest and extend them. You will also read about the built-in functions of Less. Built-in functions can be used to manipulate values in mixins and other parts of your code.