Mixins can be used with parameters, which make them more flexible and reusable.
For this recipe, you will have to create the following file and folder structure:
You can edit these files with your favorite text editor and inspect the results with your web browser.
In this recipe, you will leverage a simple mixin to set the border radius of the HTML elements by performing the following steps:
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>
Open the
project.less
file with your text editor and write the following mixins into it:.rounded-corners(@radius) { border-radius...