第十节： SASS @use 的使用

最新推荐文章于 2025-03-13 17:34:10 发布

正小安

最新推荐文章于 2025-03-13 17:34:10 发布

阅读量2.9k

点赞数 21

分类专栏： # sass 文章标签： sass 前端

本文链接：https://blog.csdn.net/everfoot/article/details/141690831

版权

SASS @use 的使用

@use是在Sass 1.23.0版本中引入的，用于替代@import

@import：传统的文件引入方式，可能导致全局命名冲突和重复加载。

@use：现代的模块化引入方式，提供了更好的作用域管理和避免重复加载。

@forward：与@use结合使用，用于将一个模块的成员公开给其他模块，提供了一种筛选和重命名成员的方法。

作用

从其他Sass样式表加载mixin，function和变量，并将来自多个样式表的CSS组合在一起，@use加载的样式表被称为“模块”，多次引入只包含一次。

@use也可以看作是对@import的增强

语法

@use '<url>' [as alias|namespace]

加载普通SCSS、CSS

use下面的_common.scss

$font-size:14px !default;
* {
    margin: 0;
    padding: 0;
    font-size: $font-size;
    color: #333;
}

@function column-width($col, $total) {
    @return percentage($c