csswizardry-grids
csswizardry-grids copied to clipboard
Possible to use classes and silent classes at once
Hi
Been trying to figure out if its possible to use both regular classes and silent classes. This is due to the reason that I think that @extend .classname becomes rather bloated in comparision to just extending silent classes.
The only two ways I figured out is:
- rewriting the scss fil it-self, but this causes problems with updating the core scss.
- including the csswizardry-grid twice. Once with the param set to use silent classes and once setting param to use regular classes.
Both ways seems error prone to me :(
What do you want to achieve exactly? If you just want to use regular classes for setting common stuff like gridand grid__item in your markup, you could do something like this.
.grid {
@extend %grid;
}
.grid__item {
@extend %grid__item;
}
.grid--full {
@extend %grid--full;
}
This way, you could use the regular classes for the stuff you need in your markup and use the silent classes for the rest.
Hi Felics
That makes sense in some degree. But sometimes we in out team need to quickly prototype something could be a new landing page, a new site and here Classnames would be faster.
I mainly think about the width and responsive widths.
But maybe thats just me :)
But then again we could just use the class names scss for prototyping...hmmm
Anyway thanks for the input Felics, made me thinking :)
There is a way, but it's sort of messy. It requires some deep changes to the original code, but here's a go at it.
$class-type: unquote(", .");
@if $use-silent-classes == true{
$class-type: unquote("//");
}
//...
// Change every width/push/pull to the following:
%#{$namespace}one-whole#{$class-type}#{$namespace}one-whole
{ width:100%; }
This basically comments out the . classes if $use-silent-classes is 'true'.