Error with @extend inside @media

[weilunallen]

error vendor/magento-ui/_utilities.scss (Line 31: You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend .abs-add-clearfix-desktop" on line 239 of ../../Magento_Sales/css/source/_module.scss.

got this running sass --watch styles.scss:styles.css, is that b/c of the sass version I am using?

[Igloczek]

Using @extend in @media is prohibited by design.

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend

There are some restrictions on the use of @extend within directives such as @media. Sass is unable to make CSS rules outside of the @media block apply to selectors inside it without creating a huge amount of stylesheet bloat by copying styles all over the place. This means that if you use @extend within @media (or other CSS directives), you may only extend selectors that appear within the same directive block.

[weilunallen]

snowdog/theme-blank-sass/Magento_Sales/css/source/_module.scss LINE: 239

@include max-screen($screen__s) {
    .account {
        .toolbar {
            @extend .abs-add-clearfix-desktop;
        }
    }
}

this is the part in question, my ruby sass(3.4.22) compiler said this is illegal.

[Igloczek]

Fixed in 0.7.2

[Igloczek]

I heavily recommend to switch to libsass, b/c this theme is designed to work well with them.
But at all this was a bug, thanks for reporting.

[marvinhuebner]

@Igloczek i'm using frontools and i get the same erros:

[13:32:11] gulp-notify: [Error running Gulp] Error: ../../../var/view_preprocessed/frontools/frontend/Snowdog/blank/styles/vendor/magento-ui/_utilities.scss
Error: You may not @extend an outer selector from within @media.
       You may only @extend selectors within the same directive.
       From "@extend .abs-add-clearfix-desktop" on line 254 of ../../../var/view_preprocessed/frontools/frontend/Snowdog/blank/Magento_Sales/styles/_module.scss
        on line 66 of ../../../var/view_preprocessed/frontools/frontend/Snowdog/blank/styles/vendor/magento-ui/_utilities.scss
>>     &:before,

Frontools is using libsass, why could this happen?

[Igloczek]

Indeed it's a bug, probably inherited from M code with version 1.0

https://github.com/SnowdogApps/magento2-theme-blank-sass/blob/master/Magento_Sales/styles/_module.scss#L254

[marvinhuebner]

Ah ok. Thanks for your fast command.

As a hotfix i command this lines out:

• https://github.com/SnowdogApps/magento2-theme-blank-sass/blob/master/Magento_Sales/styles/_module.scss#L254
• https://github.com/SnowdogApps/magento2-theme-blank-sass/blob/master/Magento_Checkout/styles/module/checkout/_tooltip.scss#L136

That's the best alternative for the @extend. If you can give me a hint i could provide an PR.

[Igloczek]

Take a look here (fix from 0.7.2), it looks like just wrong selector used 90a083d

[NaciAkce]

if you use frontools
This depends to the new node-sass version 4.8.1. Cause gulp-sass install the latest minor "node-sass": "^4.2.0", in this case 4.8.1
Quick fix
use yarn to install the node_modules. Cause yarn.lock take care that you install the working Version

[Igloczek]

Fixed in 1.0.5

Changes are reflected in magento/magento2#14395