Book Image

Less Web Development Cookbook

Book Image

Less Web Development Cookbook

Overview of this book

Table of Contents (19 chapters)
Less Web Development Cookbook
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Using mixins to set properties


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.

Getting ready

  1. For this recipe, you will have to create a project.less file and an index.html file, 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="less/project.less">
    <script src="less.js" type="text/javascript"></script>
  2. 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 your project.less file with the following code:

    @import "less/mixins.less";
  3. Finally, you should end up with the following...