如何解决SASS / SCSS标记所有属性!重要的是使用mixin或function
类似于Required<T>
和Partial<T>
映射的打字稿类型,我们在SCSS中有任何东西可以使类的所有属性成为强制性。
更具体地说,这是用例: 我在_font.scss文件中有一个.body2类
.body2 {
font-size: var(--font-sm);
line-height: rem(20px);
font-family: var(--font-base);
letter-spacing: -0.2%;
}
在其他文件中,我必须将此样式赋予来自其他代码库的Web组件。
因此,要覆盖它,我需要标记!important
。
因此,我想扩展此类.body2,而不是手动重写相同的行。
form input,textarea {
@extend .body2;
color: var(--white) !important;
}
,但这不会覆盖Web组件的默认样式,因为属性未标记为!important
。
所以我只想知道SCSS中是否有一个mixin或函数可以帮助我将!important
应用于类的所有属性,可能与打字稿中的Required<T>
和Partial<T>
类似
解决方法
您可以使用带有参数的mixin。使用false
作为默认值。
@mixin a($isImportant: false) {
@if $isImportant {
font-size: var(--font-sm) !important;
line-height: rem(20px) !important;
font-family: var(--font-base) !important;
letter-spacing: -0.2% !important;
} @else {
font-size: var(--font-sm);
line-height: rem(20px);
font-family: var(--font-base);
letter-spacing: -0.2%;
}
}
form input,textarea {
@include a;
color: var(--white) !important;
}
发送true
参数以添加!important
form input,textarea {
@include a(true);
color: var(--white) !important;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。