2021 update

The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead.

So as per the situation here , the code should be changed from

@import 'path/to/main.scss' //Note: make sure that you name your sass partials starting with an underscore(_), this way sass knows that its not meant to be compiled to a css file and you also don't need to include the extension as seen here, instead change it

to

@use 'path/to/main' as m //where 'm' is a reference variable or namespace to your partial.which BTW is optional but recommended.

You can find more about it here: Sass-docs/imports

The short answer is you dont have to import them into everyfile that might include them. However there does need to be a relationship somewhere, and how you do this depends on whether or not you are looking to build one single final CSS file - or a series of individual files.

If you want the former, you could consider having a master import file that does little more than import all the appropriate *.scss files, and have this be the main SASS file your gulp build script looks to compile.

You'll need to take care to import files in the correct order - so no importing a file that uses a mixin before the file that defines the mixin has been imported it's self.

So for example - personally I work with a main.scss file that is structured as

@import "common/_variables.scss";
@import "common/_mixins.scss";


// Now import the files that might use these vars/mixins
@import "common/_buttons.scss";

which is built via gulp to create css/main.css.

Should you want a series of CSS files - i.e. buttons.css, type.css, layout.css etc - then you would need to have the appropriate variables and mixin @import declarations in each file that calls them

This is how you can implement mixin in your scss file:

@mixin mobile-md {
  @media (min-width: #{$breakpoint-mobile + 80}) {
    @content;
  }
}

And this is how you can use it in your code:

@include mobile-md {
  // Styles for screens larger than the mobile-md breakpoint
}

Let's understand all about mixin:

The provided code snippet is written in SCSS (Sassy CSS) and defines a mixin called mobile-md. A mixin in SCSS is a reusable block of code that can be included in other stylesheets using the @include directive.

Here's a breakdown of what the code does:

@mixin mobile-md { ... }: This line defines a mixin named mobile-md.

@media (min-width: #{$breakpoint-mobile + 80}) { ... }: This line specifies a media query that targets a minimum width equal to the value of the variable $breakpoint-mobile plus 80. The min-width condition is used to apply the styles within the media query only if the viewport width meets the specified criteria.

@content;: This line is a placeholder that will be replaced with the actual content of the mixin when it is included in other stylesheets using @include.

To better understand the code, we need to know the value of the variable $breakpoint-mobile. It seems that the value of this variable is expected to be a number representing a specific mobile breakpoint. The mixin mobile-md is intended to apply styles when the viewport width is larger than the mobile breakpoint plus 80 pixels.

By utilizing the mobile-md mixin with appropriate styles inside the @media block, you can create responsive designs that adapt to different screen sizes.

You can import it like this;

@import "../../_variables";

@import "../_mixins";

@import "_main";

@import "_login";

@import "_exception";

@import "_utils";

@import "_dashboard";

@import "_landing";

According to your directories and it will do what you want.