Mixins are not compiled into the final CSS code. In some situations, it will be useful to define a class with the same name and properties as the mixin. In this recipe, a clearfix
mixin is used as an example.
For this recipe, you will have to create the clearfix.less
and index.html
files, which load the Less file and less.js
compiler with the following code in the head
section:
<link rel="stylesheet/less" type="text/css" href="clearfix.less"> <script src="less.js" type="text/javascript"></script>
Open the
index.html
file with your favorite text editor and write the following HTML structure into it:<div class="row"> <div class="column">C1</div> <div class="column">C2</div> </div> <div>positioned under the row</div> <br> <div class="clearfix"> <div class="column">C1</div> <div class="column">C2</div> </div> <div>...