Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A collection of LESS mixins.
//
// LESS Utility Mixins
// -------------------
// Fill the parent element
.fill(@spacing: 0) {
position: absolute;
top: @spacing; bottom: @spacing;
left: @spacing; right: @spacing;
}
// Set all active states at once
.active(@rules) {
&:hover,
&:focus,
&:active,
&.active {
@rules();
}
}
// Justify for responsive layout
// http://www.barrelny.com/blog/text-align-justify-and-rwd/
.justify() {
text-align: justify;
&:after{
content: '';
display: inline-block;
width: 100%;
}
> * {
display: inline-block;
vertical-align: top;
text-align: left;
}
}
// Aspect ratio
// (Apply to container)
// http://www.mademyday.de/css-height-equals-width-with-pure-css.html
.aspect-ratio(@w, @h) {
@ratio: (@h / @w);
&:before {
content: "";
display: block;
padding-top: (100% * @ratio);
}
> * {
.fill;
}
}
// Toggle font smoothing mode in Webkit & FF
.font-smoothing() {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.font-smoothing(reset) {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
// Disable default form input appearance in Webkit & FF
.appearance(@appearance: none) {
-webkit-appearance: @appearance;
-moz-appearance: @appearance;
appearance: @appearance;
}
// Combo width/height media queries
.screen-min(@size, @rules) {
@media (min-width: @size), (min-height: @size) {
@rules();
}
}
.screen-max(@size, @rules) {
@media (max-width: @size), (max-height: @size) {
@rules();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.