Question

假设我在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;
}
}
}

我觉得现代化课程处于错误的位置，因为它有任何影响。这是一种层次问题。我可以通过将它放在占位符之外来解决它但是我必须单独@extend它并且我的sass代码变得混乱，这是我开始使用sass来保持我的样式整洁的主要原因。

有什么想法吗？

Answer 1

The Sass：

%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时似乎存在一个错误（请参阅如何在.no-generatedcontent行生成2个选择器？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; }

Sass占位符选择器和Modernizr .no类

1 个答案: