SASS/SCSS 中的嵌套选择器答案

【问题标题】：Nested selectors in SASS/SCSSSASS/SCSS 中的嵌套选择器
【发布时间】：2014-08-15 20:39:21
【问题描述】：

我对嵌套选择器在 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;
}

没有#wrapper >，我如何获得.de5？

（我在SassMeister上测试了SCSS）

【问题讨论】：

标签： sass

【解决方案1】：

也许反过来呢？声明 .de5 的边距并让 #wrapper > .de1 扩展它：

.de5 {
  margin: auto;
}

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

【讨论】：

【解决方案2】：

我认为你需要反过来做。

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

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

如果您希望 .de1 和 .de5 的代码相同但选择器不同，您可以使用“mixin”和“include”。像这样的东西：

@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

【讨论】：