scss bootstrap package not compiling due to extend within media-query

[sitefinitydcx]

Grunt compilation can't run the sass task due to invalid markup and invalid sass.

>> Error: ".nav-sitemap > li" failed to @extend "sf-mt-xxs".
>>        The selector "sf-mt-xxs" was not found.
>>        Use "@extend sf-mt-xxs !optional" if the extend should be able to fail.
>>         on line 43 of assets/src/sass/sitefinity/navigation/_sitemap.scss
>> >>           @extend sf-mt-xxs; //0

File _navbar.scss, line 43-44 should be, which resolves above problem:

@extend .sf-mt-xxs; //0
@extend .sf-mb-xxs; //0

However @extend is not allowed inside media-queries (line:39-43):

@media only screen and (min-width: $screen-xs-min) and (max-width: $screen-sm-min) {
...
> li {
    @extend .sf-mt-xxs; //0
    @extend .sf-mb-xxs; //0
...
    }
}

Which leaves the following error unresolved:

>> Error: You may not @extend an outer selector from within @media.
>>        You may only @extend selectors within the same directive.
>>        From "@extend .sf-mt-xxs" on line 43 of assets/src/sass/sitefinity/navigation/_sitemap.scss

[JenPeleva]

Hi, Jochem!

Thank you for reporting this. It turns out to be a problem with sass - extends do not work in media queries. We're going to fix it on our end for the release, expected at the end of next week. Until then, you can replace the extends with:

margin-top: 0;
margin-bottom: 0

This will allow you to grunt Bootstrap again.

Best,
Jen

[jacques-hoventer]

Hi Jen,

I've just installed SF 9.1 and I'm using Web Essentials to compile the scss files. I see more of these errors being picked up for example:

.sf-list--expandable {
    i {
        @extend .sf-mr-xs; //5px
    }

    .sf-list-content {
        @extend .sf-ml-l; //20px
    }

    .sf-list-item {
        >div {
            @extend .sf-mb-xs; //5px
        }
        h3:first-child {
            @extend .sf-mt-xxs; //0
        }
    }
}

It fails on trying to extend .sf-mt-xxs.

Sorry got this resolved. It had to do with the fact that the _mixins and _variables files were somehow not being picked up