SCSS 到 Pure CSS 翻译

Question

这个 scss 到纯 CSS 最接近的转换是什么：-

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

}

Answer 1

SCSS 代码在使用前被编译为 CSS。如果你想从 SCSS 到 CSS 只需编译它。这里有在线编译器：http://beautifytools.com/scss-compiler.php 但是大多数人要么在他们的编辑器中使用扩展（VS Code 有几个），要么使用命令行工具。 Sass 网站位于：https://sass-lang.com/ and it has documentation and installation instructions for the 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 中，& 符号称为 "Parent Selector"，它在嵌套选择器中用于重复其直接父代。在这里阅读更多：https://sass-lang.com/documentation/style-rules/parent-selector

一个非常小的注意事项，如果 overflow-x 和 overflow-y 值相同，您可以只使用 shorthand overflow。所以 SCSS 可能只是：

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

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

   .mfp-close {
     position: fixed;
    }
}

SCSS 到 Pure CSS 翻译

SCSS to Pure CSS translation

scss-mixins