SASS复制嵌套选择器 [英] SASS Replicating nested selector

问题描述

我使用SASS作为项目，到目前为止，我非常满意。
然而，我有一些代码，应该只提供给IE 7及以下，使用类名 .ie-lt8 。但是当我在SASS中扩展该选择器时，使用嵌套选择器创建多个选择器。

示例（扩展 display：inline-block IE的代码）：

SASS

  / *我的扩展代码* / 
 .ie-lt8％ie-inline-block {
 display：inline; 
 zoom：1; 
} 
 
 / *我希望li是inline-block * / 
＃my-ul li {
 display：inline-block; 
 @extend％ie-inline-block; 
} 
  

CSS产生

  / *我的扩展代码* / 
 .ie-lt8＃my-ul，＃my-ul .ie-lt8 li {
 display：inline; 
 zoom：1; 
} 
 
 / *我希望li是inline-block * / 
＃my-ul li {
 display：inline-block; 
} 
  

一般来说这很好，但 #my -ul .ie-lt8 li 让我有点担心。在这个例子中，它的确定的代码工作正常与两个选择器（提到的选择器不存在）。但是如果我有另一个代码，选择器是重要的，那么这将导致一个问题。

一个想法的例子：

SASS

  / *我想让div获得红色边框，
但是里面的div .container有一个绿色边框* / 
 #myid .container div {border：5px dotted green; } 
 #myid div {
 @extend％red-border; 
} 
 
 / *我的扩展代码* / 
 .container％red-border {
 border：1px solid red; 
} 
  

CSS会产生

我想要的div得到一个红色边框，
，但div里面的.container有一个绿色的边框* /
#myid .container div {border：5px dotted green; }

/ *我的扩展代码* /
.container #myid div，#myid .container div {
border：1px solid red; / * [OVERRIDE OF THE BORDER] * /
}

有没有办法使SASS只接受初始选择器，而不从嵌套选择器（一个句子中有很多选择器）创建多个选择器？

我试过gooling这个问题，但我发现很难找到任何文章/博客/等。关于此问题。

UPDATE

我知道各种解决方法，例如使用@ mixin's。我只是想知道是否有一些我错过了SASS，或者如果有人可以告诉我为什么是这样？

解决方案

我的回答是在 SCSS 不是 SASS ，因此您必须转换...

对于像这样的浏览器定位，我建议使用mixins，内容在@mixin中实现所需的结果。它还建立了一套更容易理解的规则与上下文。

对于您的具体示例，将inline-block修复移入mixin而不是仅声明为类。

  @mixin ie7-inline-block {
 display：inline; 
 zoom：1; 
} 
 
＃my-ul li {
 display：inline-block; 
 .ie-lt8& {
 @include ie7-inline-block; 
} 
} 
  

你总是可以确保你的样式以.ie-lt8作为前缀。

  @mixin ie7 {
 .ie-lt8& {
 @content; 
} 
} 
 
＃my-ul li {
 display：inline-block; 
 @include ie7 {
 display：inline; 
 zoom：1; 
} 
} 
  

这将输出相同的css， - 每次在某些上下文中包装的特定样式对任何读取代码的人都有意义。

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.

解决方案

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.

这篇关于SASS复制嵌套选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！