Skip to content

Instantly share code, notes, and snippets.

@hereswhatidid
Last active December 20, 2015 05:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save hereswhatidid/6081209 to your computer and use it in GitHub Desktop.
Save hereswhatidid/6081209 to your computer and use it in GitHub Desktop.
Sample of nested LESS extend use
// Here is what I have in the LESS
.furniture-details {
text-align: justify;
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.detail-column {
display: inline-block;
vertical-align: top;
text-align: left;
}
.visuals {
&:extend( .furniture-details .detail-column );
width: 42%;
}
.specs {
&:extend( .furniture-details .detail-column );
width: 52%;
}
&:after{
content: '';
display: inline-block;
width: 100%;
}
}
// This is what is returned after processing
.furniture-details {
text-align: justify;
}
.furniture-details *,
.furniture-details *:before,
.furniture-details *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.furniture-details .detail-column,
.furniture-details .visuals,
.furniture-details .specs {
display: inline-block;
vertical-align: top;
text-align: left;
}
.furniture-details .visuals {
width: 42%;
}
.furniture-details .specs {
width: 52%;
}
.furniture-details:after {
content: '';
display: inline-block;
width: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment