search

Compass / compass

Compass is no longer actively maintained. Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain.
http://compass-style.org
Other
6.72k stars 1.18k forks source link

Sprite magic selector takes hover state from dash separated file name #1115

Open ttamminen opened 11 years ago

ttamminen commented 11 years ago

According to the documentation (http://compass-style.org/help/tutorials/spriting/magic-selectors/) putting a underscore and selector (hover, target etc.) will create css pseudo selector like a:hover. This is great, but for some reason dash (-) is also treated in a similar manner and is not documented at all.

I was struggling a long time with following code:

.facebook {
    @extend .icons-socialmedia-facebook;

    &:hover {
        @extend .icons-socialmedia-facebook-hover;
    }
}

This line caused an error because file name contained hover and therefore it's treated differently.

@extend .icons-socialmedia-facebook-hover

I think either documentation should say which separators should be used or it should always be like in the documentation that underscore is correct way to do selectors to the sprites.

scottdavis commented 11 years ago

in sass _ is the same as -

gracezlj commented 9 years ago

Actually, i found that if i name the icon file with dash (icon-xxx-hover), it won't generate any css style of the hover state such as icon-xxx:hover{} or icon-xxx-hover{}, really don't know why?