Css Sass占位符选择器和Modernizer。无类_Css_Sass_Placeholder_Modernizr

Css Sass占位符选择器和Modernizer。无类

css sass

Css Sass占位符选择器和Modernizer。无类,css,sass,placeholder,modernizr,Css,Sass,Placeholder,Modernizr,假设我在Sass中有一个占位符选择器。在该选择器中，我编写了一些样式，显然需要使用Modernizer检查功能问题似乎是，您要使用Modernizer提供的.no generatedcontent或.generatedcontent类，但它们无法使用，因为一旦占位符选择器完成工作，它们将位于错误的层次位置解决这个问题的唯一方法是将它们放在占位符选择器之外，但这会弄乱我的样式，因为Sass旨在帮助保持样式更有条理关于如何解决这个问题有什么想法吗这里有一个例子来说明我的意思： Moderni

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

问题似乎是，您要使用Modernizer提供的.no generatedcontent或.generatedcontent类，但它们无法使用，因为一旦占位符选择器完成工作，它们将位于错误的层次位置

解决这个问题的唯一方法是将它们放在占位符选择器之外，但这会弄乱我的样式，因为Sass旨在帮助保持样式更有条理

关于如何解决这个问题有什么想法吗

这里有一个例子来说明我的意思：

Modernizer完成工作后，我的页面顶部的

标记：

<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">

现在，我在代码中的某个地方使用此占位符，如下所示：

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

在我看来，很明显，现代化阶级处于错误的位置，没有任何影响。这是一种等级问题。我可以通过将它放在占位符之外来解决这个问题，但是我必须单独@extend它，我的sass代码变得一团糟，这就是我开始使用sass来保持样式整洁的主要原因

有什么想法吗？

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

时似乎有一个错误（请参见如何在

行上生成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：

%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个选择器。无生成内容

行？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; }

您想要生成什么CSS？你怎么写你的俏皮话？你尝试过什么？检查我对下面第一个答案的评论，以及我在问题中添加的更新示例代码。如果你也给出你想要生成的CSS，那真的会更有帮助。你想要生成什么CSS？你怎么写你的俏皮话？你尝试过什么？请查看我对下面第一个答案的评论以及我在问题中添加的更新示例代码。如果你也给出了你想要生成的CSS，那真的会更有帮助。你能告诉我在选择器末尾的符号是什么意思/作用吗？看起来它可能是这个问题的解决方案：-）更新，看到这个：完美。只是需要一点指向正确的方向！谢谢你能告诉我在选择器的末尾，符号AND是什么意思/作用吗？看起来它可能是这个问题的解决方案：-）更新，看到这个：完美。只是需要一点指向正确的方向！谢谢