CODEWITHSUNDEEP
csssass
tam
tam

Reputation: 352

SCSS/SASS Share variables, mixins & styles between files without importing

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.cssusing_color.scss, _var.scss, _grid.scss and menu.scss
and make appBar.cssusing_color.scss, _grid.scssandappBar.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.

Upvotes: 0

Views: 1968

Answers (1)

Alex R Chies
Alex R Chies

Reputation: 84

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.

Upvotes: 2

Related Questions