Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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;
}

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.

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