lost
lost copied to clipboard
Add option to lost-column for updating the value
lost-column should have an option to help eliminate duplicate CSS
For example, if this is my input:
.supplier__info {
lost-column: 1/1;
@media (min-width:480px) {
lost-column: 1/4;
}
}
Then my output is:
.supplier__info {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 99.99%
}
.supplier__info:nth-child(n) {
margin-right: 15px
}
.supplier__info:last-child,.supplier__info:nth-child(1n) {
margin-right: 0
}
@media (min-width:480px) {
.supplier__info {
-webkit-box-flex: 0; /* Not needed */
-webkit-flex: 0 0 auto; /* Not needed */
-ms-flex: 0 0 auto; /* Not needed */
flex: 0 0 auto; /* Not needed */
width: calc(99.99% * 1/4 - 11.25px)
}
/* Not needed */
.supplier__info:nth-child(n) {
margin-right: 15px
}
/* :last-child not needed */
.supplier__info:last-child,.supplier__info:nth-child(4n) {
margin-right: 0
}
}
I don't know if the solution would be to pass an update flag in the lost-column call, or to have a separate lost-column-update call? It seems like there should be some way to avoid this mass-CSS-duplication.
Never mind, [it doesn't](https://github.com/giakki/uncss/issues/55)
Also worth mentioning, this isn't a Lost grid issue, but rather an inherent problem with using nesting selectors in all CSS preprocessing languages.
It may not inherently be a Lost grid issue, but it's one that Lost could fix? If you called lost-update-column instead of lost-column, you wouldn't get the flex declarations and the other two repeated selectors again, for example.
I'm liking the direction of this. I think this leads into a great thought process about what Lost's role is. Be looking for more discussion to see if Lost could help out with this. I'll leave this issue open for now as I want to capture this as a potential feature.
Thanks! :smile:
I think Lost could help with this. Lost really needs to do a few more things. You need to be able to generate reusable classes with it (e.g. .col-md-6
) without bloat and it'd be nice to do something like Dylan is suggesting where we somehow tell the API we're "updating". I think it'd be better as a param to lost-column
rather than creating a new rule lost-update-column
.
For instance:
.foo {
lost-column: 1/4;
@media (min-width: 500px) {
lost-column: 1/4 bp;
}
}
So far as the reusable classes, maybe that'd be best tackled after we are able to simply return a width value (mentioned and maybe addressed in some other issues).
Code bloat is never good. I think this could be added to the roadmap.