Question

通过在SCSS / SASS中使用@import方法我可以从我的不同块的.SCSS文件(eg. _color.scss, _var.scss, styles.css ...)中编译一个大的.CSS文件，但是如果有可能有不同的.CSS文件块共享值他们之间但是在编译时不添加相同的样式？

例如：使用menu.css生成_color.scss, _var.scss, _grid.scss and menu.scss 并使用appBar.css和_color.scss, _grid.scss

制作appBar.scss

我想同时使用同一页面/项目中的文件，以便在需要时加载但问题是如果我在SCSS / SASS中使用@import它将导入导入文件的所有样式和变量并为我创建.CSS文件，并且这两个文件将在文件之间反复重复相同的属性。

Answer 1

您可以使用@mixins，@ functions和@extends而不是导入所有CSS。

例如，如果你在_color.scss

中有这个

$app-colors: {
  color-black: #000,
  color-white: #fff
}

@function getColor( $color-name) {
  @return map-get( $app-colors, $color-name );
}

您只需要在最终的SASS中使用getColor函数，代码不会一次又一次地重复。

因此，在您的常见SCSS文件中，您将只有函数或方法，但没有类。这些类将在最终的SCSS文件中使用这些方法生成。

但是，我不太确定你需要完全隔离的CSS块如menu.css和appbar.css，它们在没有其他css文件帮助的情况下完全完美。这很奇怪。

SCSS / SASS共享变量，mixins＆amp;文件之间没有导入的样式

1 个答案: