Skip to content
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

Possible to use classes and silent classes at once #63

Open
Yearhouse opened this issue Feb 19, 2014 · 3 comments
Open

Possible to use classes and silent classes at once #63

Yearhouse opened this issue Feb 19, 2014 · 3 comments

Comments

@Yearhouse
Copy link

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

@fspoettel
Copy link

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.

@Yearhouse
Copy link
Author

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

@Cleecanth
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants