sass - 如何在 SASS 中使用 @content 和 @forward 迁移使用 @content 和 @import 的案例
问题描述
我正在将代码库从使用迁移@import
到@use
和@forward
。大部分都可以,但我不确定在@import
使用 with的情况下该怎么做@content
。
考虑到以下混合,唯一的目标是将样式包装在一个类中:
@mixin alternative-styles {
.parent-class {
@content;
}
}
然后使用 mixin@import
将所有这些样式包装在 a 中.parent-class
:
@include alternative-styles {
@import 'components';
}
我认为用 a 替换它是@forward
行不通的,但无论如何都要尝试一下:
@include alternative-styles {
@forward 'components';
}
这引发了以下错误:
Error: This at-rule is not allowed here.
╷
22 │ @forward 'components';
│ ^^^^^^^^^^^^^^^^^^^^^
╵
我发现该sass-migration
工具以这种方式解决了这个问题:
@use 'sass:meta';
@use 'mixins';
@include mixins.alternative-styles {
@include meta.load-css('components');
}
这些components.scss
文件有多个@forward
语句将所有组件引用保存在一个地方,如下所示:
// components.scss
@forward 'components/buttons';
@forward 'components/text';
sass 编译器运行后会产生一个空块:
.parent-class {
}
有什么方法可以实现将一堆样式包装在一个支持@use
and@forward
规则的类中?
解决方案
我发现meta.load-css
在创建具有相同结构的单独原型后,mixin 确实可以工作:
@use 'sass:meta';
@use 'mixins';
@include mixins.alternative-styles {
@include meta.load-css('components');
}
meta.load-css
可以在此 GitHub 问题中找到有关使用此案例的更多详细信息: https ://github.com/sass/sass/issues/3095
我得到空.parent-class
块的原因是因为我正在使用gulp-sass
包的异步编译。替换sass().on(...)
为sass.sync().on(...)
解决问题。
推荐阅读
- automation - 在詹金斯中发送了 ping 但在 1000 毫秒内没有收到 pong
- javascript - 如何在本机反应中绑定远程javascript文件?
- python - 将列表与新行 CSV 中的每个值一起保存
- ruby - 如何使用 msgraph-sdk-ruby 将成员添加到组?
- nginx - 在哪里可以找到为 nginx.ingress.kubernetes.io/affinity 注释生成的配置
- python - 如何在 python 中将`str`对象转换为`datetime`对象
- sh - 如何通过 SSH 执行源(点)命令?
- postgresql - 使用 PostgreSQL plpython3u 函数返回一个表
- python - python重试重试,禁用unittest
- python - Pytorch 中的批量学习是如何进行的?