1

假设我在 Sass 中有一个占位符选择器。在该选择器中，我编写了一些样式，显然我需要使用 Modernizr 检查该功能。

问题似乎是您要使用由modernizr 提供的 .no-generatedcontent 或 .generatedcontent 类，但它们不能使用，因为一旦占位符选择器完成工作，它们将位于错误的层次结构位置。

我能看到解决这个问题的唯一方法是将它们放在占位符选择器之外，但这会扰乱我的风格，而 Sass 旨在帮助我的风格更有条理。

关于如何解决这个问题的任何想法？

这是我的意思的一个例子：

<html>一旦modernizr完成了它的工作，我页面顶部的标签：

<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 来保持我的样式更整洁的主要原因。

有任何想法吗？

4

1 回答 1

1

萨斯：

%styles {
    li {
        border: 1px solid red;

        .no-generatedcontent & { // note the location of the & here
            border: 1px solid red;
        }
    }
}

.main {
    section {
        .box-area {
            color: red;
            @extend %styles;
        }
    }
}

CSS：

.main section .box-area li {
  border: 1px solid red; }

.no-generatedcontent .main section .box-area li, .main section .no-generatedcontent .box-area li {
  border: 1px solid red;
  background: #CCC; }

.main section .box-area {
  color: red; }

使用时似乎有一个错误@extend（看看它是如何在线生成 2 个选择器的.no-generatedcontent？Sass 3.2.3）。如果我改用 mixin，则不会发生这种情况：

.main section .box-area {
  color: red; }

  .main section .box-area li {
    border: 1px solid red; }

  .no-generatedcontent .main section .box-area li {
    border: 1px solid red;
    background: #CCC; }
于 2012-11-20T13:03:52.347 回答