【发布时间】：2012-11-20 21:03:52
【问题描述】：
假设我在 Sass 中有一个占位符选择器。在该选择器中，我编写了一些样式，显然我需要使用 Modernizr 检查该功能。
问题似乎是您使用了modernizr 提供的 .no-generatedcontent 或 .generatedcontent 类，但它们无法使用，因为一旦占位符选择器完成工作，它们将位于错误的层次结构位置。
我认为解决此问题的唯一方法是将它们放在占位符选择器之外，但这会弄乱我的样式，而 Sass 旨在帮助保持我的样式更有条理。
关于如何解决此问题的任何想法？
这是我的意思的一个例子：
modernizr 完成工作后，我页面顶部的 <html> 标签：
<html class="js flexbox flexboxlegacy canvas canvastext webgl touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths wf-allumistd-n1-active wf-freightsanspro-n3-active wf-automate-n4-active wf-automate-n7-active wf-active">
现在，假设我有一个名为 %styles 的占位符选择器
%styles {
li {
this: this;
}
.no-generatedcontent li {
this: that;
}
}
现在，我在代码中的某处使用这个占位符，如下所示：
.main {
section {
.box-area {
color: red;
@extend %styles;
}
}
}
在我看来，modernizr 类位于错误的位置以使其产生任何效果似乎很明显。这是一种层次结构问题。我可以通过将它放在占位符之外来解决它，但是我必须单独@extend 它并且我的 sass 代码变得一团糟，这是我开始使用 sass 来保持我的样式更整洁的主要原因。
有什么想法吗？
【问题讨论】：
-
您要生成什么 CSS？你是如何写你的 Sass 的？你试过什么？
-
检查我对下面第一个答案的评论以及我在问题中添加的更新示例代码。
-
如果你也提供你想要生成的 CSS 真的会更有帮助。
标签： css sass placeholder modernizr