Question

tl：dr version：有没有办法@extend一个css类，并且没有原始类出现在我编译的css 中，而不用将我的所有css类更改为％占位符类？

基于以下答案的简短回答：除非您通过并将css转换为静音/占位符类，否则似乎无法执行此操作。将.one {}转换为％one {}，即便如此，也会导致媒体查询出现问题。

我有一个css文件（让我们称之为“style.css”），它包含200多个CSS类来设置各种元素，如表单和按钮等。我想要的是在项目和其他类中包含一些这些类来自其他随机项目/网站的文件。对于每个新项目，我还想给出我选择的类随机语义类名。

使用CSS时我选择的预处理器是SCSS，我真的需要一个使用SCSS功能的答案。

这是我正在谈论的一个简单示例 - 将css加载到SCSS文件中，然后使用我自己的类名扩展该css：

//style.css
.one {
  color: red;
  padding-top: 1px;
}

//style2.scss
@import "style.css";

.two {
  @extend .one;
}

这里的问题是我的SCSS文件将编译为CSS，如下所示：

//style2.css
.one {
  color: red;
  padding-top: 1px;
}
.two {
  color: red;
  padding-top: 1px;
}

但我想要做的只是包括第二课，我给了一个特别的名字。

我已经尝试了几种方法来做到这一点，但这里有一个例子不起作用，但是我认为我应该能够做到这一点：

A。）首先，我抓住style.css文件并将其复制/粘贴到style.scss文件中。

B。）其次，我将所有内容包装在占位符/静默类中，如下所示：

//style.scss
%placeholder {
  .one {
    color: red;
    padding-top: 1px;
  }
}

C。）然后我导入该SCSS文件并尝试扩展占位符中我选择的类，如下所示：

//style2.scss
@import "style";

.two {
  @extend .one;
}

当我尝试编译它时，我得到一个空白的css文件（正确的是，因为它试图太棘手）。我知道的另一件事是你不能扩展嵌套的选择器，所以“@extend％placeholder .one;”也是不可能的。

我的问题是：有没有人知道导入然后扩展css类的方法，以便编译结果不包含导入的css？

我能想到的唯一其他解决方案是在我将其导入野外之前从我的文件顶部删除导入的css。但这显然不是理想的解决方案。

提前感谢您的任何答案：）

Answer 1

您错误地使用占位符，占位符应该只是one，不需要包装它。试试这个：

// style.scss
%one {
  color: red;
  padding-top: 1px;
}

// style2.scss
@import "style";

.two {
  @extend %one;
}

请注意，此方法存在问题。虽然输出的CSS比使用mixin（@include）更精简，但您将无法在任何%one查询中使用@media。 IE浏览器。这不起作用：

// style2.scss
@import "style";

@media screen and (max-width:1024px) {
  .two {
    // This won't produce CSS as it's inside the media query
    @extend %one;
  }
}

我知道解决这个问题的唯一方法是使用mixin而不是占位符，这会产生更多的CSS（如果你多次使用one）。

// style.scss
@mixin one() {
  color: red;
  padding-top: 1px;
}

// style2.scss
@import "style";

@media screen and (max-width:1024px) {
  .two {
    @include one();
  }
}

如果您不知道，我已详细说明my blog上mixins和占位符选择器之间的输出差异。

如何有条件地加载CSS并使用SASS / SCSS扩展它

1 个答案: