Chapter 3. Nested Rules, Operations, and Built-in Functions

In this chapter, you will learn how Less helps you organize your CSS selectors more intuitively, makes inheritance clear, and makes your style sheets shorter. You will also learn about operations and built-in functions. Operations let you add, subtract, divide, and multiply property values and colors. They also give you the power to create complex relationships between properties. You will also learn how to set variables or guards using the built-in functions in your Less code.

This chapter will cover the following topics:

• Nesting the CSS rules

• Using operations

• Using built-in functions in your code

• Using built-in functions in your mixins

The navigation structure

With the examples in this chapter, you will extend the layout from Chapter 2, Using Variables and Mixins, step by step with a navigation structure. You will build this navigation structure by styling an HTML list with Less. This navigation structure forms a menu in the sidebar of the layout.

The final result will look like the following screenshot:

The final navigation menu built using Less

Working with nested rules

You will use the layout example from Chapter 2, Using Variables and Mixins, to study nesting of rules in more detail.

To do this, you must first open http://localhost/index.html in your browser, and then open less/sidebar.less in your text editor.

Anchors are added to the menu items. This means that the HTML of the side menu now looks like the following code:

<aside id="sidebar">
  <h2>Side menu</h2>
  <ul>
    <li><a href="page1.html">item 1</a></li>
    <li><a href="page2.html">item 1</a></li>
  </ul>
</aside>

You need a selector for each rule to style the different elements in CSS, as can be seen in the following code:

#sidebar h2{
  color: black;
  font-size: 16px;
}
#sidebar ul li a{
  text-decoration: none;
  color: green;
}

As you can see, both the ul (including the li element and the a anchor) and the h2 elements are the children of the aside element with the #sidebar ID. CSS doesn...

Referencing the parent selector with the & symbol

The & symbol plays a special and important role in Less as it references the parent of the current selector. You can use it to reverse the order of nesting, and to extend or merge classes. You will see that the following example will tell you more than what can be expressed in a thousand words:

.class1
{
  .class2{
    property: 5;
  }
}

.class1
{
  .class2 & {
    property: 5;
  }
}

This code will compile into the following code:

.class1 .class2 {
  property: 5;
}
.class2 .class1 {
  property: 5;
}

You can see that .class2 becomes the parent of .class1 when you use the & symbol after it. The & symbol can also be used to reference nesting that is outside the mixin, as can be seen in the example about the conditional .ie8 class in the Passing rulesets to mixins section.

The & symbol can also be used to nest and append pseudo classes to a class. Later on, you will see that you can use it to append classes too. A simple example...

Passing rulesets to mixins

In Chapter 2, Using Variables and Mixins, you read about the parametric mixins. Since the 1.7.0 release of Less, you can also use a so-called detached ruleset as an argument for a mixin. Detached rulesets can be stored in a variable and can contain any valid Less code such as grouped selectors, nested rulesets, media declarations, and built-in functions.

Detached rules can be called by appending parentheses after their names. The content of the detached ruleset has been copied to the position of the caller.

An example of a detached ruleset can be found in the following Less code:

@color-ruleset: { color: red; };
p {
  @color-ruleset();
}

The preceding code will compile into the CSS code as follows:

p {
  color: red;
}

Mixins with detached rules can be used to prevent code duplication in case you need different style rules for different media queries or classes. Consider the following Less code to get a grip on this useful usage of Less' detached rules feature.

.smallscreens...

Operating on numbers, colors, and variables

Less has a support for the basic arithmetic operations: addition (+), subtraction (-), multiplication (*), and division (/). In the strict-math mode, operations should be placed between parentheses. You can apply an operation on variables, values, and numbers. These operations help you make relationships between variables.

Open less/footer.less to immediately see the operation that you used, as in the following code, and its benefits:

footer {
  div {
    float: left;
  width: ((@basic-width / 3 ) - @footer-gutter);
  }
}

In the preceding code, the / sign (division) has been used to give the footer columns one-third of the available width (as set by @basic-width). Using operations in your code feels so natural that you may not even have realized that you have been using them until now. Less uses normal order precedence, where you can add extra parentheses to explicitly set precedence and avoid confusion. For instance, in Less, 3 + 3 * 3 gives 12....

Property merging

Property merging is useful if properties accept a comma-separated value (CSV) or space-separated lists. You will find this type of property mostly in CSS3, where borders, backgrounds, and transitions accept a CSV list. However, you will also find that the old-school font-family parameter accepts a list of font names that are separated by commas. Properties are merged by adding a + flag for comma-separated lists, or a +_ flag for space-separated lists, after their names. The following code will show you how to merge values with a comma:

.alternative-font()
{
  font-family+: Georgia,Serif;
}
.font()
{
  font-family+: Arial;
  .alternative-font;
}
body {
  .font;
}

This code will get compiled into the following code:

body {
  font-family: Arial, Georgia,Serif;
}

For space-separated lists, you can consider the following Less code:

.text-overflow(@text-overflow: ellipsis) {
  text-overflow+_ : @text-overflow;
}
p, .text-overflow {
  .text-overflow();
  text-overflow+_ : ellipsis;...

Built-in functions

Less supports many handy built-in functions. A built-in function can be used to manipulate the Less values inside mixins and set the variables' values. Last but not least, they can also be used in guard expressions. You will find the complete list of functions at http://lesscss.org/functions/.

In this chapter, you won't find all these functions, but you will learn how to use functions from all different groups. Functions can be grouped based on their input and output types; these types are mathematical functions, color functions, list functions, string functions, and type functions. There are also a small number of functions that can't be grouped using the preceding classification.

JavaScript

The Less functions map the native JavaScript functions and code in the first place, because of the fact that Less has been written in JavaScript. Currently, the JavaScript expressions can still be evaluated as values inside the Less code, but this ability may be removed in future versions...

The box-shadow mixin

With all that you have learned about Less, you can now understand, build, and evaluate any complex Less code. To prove this, open less/mixins.less and take a look at the box-shadow mixin (originally published at http://lesscss.org/), which looks like the following code:

.box-shadow(@style, @c) when (iscolor(@c)) {  box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}

To fully understand these mixins, you will have to know the basics of box-shadow in CSS3. The box-shadow properties accept a CSV list of shadows. A shadow consists of a list of two to four length values and a color. The first two length values describe the vertical and horizontal offsets related to the center of the box. These values are required but can be set to 0 to get an equal-sized shadow around the box. The final values are optional and set the blur radius and the spread radius, respectively. The blur and spread radii are...

Summary

In this chapter, you built a navigation menu with Less. The navigation contains, among other things, hovers, contrast colors, and icons that can all be set with a few basic settings. You have learned how to use the nesting rules, mixins, and built-in functions in Less. You were even introduced to writing your own functions. By the end of the chapter, you have understood and used the complex Less code. All this newly acquired knowledge will be very useful in the next chapter.

In the next chapter, you will learn how to find and build the reusable Less code. This will help you work faster and obtain better results.