Entire Site
Free Trial
Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
15. Working with LessCSS > The Mighty Mixin
Mixins are similar to variables, in that you call them in much the same way. There are three differences between mixins and variables:
-
They start with a dot (.) instead of an @ symbol.
-
Instead of a general variable that you can call anywhere in your syntax, a mixin can only show up as its own line of code.
-
Unlike variables, a mixin can combine many lines of code into one neat little property that you can plug into your CSS whenever you need it.
The syntax for a mixin is exactly like standard CSS, for example:
.brown-link {
a {
padding: 1em;
background-color: @brown;
color: white;
}
a, a:hover {
background-color: @orange;
color: @brown;
}
}
