SASS复制嵌套选择(SASS Replicating nested selector)

2019-06-27 19:33发布

我使用SASS的一个项目,到目前为止,我很满意。 不过,我有一些代码,只使用类名来提出了IE 7及以下, .ie-lt8了点。 但是,当我在SASS该选择器延伸,具有嵌套选择器I创建多个选择器。

实施例(延伸的display: inline-block为IE代码):

上海社会科学院

/* 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制作

/* 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;
}

一般来说,这仅仅是罚款,但#my-ul .ie-lt8 li担心我一点点。 在这个例子中这是确定的代码与两个选择(所提到的选择就是不存在的)工作正常。 但是,如果我有在选择件事是否与其他代码,那么这将导致一个问题。

一个想法例如:

上海社会科学院

/* 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它会产生

/* 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] */
}

我的问题是那么; 有没有一种方法,使SASS只需要最初的选择,无需从嵌套选择器(在一个句子很多选择的)创建多个选择?

我试图gooling对于这个问题,但我发现很难找到任何物品/博客/等。 关于这个问题。

UPDATE

我知道不同的解决方法,比如使用@混入的过程,而不是。 我只是想知道是否有一些像我错过regardig SASS,或者如果有人能告诉我这是为什么? 因为在我看来,喜欢它是一种错误的。

Answer 1:

我的回答是SCSS -不SASS所以你必须要转换...

对于浏览器针对这样的,我会建议使用的混入,而且 - 一个@mixin内@content以达到您想要的结果。 它还设置了一套具有上下文规则更加理解。

为了您的具体的例子,这是因为移动你的inline-block的修复成一个混合,而不是只为一类声明一样简单。

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

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

即使比虽然好,使用@content,你总是可以确保您的风格加上前缀.IE-LT8通过使像这样一个mixin:

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

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

将输出相同的CSS,但可以让你的IE7特定的风格是在一些情况下是有道理的,任何人谁读你的代码每次包裹。



文章来源: SASS Replicating nested selector
标签: css sass less