[英]Sass: How to merge nested import selectors with parent selector?
I have an existing website where I want to import Bootstrap CSS styles.我有一个现有的网站,我想在其中导入 Bootstrap CSS styles。 The styles are clashing, so I want to scope the rules. styles 发生冲突,所以我想 scope 规则。
// node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss
.modal {
display: none;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
}
// ---
// my-styles.scss
.my-selector {
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/modals";
}
This results in .my-selector.modal
, but I want to have .my-selector.modal
.这导致.my-selector.modal
,但我想要.my-selector.modal
。
I want to avoid having to copy-paste the style rules.我想避免复制粘贴样式规则。 If I can somehow do it with @extend it would be already great.如果我能以某种方式使用@extend 做到这一点,那就太好了。
Thanks for any suggestions.感谢您的任何建议。
I'm not sure that I completely understand the question because // node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss
is not parent of the current/standard Bootstrap SASS files.我不确定我是否完全理解这个问题,因为// node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss
不是当前/标准 Bootstrap SASS 文件的父级。
If you're using the latest Bootstrap, _modal.scss
contains all the SASS modal source.如果您使用的是最新的 Bootstrap, _modal.scss
包含所有 SASS 模态源。 So, if you wanted to @import all the modal rules/classes (.modal, .modal-header, .modal-body, etc...) to another parent my-selector
class it would be...因此,如果您想将所有模态规则/类(.modal、.modal-header、.modal-body 等)@import 到另一个父my-selector
class 它将是...
@import "bootstrap";
.modal.my-selector {
& {
@import "bootstrap/modal";
}
}
SASS Demo: https://codeply.com/p/XjYSfp0s8H SASS 演示: https://codeply.com/p/XjYSfp0s8H
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.