Skip to content
This repository has been archived by the owner on May 5, 2022. It is now read-only.

Nested classes in combination with @extend generatess invalid css #21

Open
ehhc opened this issue Aug 29, 2016 · 2 comments
Open

Nested classes in combination with @extend generatess invalid css #21

ehhc opened this issue Aug 29, 2016 · 2 comments

Comments

@ehhc
Copy link

ehhc commented Aug 29, 2016

Hi,
i would like to compile the following scss:

.font-styles-font1 {
text-transform: uppercase;
font-family: Helvetica,sans-serif;
}
.nav-tabs {
border-bottom: 0;
& > li {
@extend .font-styles-font1;
}
}

i expteced it to generate the following css (according to the official SASS language definition it is valid):

.font-styles-font1, .nav-tabs > li {
text-transform: uppercase;
font-family: Helvetica,sans-serif;
}
.nav-tabs {
border-bottom: 0;
}

unfortunatly i get this css instead:

.font-styles-font1, > li {
text-transform: uppercase;
font-family: Helvetica, sans-serif;
}
.nav-tabs {
border-bottom: 0;
}

this css is NOT valid... there is a selector expected in front of the "> li"-token...

Any suggestions why this happens and how to fix it?

EDIT: I just noticed, that @extend in combination with nested classes allways leads to incorrect CSS. The following example illustrats this:

SASS:

.font-styles-sansbold {
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
}
.alphabetical-list {
li {
@extend .font-styles-sansbold;
display: inline-block;
font-size: 1.333em;
margin-right: 1em;
}
}

Expected CSS (please notice the selectors in the first row!):

.font-styles-sansbold, .alphabetical-list li {
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
}
.alphabetical-list li {
display: inline-block;
font-size: 1.333em;
margin-right: 1em;
}

Falsly generated CSS:

.font-styles-sansbold, li {
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
}
.alphabetical-list li {
display: inline-block;
font-size: 1.333em;
margin-right: 1em;
}

In the first row the .alphabetical-list class name selector is missing. Because of this ALL lis are uppercase etc. This is not intended!

@ehhc ehhc changed the title Mixings in Combination with @extend generatess invalid css Nested classes in combination with @extend generatess invalid css Aug 29, 2016
@msosa
Copy link

msosa commented Oct 7, 2016

+1
thought it was an issue with the gradle plugin I use to compile but I believe it is the compiler it is using
kravemir/GradleSassPlugin#5

@kravemir
Copy link

kravemir commented Oct 8, 2016

+1, I have encountered this problem, too. I also use this compiler in my gradle plugin.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants