第十一节：SASS @forward的使用

最新推荐文章于 2025-03-07 18:15:30 发布

正小安

最新推荐文章于 2025-03-07 18:15:30 发布

阅读量1.1k

点赞数 14

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

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

版权

SASS @forward的使用

作用

通过 @forward加载一个模块的成员，并将这些成员当作自己的成员对外暴露出去，类似于类似于 es6 的 export …，通常用于跨多个文件组织 Sass 库

转发、合并scss

创建forward/_common.scss

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

@function column-width($col, $total) {
    @return percentage($col/$total);
}

@mixin bgColor($bg-color:#f2f2f2) {
    background-color: $bg-color;
}

创建启动合并bootstrap.scss

@forward 'uses/common';

使用

@use 'bootstrap';
.body {
    font-size: bootstrap.$font-size;
    width: bootstrap.column-width(3, 12);
    @include bootstrap.bgColor('#F00');
}

合并

新增一个_global.scss

$font-size:28px;
@mixin base($color:#F00) {
    color: $color;
}

.gclass {
    background-color: #F00;
}

统一转发

@forward 'uses/common';
@forward 'uses/global';

使用

@use 'bootstrap';
.body {
    font-size: bootstrap.$font-size;
    width: bootstrap.column-width(3, 12);
    @include bootstrap.bgColor('#F00');
    @include bootstrap.base('#000');
}

**问题：**当多个被转发的文件存在相同变量、函数、混入时会有问题