3

I have a partial sass file which holds mixins that I would like to access globally. My understanding is that all you need to do is @import this file into a master.scss file and it should be accessible globally. Sadly this isn't the case for me. I need to import the variable file into every individual .scss file I want to use it in. What do I nee to do to get so that importing it to the master.scss file I can access my mixins globally?

This is a rails app with my master.scss file imported into the application.scss file.

My assets tree

- scss
 -- utilities 
   -- _mixins.scss
 -- components
   -- buttons.scss
 master.scss

Contents of my master.scss file

@import 'utilities/_mixins';
@import 'components/buttons';

Contents of my mixins.scss file 

@mixin square-size($size) {
  height: $size;
  width: $size;
}

Example of how I'm using the mixin in components/buttons.scss:

  .square-button {
    @include square-size(40px);
}
geraddavis
  • 355
  • 1
  • 3
  • 16

1 Answers1

0

I'm not 100% sure it will resolve your problem but at least your code is cleaner this way.

Rename your button.scss to _button.scss and you don't need the write the underscore in @import 'utilities/mixins';

The underscore means the scss file is a partial. More info here: Why put in front of the file name "_" or "_" in scss/css?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Basile Bong
  • 74
  • 2
  • That's a good catch. After "answering" my own question I spent some more time optimizing my file structure like you mentioned. It is cleaner, like you said, but files that utilize a mixin or extend still need to have the source file for these includes to be referenced at the top of the file. For some reason importing to a master file doesn't work. It's very frustrating. I've been looking for release notes for sass versions without luck. I wonder if this is the source of my problem? Perhaps I'm on an older version that doesn't support this flow? – geraddavis Sep 26 '19 at 15:31
  • How to you compile your sass code ? Maybe it's due to the compiler ? – Basile Bong Sep 26 '19 at 15:43