使用 SASS 使用元素扩展选择器

【问题标题】：Using SASS to extend selectors with elements使用 SASS 使用元素扩展选择器
【发布时间】：2012-04-09 22:31:49
【问题描述】：

我正在处理一个 SCSS 样式表，我有一个看起来像这样的规则：

.footer-link-row {
    color: red;
    ul& {
        padding: 0;
    }
}

我希望ul& 行编译到选择器ul.footer-link-row。但是，此选择器返回编译器错误，并且使用 &ul 编译为 .footer-link-row ul。选择这样的东西的正确方法是什么？

--添加--
澄清一下，我想要的最终 CSS 是：

.footer-link-row {
    color: red;
}
ul.footer-link-row {
    padding: 0;
}

【问题讨论】：

标签： sass

【解决方案1】：

你想要类似下面的东西：

ul {
  padding: 0;
  .footer-link-row {
    color: red;
  }
}

& 用于要求两个选择器匹配

a { text-decoration: none;
  &:hover { border-width: 1px }
}
// compiles to 
a {
  text-decoration: none;
}
a:hover {
  border-width: 1px;
}

如果你想要 ul.footer-link-row 试试

ul {
  &.footer-link-row {
    padding: 0;
  }
  .footer-link-row {
    color: red;
  }
}

您的说明表明您需要两个范围。

ul {
  &.footer-link-row {
    padding: 0;
  }
}

.footer-link-row {
  color: red;
}

【讨论】：