时间戳

首页 > 解决方案 > SCSS如何访问另一个文件中的样式元素

css - SCSS如何访问另一个文件中的样式元素

问题描述

我是 SCSS 的新手，毫无疑问这是一个愚蠢的问题。我有一个 .scss 文件，我想访问另一个 .css 文件中的样式元素并使用它们进行@extend。

这有效，但不是我想要的。

.w3-table {
    border-collapse:collapse;
    border-spacing:0;
    width:100%;
    display:table
}

tr:nth-child(even){
    background-color:#f1f1f1
}

tr{border-bottom:1px solid rgb(221, 221, 221)}

.mxa-records {
    @extend .w3-table;
    @extend tr:nth-child(even);
    @extend tr;
    color:red;
}

我想从 w3.css 获取 .w3-table，所以据我了解，我想按如下方式使用 w3.css。

@use 'w3';

tr:nth-child(even){
    background-color:#f1f1f1
}

tr{border-bottom:1px solid rgb(221, 221, 221)}

.mxa-records {
    @extend w3.w3-table;
    @extend tr:nth-child(even);
    @extend tr;
    color:red;
}

从@use 语句 w3 成为我的命名空间，我应该能够从 w3.css 文件中引用 .w3-table 。但我得到这个错误。

Compilation Error
Error: ".mxa-records" failed to @extend "w3.w3-table".
       The selector "w3.w3-table" was not found.
       Use "@extend w3.w3-table !optional" if the extend should be able to fail.
        on line 10 of sass/c:\Users\Mark Kortink\Dropbox\Python\projects\PlayPen\sassy\css\mxa.scss
>>     @extend w3.w3-table;
   ------------^

如果我省略 w3 命名空间，我会得到同样的错误。

我只是自欺欺人地认为 SCSS 允许我重用其他文件中的样式元素吗？我希望不是，但你是怎么做到的？

标签： csssass

解决方案

根据收到的评论回答我自己的问题，感谢@Arkellys 和其他人。

事实证明 VSCode 不支持对 SCSS 的最新更改，因此您不能将 @use 或 @forward 或其他新功能与 VSCode SCSS 扩展一起使用。请注意，@import 已被弃用并且最终会消失，但在 VSCode 中仍然有效。

在恢复到 @import 后发现我的问题有一个更好的答案，这里是stackexchange 58974574。

但请注意，我还在 VSCode 中发现了另一个问题，@import 语句不会导入 .css 文件，它只会导入 .scss 文件。这与官方 SCSS 规范相反。

对我有用的基于@import 的代码是......

@import 'test2';

tr:nth-child(even){
    background-color:#f1f1f1
}

tr{border-bottom:1px solid rgb(221, 221, 221)}

.mxa-records {
    @extend .w3-table;
    @extend tr:nth-child(even);
    @extend tr;
    color: $var;
}

与 test2.scss

$var: brown;

.w3-table {
    background-color: $var;
}

这产生了...

.w3-table, .mxa-records {
  background-color: brown;
}

tr:nth-child(even), .mxa-records {
  background-color: #f1f1f1;
}

tr, .mxa-records {
  border-bottom: 1px solid #dddddd;
}

.mxa-records {
  color: brown;
}
/*# sourceMappingURL=mxa.css.map */

推荐阅读