此scss最接近纯CSS的转换是什么:-
.mfp-force-scrollbars {
&.mfp-wrap {
overflow-y: auto !important;
overflow-x: auto !important;
}
.mfp-img {
max-width: none;
}
.mfp-close {
position: fixed;
}
}
答案 0 :(得分:0)
在使用之前,SCSS代码已编译为CSS。如果要从SCSS转换为CSS,只需对其进行编译。这里有一个在线编译器:http://beautifytools.com/scss-compiler.php 但是大多数人要么在编辑器中使用扩展程序(VS Code有多个扩展程序),要么使用命令行工具。 Sass网站位于https://sass-lang.com/,其中包含CLI(https://sass-lang.com/install)的文档和安装说明,因此您可以直接开始编译SCSS。这是直接回答您问题的已编译代码:
.mfp-force-scrollbars.mfp-wrap {
overflow-y: auto !important;
overflow-x: auto !important;
}
.mfp-force-scrollbars .mfp-img {
max-width: none;
}
.mfp-force-scrollbars .mfp-close {
position: fixed;
}
在SCSS中,&
符号称为“父选择器”,它在嵌套选择器中用于重复其直接父代。在此处阅读更多信息:https://sass-lang.com/documentation/style-rules/parent-selector
在一个非常小的注释上,如果overflow-x
和overflow-y
的值相同,则可以只使用速记overflow
。因此SCSS可能是:
.mfp-force-scrollbars {
&.mfp-wrap {
overflow: auto !important;
}
.mfp-img {
max-width: none;
}
.mfp-close {
position: fixed;
}
}