Question

我对嵌套选择器如何在SASS / SCSS中工作有点困惑。

此：

#wrapper {
    font: {
        weight: 400;
        size: 13px;
    }
    line-height: 1.2;
    color: #fff;
    > .de1, .de5{margin: auto;}
}

编译到：

#wrapper {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2;
  color: #fff;
}
#wrapper > .de1, #wrapper .de5 {
  margin: auto;
}

但是如果我想得到一个不包含.de5

的最终结果怎么办？

#wrapper > .de1, .de5 {
  margin: auto;
}

这甚至可能吗？我想扩展.de5选择器但是没有成功。

#wrapper {
  font: {
    weight: 400;
    size: 13px;
  }
  line-height: 1.2;
  color: #fff;
  > .de1 {margin: auto;}
}
.de5 {@extend .de1;}

编译到

#wrapper {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2;
  color: #fff;
}
#wrapper > .de1, #wrapper > .de5 {
  margin: auto;
}

如何在没有.de5的情况下获得#wrapper >？

（我在SassMeister上测试了SCSS）

Answer 1

或许反过来呢？声明.de5的保证金，并#wrapper > .de1将其扩展为：

.de5 {
  margin: auto;
}

#wrapper {
  font: {
    weight: 400;
    size: 13px;
  }
  line-height: 1.2;
  color: #fff;
  > .de1 {
    @extend .de5;
  }
}

Answer 2

我认为你需要反过来做这件事。

.de5 { margin: auto; }
#wrapper {
    >.de1 { @extend .de5 }
}

Answer 3

改为使用占位符。

<强> SCSS

%placeholder {
  margin: auto;
}

#wrapper {
    font: {
        weight: 400;
        size: 13px;
    }
    line-height: 1.2;
    color: #fff;

    > .de1 {
      @extend %placeholder;
    }
}

.de5 {
  @extend %placeholder;
}

<强> CSS

#wrapper > .de1, .de5 {
  margin: auto;
}

#wrapper {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2;
  color: #fff;
}

链接到SassMeister：http://sassmeister.com/gist/32ac4c0aa0f708a0d4e3

Answer 4

如果您想为.de1和.de5使用相同的代码但使用不同的选择器，则可以使用＆＃34; mixin＆＃34;和＆＃34;包括＆＃34;。像这样的事情：

@mixin margin {
margin: auto; 
}
#wrapper {
  font: {
    weight: 400;
    size: 13px;
  }`enter code here`
  line-height: 1.2;
  color: #fff;
  > .de1 {@include margin}
}
.de5 {@include margin}

我认为它可以帮到你。现场演示： http://sassmeister.com/gist/a19ef9d026a756144cad

SASS / SCSS中的嵌套选择器

4 个答案: