In Less, mixins hold a set of properties that can be reused for different rulesets. The properties of a mixin are included in the ruleset. The mixin itself does not generate output to the final CSS. They look like normal classes (or an ID ruleset, starting with #
). Although they are optional, most mixin declarations end with parentheses, which prevent the mixins from compiling into the source. A mixin with parentheses is called a parametric mixin. You can read more about parametric mixins in the Using parametric mixins recipe in Chapter 3, Using Variables and 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.
You first need to create a valid HTML5 document named
index.html
with the following elements:<header>the header</header> <p>this is a paragraph</p> <footer>the footer</footer>
Make sure the
head
section of yourindex.html
file also contains the following code:<link rel="stylesheet/less" type="text/css" href="project.less"> <script src="less.js" type="text/javascript"></script>
Note that the preceding code references a Less file called
project.less
instead ofmixins.less
After creating the
index.html
file, you can start writing your Less code, which will give the HTML elements rounded corners. Since mixins can be reused, it will be a good practice to write them in a separated file, enabling you to import the mixins in your other projects too.Now, create your
project.less
file. This file imports the mixin(s) from themixins.less
file using the following code:@import "mixins.less";
After creating the files, visit the
mixins.less
file. Here, write the following code:.rounded-corners() { border-radius: 5px; }
Following this edit, you can give an HTML element rounded corners by adding the
rounded-corners()
mixin call to its property list. Finally, yourproject.less
file will look as shown in the following code:@import "mixins.less"; @header-background-color: red; @paragraph-background-color: orange; @footer-background-color: green; header { .rounded-corners(); background-color: @header-background-color; color: contrast(@header-background-color); } p { .rounded-corners(); background-color: @paragraph-background-color; color: contrast(@paragraph-background-color); } footer { .rounded-corners(); background-color: @footer-background-color; color: contrast(@footer-background-color); }
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(); }