by
4
5
2,772
4
Top 1% !
Famous
Easy-to-find
Specified
MultiPlatform
Popularity: 5790th place
Languageless
LicenseMIT_X11

Using mixin in LESS with inheritance to reuse common style

This simple LESS file shows how to use mixin.
Mixin are used to group some CSS instructions in handy, reusable classes. 
You can embed all the properties of a class into another class by simply including the class name as one of its properties.

Since the structure of the css classes is similar, I specify the mixin with also references to the inherit structure of the classes, using the &-<class> statement.
Copy Embed Code
<iframe id="embedFrame" style="width:600px; height:300px;"
src="https://www.snip2code.com/Embed/169230/Using-mixin-in-LESS-with-inheritance-to-?startLine=0"></iframe>
Click on the embed code to copy it into your clipboard Width Height
Leave empty to retrieve all the content Start End
.contentRegion { margin: 5px; &-Side { @leftWidth: 500px; @leftMargin: 15px; @leftTotalWidth : @leftWidth + @leftMargin; &-left { float: left; width: @leftWidth; margin-right: @leftMargin; vertical-align: top; .mixinProperty() { &-label{float: left;} &-control{display: inline-block;} } &-one { .mixinProperty; } &-two { .mixinProperty; } &-three { .mixinProperty; } } } } <div class="contentRegion"> <div class="contentRegion-Side-left"> <div class="contentRegion-Side-left-one"> <div class="contentRegion-Side-left-one-label">One</div> <div class="contentRegion-Side-left-one-control">123</div> </div> <div class="contentRegion-Side-left-two"> <div class="contentRegion-Side-left-two-label">Two</div> <div class="contentRegion-Side-left-two-control">321</div> </div> <div class="contentRegion-Side-left-three"> <div class="contentRegion-Side-left-three-label">Three</div> <div class="contentRegion-Side-left-three-control">345</div> </div> </div> </div>
If you want to be updated about similar snippets, Sign in and follow our Channels

blog comments powered by Disqus