⊗mkLsBsSSED 34 of 42 menu

Sequence of selectors in @extend in SASS

The @extend directive can also be used to extend the selector sequence. See the following example:

Let's look at an example:

#menu .navbar { @extend div; } div { color: #0a0a4b; &:hover { text-decoration: underline; } }

After compilation we got the following code:

div, #menu .navbar { color: #0a0a4b; } div:hover, #menu .navbar:hover { text-decoration: underline; }

Tell me what the result of compiling the following code will be:

button { @extend link; } link { font-size: 10px; &:active { color: #f0ffff; background-color: #110c63; } }

Tell me what the result of compiling the following code will be:

.main-text { font-family: Impact; } button { @extend link; font-size: 10px; @extend .main-text; } link { &:hover { color: #333333; background-color: #6d6d6d; } }
byenru