Book Image

Learning less.js

Book Image

Learning less.js

Overview of this book

Table of Contents (22 chapters)
Learning Less.js
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Developing parametric mixins


So far, we have examined how you can use mixins to create blocks of code that can easily be reused throughout your style sheets. On principle, this works great. However, what if you found yourself wanting to reuse the same block of code but couldn't, as the values were different?

Well, this is possible with Less; we've already covered how we can create mixins as reusable blocks of code. Let's take this a step further and introduce the use of parameters—here, we can pass values between the main Less file and individual mixins. When compiled, Less will use the appropriate values that are being passed to produce the desired CSS. Let's see this in action by making some changes to our simple form, which we created earlier in this chapter.

Crack open a new file and add the following mixins:

.background (@bkgrd) { background: @bkgrd; }

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.box...