sass - 是否可以将 .css 文件中定义的类@extend 到 .scss 文件？

Question

例如：

应用程序.scss

@import url('orange.css');  
@import 'navel.scss';

橙色.css

.orange {  
  color: orange;  
}

肚脐.scss

.navel {  
    @extend .orange;  
}

Answer 1

在 SASS 中，如果您添加

@import "test.css";

或者

@import url("test.css");

它被编译为纯 css@import指令。因为文件有.css扩展名，SASS预处理器认为这是纯CSS，里面的代码不涉及SASS语言操作。在您的示例中，如果您尝试扩展.orange，您将得到：

The selector ".orange" was not found.

很快：只有在使用 SASS 文件时才能进行扩展。

Answer 2

@extend 不能通过导入 CSS 文件来实现。你必须

1. 将您的 css 转换为 SCSS 部分（或文件）
2. @import 这个部分
3. @extend CSS 类

这样做的缺点是你会留下重复。假设这个导入是一个 7000 行长的 CSS 文件（比如 bootstrap），那么你会遇到麻烦