时间戳

首页 > 解决方案 > 如何在同级导入中访问使用 @use 方法导入的变量

sass - 如何在同级导入中访问使用 @use 方法导入的变量

问题描述

这是我的 main.scss 文件。

// Main

// Variables (variables.scss)
@use "../../../style/variables" as *;

// Custom Normalize (normalize.scss)
@use "../../../style/normalize";                                                                                                                       
                                                                                                              
// Site header (header.scss)                                                    
@use "sections/header";

中定义的变量在&variables.scss中不可访问。有没有办法在没有单独声明的情况下在这些文件中使用它们？normalize.scssheader.scss@use 'variables'

或者您会为每个文件使用单独的@use 方法吗？我是新手，不知道有什么更好的。

标签： sass

解决方案

你有两个选择。

1.@导入

如果您使用@importexcept@use导入，那么您可以访问在normalize.scss和header.scss内的variables.scss 中定义的变量。

但它有一个缺点。很难追踪你的变量和 mixin 的来源，因为@import它启用了无穷无尽的导入文件链。它还允许重叠，并且很难追溯完美的 CSS 中断的原因。这是一个问题，特别是对于具有多个贡献者和全局库的复杂文件结构和项目，这就是Sass不再推荐 @import 的原因。

2.@使用

它也像@import 一样工作，将我们的样式表分成更小的部分并将它们加载到其他样式表中。关键区别在于您如何访问原始文件的成员。为此，您需要参考原始文件的命名空间。

这是一个简单的 SCSS 部分示例。

_variables.scss

$primary_color: #000;

_header.scss

@use 'variables';

.header {
  color: variables.$primary_color
}

如果您需要更多信息，请阅读这篇文章 - https://www.liquidlight.co.uk/blog/use-and-import-rules-in-scss/

如果您需要进一步的支持，请告诉我。

推荐阅读