In Less, mixins can be used to set the properties of a CSS style. The same mixin can be used to set more than one CSS style. On the official Less site, they call this mix-in properties from existing styles. Looking at mixins this way will make mixins nothing else than just a common style. In contrast to normal styles, mixins are not compiled in the final CSS.
For this recipe, you will have to create a
project.less
file and anindex.html
file, which load the Less file andless.js
compiler with the following code in thehead
section:<link rel="stylesheet/less" type="text/css" href="less/project.less"> <script src="less.js" type="text/javascript"></script>
Although not required, it is a good practice to define your mixins in a separate file. For this reason, create a file named
mixins.less
. This file should be imported in yourproject.less
file with the following code:@import "less/mixins.less";