csswizardry-grids icon indicating copy to clipboard operation
csswizardry-grids copied to clipboard

Possible to use classes and silent classes at once

Open Yearhouse opened this issue 11 years ago • 3 comments

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:

  1. rewriting the scss fil it-self, but this causes problems with updating the core scss.
  2. 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 :(

Yearhouse avatar Feb 19 '14 09:02 Yearhouse

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.

fspoettel avatar Feb 20 '14 14:02 fspoettel

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 :)

Yearhouse avatar Feb 21 '14 07:02 Yearhouse

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'.

Cleecanth avatar May 28 '14 23:05 Cleecanth