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

Ability to change class names #70

Open
kirbelots opened this issue Oct 25, 2018 · 0 comments
Open

Ability to change class names #70

kirbelots opened this issue Oct 25, 2018 · 0 comments

Comments

@kirbelots
Copy link

kirbelots commented Oct 25, 2018

Hi.

What do you think about adding the ability to choose class names?

For example, I don't like the .hamburger-inner, and I want to change it. Now for this, I need to manually change classes in all files. It would be great if there was an opportunity to choose the names of the classes. #41 is about replacing .is-active to .active. You sad:

I believe the use of is-active is better practice. The is-* prefix is used to define selectors that are specifically for altering the state of a component.
That said, a dash in a CSS name should not lead to any problems—it is extremely common practice.

I agree. But what if I want e.g. rename .is-active to .isActive.

How this can be implemented:

$hamburgerClassName: 'Hamburger';
$hamburgerBoxClassName: 'Hamburger-box';
$hamburgerSliceClassName: 'Hamburger-slice';
$hamburgerActiveClassName: 'is-active';

.#{$hamburgerClassName} {
cursor: pointer;
display: inline-block;
padding: $hamburgerIndentY $hamburgerIndentX;

transition-duration: 0.15s;
transition-property: opacity, filter;
transition-timing-function: linear;
/* ... */
}

CSS-tricks article Use a Sass Variable for a Selector by Chris Coyier

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

1 participant