Setting the properties of CSS styles with mixins

Open your text editor and create a file named mixins.less. In this file, define a mixin for rounded corners, as follows:

.rounded-corners() {
  border-radius: 5px;
}

You will also need an index.html file containing some HTML elements to which you can give rounded corners.

Every element has a background-color and color property set to make the rounded corners visible and the fonts readable. The color property is set with the built-in contrast function. You can read more about the built-in functions in the Using the built-in functions of Less recipe. When you open the index.html file, it looks like the following screenshot:

Less allows you to copy the properties of a class to another by simply adding the class to the property list. Consider the following example Less code:

.class1
{
  property1: value1;
}
.class 2
{
  .class1
  property2: value2;
}

The preceding Less code will compile into the following CSS code:

.class1 { 
  property1: value1; 
} 
.class2 { 
  property1: value1; 
  property2: value2; 
} 

As you can see, the property1 property is added to the .class2 class, but .class1 has also been compiled into the source. With parentheses, the .class1 mixin is not compiled into the CSS source, so the following code will not be visible in the source:

.class1() { 
  property1: value1; 
} 

In the example code of this recipe, you set a background-color and color property for each element again. While using parametric mixins, as described in the Using parametric mixins recipe in Chapter 3, Using Variables and Mixins, you can write a second mixin to set these properties. The roundedcorners() mixin can be called from this particular mixin. The second mixin will then look like the following Less code:

.colored-and-rounded(@background-color: red) {
  .rounded-corners();
  background-color: @background-color;
  color: contrast(@background-color);
}

The colored-and-rounded() mixin can be added to the mixins.less file. Your project.less file will then look as follows:

@import "mixins.less";

@header-background-color: red;
@paragraph-background-color: orange;
@footer-background-color: green;

header {
  .colored-and-rounded();
}
p {
  .colored-and-rounded();
}
footer {
  .colored-and-rounded();
}