如何将文件包装在 mixin 中以 @use 在 scss 文件中？

Question

不确定导入的最佳方式是什么，但不推荐使用“@import”，而应使用 @use。我有一个要包含在 style.scss 中的网格文件。

_grid.scss

.main-content {
    display:grid;
    /* Set up grid stuff */
}
header{
grid-area: header;
}

我需要导入到这里。 样式.scss

body{
/* More code here */
}

最终编译出来的代码应该是这样的：

.main-content {
    display:grid;
    /* Set up grid stuff */
}
header{
grid-area: header;
}
body{
/* More code here */
}

我知道这是错误的，但这是我尝试过的：

@use 'grid' as *;
$main-content

使用 mixin 怎么样？

_grid.scss

@mixin grid {
/* Wrap all the code here from _grid.scss */

    .main-content {
        display:grid;
        /* Set up grid stuff */
    }
    header{
       grid-area: header;
    }

}

style.css

@use 'grid' as *;
@include $grid

body{
}

Answer 1

@use 目前真的很棘手......对语言的真正影响很大。

(A) 首先，您应该检查您是否确实使用了最实际的 SASS 版本：DART SASS。 提醒：即使在维护良好的框架中，大多数实际编译器都还没有！！！以下是有关如何查找/安装最实际版本的编译器的信息：

• 通过 NPM 安装的解决方案：
  Is it better to use the Live Sass Compiler (VS Code extension) or to install and run Sass via npm? (+ tips how to change from node-sass to dart-sass)

• 如果更熟悉 VS Code：
  Live Sass Compiler - @use causes compilation error

(B) @use改变结构如何写SASS代码实质性。

不适用于@use 的是在代码中间导入代码，就像使用@import 一样。因此，如果您需要这样做，那么您的最后一个代码示例是正确的，它使用了一个包含代码到 body 标记的 mixin。但是您需要将 mixin 移动到要包含代码的 body 标记中：

//### > SASS _grid.scss

@mixin grid {
    .main-content {
        display:grid;
        /* Set up grid stuff */
    }
    header{
        grid-area: header;
    }   
}


//### > SASS main.scss

@use 'grid' as *;

body {
    @include grid;
}


//### --> compiles to CSS

body .main-content {
  display: grid;
  /* Set up grid stuff */
}
body header {
  grid-area: header;
}

但老实说，很少有场景需要将网格 css 嵌套到 body 标签中！

如果您将您的 SASS 划分为 partial files 并在 main file 中进行输出，该 main file 仅将所有代码包装在一起，您可以使用 @use 非常类似于常见的用法@import。示例：

//### > SASS PARTIAL _typography.scss

/* TYPOGRAPHY */ 
html {
    font-family: sans-serif;
}
h1 {
    font-size: 24px;
}

//### > SASS PARTIAL _structure.scss

/* STRUCTURE */
header{
    padding: 10px 20px;
    background: darkgray;
}   
main {
    padding: 20px 20px;
    background: white;
}
footer {
    padding: 20px 20px 80px 20px;
    background: black;
}

//### > SASS PARTIAL _grid.scss

/* GRID HELPER CLASSES */ 

.grid-col_4 {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}

//### > SASS MAIN main.scss

// WRAP PARTIALS TOGETHER
// only '@use' files, no css code here
@use 'typography' as *;
@use 'structure' as *; 
@use 'grid' as *;

//### --> compiles to CSS

/* TYPOGRAPHY */
html {
  font-family: sans-serif;
}

h1 {
  font-size: 24px;
}

/* STRUCTURE */
header {
  padding: 10px 20px;
  background: darkgray;
}

main {
  padding: 20px 20px;
  background: white;
}

footer {
  padding: 20px 20px 80px 20px;
  background: black;
}

/* GRID HELPER CLASSES */
.grid-col_4 {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}

注意：

即使这看起来与 @import 的用法非常相似，但与 @import 之间存在非常大的差异。

如果您使用variables/mixins/functions，您将无法像以前一样首先将@import 发送到main.scss，它们已准备好供下一个包含的文件使用！使用 @use 现在您必须在需要 variables/mixins/function 的每个 partial file 中分别使用 @use 文件。

如果您愿意，可以进一步了解它的工作原理：
https://stackoverflow.com/a/66300336/9268485

但请注意：听起来简单的事情在实际使用中确实更复杂......即使项目和模块更大，更有条理......

项目配置分裂成不同的配置文件，在某些情况下，如果您需要包含具有相同变量设置的不同模块，它似乎会导致代码/变量重复......在每种情况下都需要更多代码。但到目前为止，这似乎是未来......

Answer 2

我最终只使用了 @import ，我严重怀疑他们会在未来 3 年内将其删除并在所有地方破坏每个人的代码