1

tl:dr 版本：有没有一种方法可以@extend 一个 css 类并且不让原始类出现在我编译的 css 中而不将我所有的 css 类更改为 %placeholder 类？

基于以下答案的简短回答：似乎没有办法做到这一点，除非您将 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。但这确实不是理想的解决方案。

提前感谢您的任何答案:)

4

1 回答 1

2

您错误地使用了占位符，占位符应该只是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();
  }
}

如果您不知道，我已经在我的博客上详细介绍了 mixins 和占位符选择器之间的输出差异。

于 2013-10-10T15:00:27.427 回答