twigkit/semantic.gs — Issue #30: What about conditional column widths for responsive layouts?
Author: andyra
Created: 2011-12-01 17:30:08+00:00
State: open

Instead of having to respecify every single tag you've set a column width on inside a media query, it would be cool to just re-specify the .column mixin if the screen goes below a certain size.

Right now we have to find every tag with a .column(x) mixin and set them to .column(12), like so:

@media screen and (max-width: 480px) {
article {
.column(12);
}
aside {
.column(12);
}
}

Would it be possible to do something equivalent to:

@media screen and (max-width: 480px) {
.column(x) {
width: 100%;
}
}

This doesn't work, but I was wondering if there was some obscure LESS/SASS conditional logic that could somehow take care of this.