Skip to content

@nicolechung /less.css
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
LESS vs CSS
/* less file */
.my_mixin {
display: block;
text-indent: -9999em;
background-color: transparent;
background-position: 0 0;
background-repeat: no-repeat;
overflow: hidden;
}
h1 a, .pagination em, .cog a {
.my_mixin
}
/* css file */
.my_mixin {
display: block;
text-indent: -9999em;
background-color: transparent;
background-position: 0 0;
background-repeat: no-repeat;
overflow: hidden;
}
h1 a, .pagination em, .cog a {
display: block;
text-indent: -9999em;
background-color: transparent;
background-position: 0 0;
background-repeat: no-repeat;
overflow: hidden;
}
@alliwagner

Sure, my point is that the style of writing I interpreted LESS to encourage is not to group selectors with similar styles and instead turn repeated styles into mixins early-on in development, then adding the mixin to the appropriate declaration right then and there as you write your styles. So mixins take the place of grouping global styles. Image-replacement is an extreme example. In my next LESS project, I wont embed image-replacement into declarations, I'll stay traditional with it...I'll try to keep my mixins to less than 3 properties to avoid code-bloat.

I wrote things like

(line 20 of LESS file) h1 a { .ir; position: relative; margin-bottom: 20px; }
(line 540 of LESS file) .pagination em { .ir; position: absolute; top: 10px; right: 0; }
(line 800 of LESS file) .cog a { .ir; position: absolute; bottom: 0; left: 10px; }

instead of grouping as you provided in your example.

@alliwagner

Yes!! Me too. Seems to solve the problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.