Extend a class with a modulo

Hi,
I find a script use with % to extend a class, but it works the same with a point.
Wich difference between them?

%layout__block--centered {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
@extend %layout__block--centered;

.layout__block--centered {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
@extend .layout__block--centered;

Thanks

1 Like

My guess is that they’re using % to indicate that the class isn’t meant to be used by itself, but only extended. CSS will ignore bad input, but Sass doesn’t require you to use a period when extending. That said, I don’t know, but it’s a reasonable guess.

they don’t talk about %, I will test you’re guess
http://sass-lang.com/guide#topic-7

I may be wrong, but I don’t think the percent sign (%) has any meaning as part of the name. It’s probably a convention to indicate the Sass equivolent of an abstract class.

1 Like