如何从Sass的CSS文件扩展类? [英] How to extend a class from a CSS file in Sass?
问题描述
我有一个样式库，其中包含我项目的常规样式.该库打包到一个library.css文件中.在这个库中，我有一个类a.
在我的scss样式表之一中，我想从library.css扩展此a:
@import 'library.css';
.b {
@extend .a
}
这样做时，我被告知在library.css中找不到类a.
是否可以通过CSS样式表扩展类?
在您的Sass代码中添加@import规则时，您需要注意要实现的目标. @import实际上是有效的CSS，因此Sass需要在这里评估并弄清楚您的意图. Sass扩展了CSS @import规则，并且不会重新创建它.根据文档:
@import需要导入文件名.默认情况下，它会查找直接导入的Sass文件，但是在某些情况下，它将编译为CSS @import规则:
- 如果文件的扩展名为.css.
- 如果文件名以http://开头.
- 如果文件名是url().
- 如果@import有任何媒体查询.
因此，如果将.css扩展名放在@import规则中的文件名之后，则Sass只会输出这一行有效的CSS代码.您可以通过删除@extend指令进行测试，这将使您的代码得以编译.您将看到整个输出文件是这样的:
@import 'library.css';
Sass不会跟随该CSS文件并使它的内容可用于@extend指令.
您可以做的是从@import规则中删除文件扩展名.
@import 'library';
.b {
@extend .a
}
但是，这实际上会将文件library.css的全部内容输出到此Sass文件编译到的CSS文件中，我认为这不是您的目标.
要解决此问题，您可以创建一个包含占位符选择器的部分Sass文件.
%a {
color: red;
}
关于占位符选择器的好处是它们没有自己的输出.根据文档:
单独使用占位符选择器的规则集将不呈现为CSS.
在您的Sass样式表中导入部分Sass文件，并使用@extend指令，如下所示:
.b {
@extend %a;
}
并确保您的library.css文件是一致的，将其转换为Sass，在其顶部导入包含占位符选择器的相同部分文件，并只需在.a选择器中使用@extend指令./p>
@import 'placeholders';
.a {
@extend %a;
}
I have a style library with the general styling for my project. This library is packed into one library.css file. In this library, I have a class a.
In one of my scss stylesheets I'd like to extend this calss a from library.css:
@import 'library.css';
.b {
@extend .a
}
When I do this, I'm told that class a was not found in library.css.
Is there any way to extend a class from a CSS stylesheet?
When you add an @import at-rule to your Sass code, you need to be careful what you wish to achieve. @import is actually valid CSS, so Sass needs to evaluate and figure out your intentions here. Sass extends the CSS @import rule and does not recreate it. According to the documentation:
@import takes a filename to import. By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS @import rule:
- If the file's extension is .css.
- If the filename begins with http://.
- If the filename is a url().
- If the @import has any media queries.
As a result, if you put the .css extension after the filename in an @import at-rule, Sass will just output this line of valid CSS code. You can test this by removing your @extend directive, which will make your code compile. You will see that the entire output file is this:
@import 'library.css';
Sass is not going to follow that CSS file and make it's contents available to the @extend directive.
What you could do is remove the file extension from your @import at-rule.
@import 'library';
.b {
@extend .a
}
However, this will actually output the entire contents of the file library.css into your CSS file that this Sass file compiles to, which I am assuming is not your goal.
To fix that, you could create a partial Sass file that contains placeholder selectors.
%a {
color: red;
}
The good thing about placeholder selectors is that they have no output of their own. According to the documentation:
On their own, without any use of @extend, rulesets that use placeholder selectors will not be rendered to CSS.
Their importance and usefulness is detailed on this page.
Import the partial Sass file in your Sass stylesheet and use the @extend directive like this:
.b {
@extend %a;
}
And to make sure your library.css file is consistent, convert it into Sass, import the same partial file on top of it containing your placeholder selectors and simply use the @extend directive inside .a selector as well.
@import 'placeholders';
.a {
@extend %a;
}
这篇关于如何从Sass的CSS文件扩展类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
