All geek questions in one place

'%' in SASS what does it mean

I saw this code when I was browsing the Drupal Omega 4 theme

%container { @include container; @include grid-background; }

What does "% container" mean? What is the "%" for?

+4
source share
3 answers

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholder_selectors_

Serif selectors:% foo

Sass supports a special type of selector called the "placeholder" selector. They look like a class and identifier selector, except # or. Is replaced with%. Theyre intended for use with the @extend directive; for more information, see @ expand-Only Selectors .

on its own, without using @extend, rule sets that use placeholder selectors will not display in CSS.

+6
source

This is a placeholder selector. It does nothing by itself, but can be expanded as an abstract base class.

+4
source

Sass

 %icon { transition: background-color ease .2s; margin: 0 .5em; } .error-icon { @extend %icon; /* error specific styles... */ } .info-icon { @extend %icon; /* info specific styles... */ }

Output

 .error-icon, .info-icon { transition: background-color ease .2s; margin: 0 .5em; } .error-icon { /* error specific styles... */ } .info-icon { /* info specific styles... */ }

Note

Placeholder selectors have an additional property that they will not be displayed in the generated CSS, only those who extend them will be included in the output.

Additional Information

http://thesassway.com/intermediate/understanding-placeholder-selectors

Instruments

If you want to play Sass, use - http://sassmeister.com/

-1
source

Source: https://habr.com/ru/post/1487626/

More articles:


All Articles