-
-
Notifications
You must be signed in to change notification settings - Fork 352
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
A way to handle complex grid contexts #443
Comments
That's an interesting idea. I'm not opposed to something like that, but is it really needed? You're making the current solution harder than it needs to be. You can already pass the entire @include nested(3 of $large at 2) {
@include span(2 last);
} |
The advantage of your solution is that it allows you to create any new named context on the fly. That is a pretty slick feature. I wonder if this feature could serve double-purpose? .initial {
@include span(last 2 of (1 2 4 6 3 1) as sidebar-right);
}
// Nested Context
.nested {
@include span(1 of sidebar-right);
}
// Similar Span
.similar {
@include span(sidebar-right);
} |
The beauty of this is that you can make it work with deep nested contexts as well, which means you don't have to remember and calculate the context at a later stage. It's going to be helpful if we're working with asymmetric grids since that's more complex. What you suggested is cool, "as" sounds like a great keyword to use for this feature, and I hadn't thought of the How about handling contexts at different media queries then? Do we leave it to the users? .initial {
@include span(last 2 of (1 2 4 6 3 1) as sidebar-right);
@include breakpoint(600px) {
@include span(last 2 of (1 3 3 4 4 4) as sidebar-right-large);
}
}
.nested {
@include nested(sidebar-right) {
@include span(1 of sidebar-right);
}
// This currently does not work with asymmetric grids because it uses with-layout()
@include susy-breakpoint(600px, sidebar-right-large) {
@include span(1);
}
// This might work with the current code
@include breakpoint(600px) {
@include nested(sidebar-right-large) {
@include span(1)
}
}
} What do you think? |
It can be difficult and confusing to work with multiple nested context when the site gets big, especially if we are working with asymmetric grids.
We need to use the
nested()
mixin to create contexts, resulting in code likeI thought of a way to store the context and retrieve it whenever needed
The code above will become:
Optionally, you can also set flags for different breakpoints:
Here's a Demo on Sassmeister:
Play with this gist on SassMeister.
<script src="http://cdn.sassmeister.com/js/embed.js" async></script>Its working pretty well for me right now. Will anyone be interested in this?
The text was updated successfully, but these errors were encountered: