SCSS / SASS在文件之间共享变量，混入和样式，而无需导入

Question

By using @import method in SCSS/SASS i can compile a big .CSS file out of my different chunks of .SCSS files (eg. _color.scss, _var.scss, styles.css ...) , but if it possible to have different chunks of .CSS files which share values between themselves but do not add same styles when compiled?

Eg: make menu.css using _color.scss, _var.scss, _grid.scss and menu.scss
and make appBar.css using _color.scss, _grid.scss and appBar.scss

I want to use both the files in same page/project which loads when required,
but the problem is i if i use @import in SCSS/SASS it will import all the styles and vars form that import file and create a .CSS file for me and both the files will have same property repeated again and again in between files.

Answer 1

You can use @mixins, @functions and @extends rather than import all the CSS.

For example, if you have this in your _color.scss

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

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

You only need to use the getColor function in your final SASS and the code will not be repeated again and again.

So, in your common SCSS files you will only have functions or methods but no classes. The classes will be generated using these methods in the final SCSS files.

However, I'm not so sure about your need of have fully isolated CSS chunks like menu.css and appbar.css that work fully perfect without the help of others css files. It is quite weird.