SCSS到纯CSS的翻译

时间:2019-11-24 16:05:42

标签: scss-mixins

此scss最接近纯CSS的转换是什么:-

    .mfp-force-scrollbars {
  &.mfp-wrap {
      overflow-y: auto !important;
      overflow-x: auto !important;
  }
  .mfp-img {
    max-width: none;
  }
  .mfp-close {
   position: fixed;
  }

}

1 个答案:

答案 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-xoverflow-y的值相同,则可以只使用速记overflow。因此SCSS可能是:

.mfp-force-scrollbars {
    &.mfp-wrap {
      overflow: auto !important;
    }

    .mfp-img {
      max-width: none;
    }

   .mfp-close {
     position: fixed;
    }
}