时间戳

首页 > 解决方案 > @import 和 @use SCSS 规则有什么区别？

css - @import 和 @use SCSS 规则有什么区别？

问题描述

何时使用 SCSS 规则：@use以及何时使用@import？它们与使用它们的最佳情况有什么区别？

@use '_styles.scss'; 
@import '_styles.scss';

标签： csssass

解决方案

新@use的类似@import。但有一些显着的区别：

  • 该文件只导入一次，无论您@use在项目中导入多少次。
  • 以下划线 (_) 或连字符 (-) 开头的变量、mixin 和函数（Sass 称之为“成员”）被认为是私有的，而不是导入的。
  • 已使用文件（在本例中为buttons.scss）中的成员仅在本地可用，但不会传递给未来的导入。
  • 同样，@extends只会申请上链；在导入的文件中扩展选择器，但不扩展导入该文件的文件。
  • 默认情况下，所有导入的成员都是命名空间的。

https://css-tricks.com/introducing-sass-modules/

@import将被弃用，取而代之的是@useand @forward，并且最迟将在 2022 年 10 月停止支持。

推荐阅读