CODEWITHSUNDEEP
csssassless
Tokimon
Tokimon

Reputation: 4142

SASS Replicating nested selector

I'm using SASS for a project and so far I'm pretty satisfied with it. However I have some code that should only be presented for IE 7 and below, using the class name .ie-lt8 for that. But when i extend that selector in SASS, with a nested selector i create multiple selectors.

Example (extending a display: inline-block code for IE):

SASS

/* My extension code */
.ie-lt8 %ie-inline-block {
    display: inline;
    zoom: 1;
}

/* I want the li to be inline-block */
#my-ul li {
    display: inline-block;
    @extend %ie-inline-block;
}

CSS produced

/* My extension code */
.ie-lt8 #my-ul, #my-ul .ie-lt8 li {
    display: inline;
    zoom: 1;
}

/* I want the li to be inline-block */
#my-ul li {
    display: inline-block;
}

Generally this is just fine, but the #my-ul .ie-lt8 li worries me a little. In this example it's ok as the code works fine with both selector (the mentioned selector just doesn't exists). But what if i have another code where the selector DOES matter, then this would cause a problem.

A thought example:

SASS

/* I want the div to get a red border, 
   but the div inside .container to have a green border */
#myid .container div { border: 5px dotted green; }
#myid div {
    @extend %red-border;
}

/* My extension code */
.container %red-border {
    border: 1px solid red;
}

CSS it would produce

/* I want the div to get a red border, 
   but the div inside .container to have a green border */
#myid .container div { border: 5px dotted green; }

/* My extension code */
.container #myid div, #myid .container div {
    border: 1px solid red; /* [OVERRIDE OF THE BORDER] */
}

My question is then; is there a way to make SASS only take the initial selector, without creating multiple selectors from a nested selector (a lot of selectors in one sentence)?

I tried gooling for this issue, but i find it hard to find any articles/blogs/etc. regarding this issue.

UPDATE

I'm aware of various workarounds, such as using @mixin's instead. I was just wondering whether there was something i missed regardig SASS, or if someone could tell me why this is? Cause it seems to me like it's kind of a bug.

Upvotes: 1

Views: 1432

Answers (1)

alademann
alademann

Reputation: 560

My answer is in SCSS - not SASS so you'll have to convert...

For browser targeting like this, I would recommend using mixins, and furthermore - @content within a @mixin to achieve your desired results. It also sets up a much more understandable set of rules with context.

For your specific example, it's as simple as moving your inline-block fix into a mixin instead of declaring only as a class.

@mixin ie7-inline-block {
    display: inline;
    zoom: 1;
} 

#my-ul li { 
    display: inline-block; 
    .ie-lt8 & {
        @include ie7-inline-block;
    }
}

Even better than that though, by using @content, you can always ensure that your style is prefixed with .ie-lt8 by making a mixin like so:

@mixin ie7 {
    .ie-lt8 & {
        @content;
    }
}

#my-ul li {
    display: inline-block;
    @include ie7 {
        display: inline;
        zoom: 1;
    }
}

Which will output the same css, but allows your IE7-Specific styles to be wrapped each time in some context that makes sense to anyone who reads your code.

Upvotes: 1

Related Questions