How to include @mixin from one sass file to another sass file in different folder

Question

I am including a mixin from one SASS file into another file but I've got an error with the ionic serve command:

Error: "Sass Error
Invalid CSS after " @include": expected identifier, was '"../../../theme/mai'"

This is the file where I am importing the mixin:

action-sheet-layout-1 { 
    @include '../../../theme/main.scss' 
    @include "settingAnimationHeader"; // this mixin is defined in main.scss

    [button-action-shit] {
        z-index: 99999; right: 16px; top: 56px;
        ...
    }

The mixin as defined in main.scss:

@mixin settingAnimationHeader { 
    @keyframes headerOff { 
        from { 
            background-color: theme-colors('mainColors', 'primary'); 
        } 
        to {
            background-color: transparent;
        } 
    }
...
}

I am new to ionic and SASS, is what I am doing right or am I missing something?

The directory structure of both files from the app root:

src/theme/main.scss # the mixin is defined in this file.
src/components/action-sheet/layout-1/action-sheet-layout-1.scss # the mixin is imported here.

Belle

Answer 1

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

Levite

@import vs @use in details – Iceboat

This is the correct answer although it only works for Dart SASS. – Appear

Answer 2

at the top of your SASS file (action-sheet-layout-1.scss) you need to include: @import "../../../theme/main.scss" then you can access the mixins inside main.scss by doing @include settingAnimationHeader; inside the css rule where you want to apply this mixin

Cercus

Answer 3

You can rename your main.scss file to _main.scss

The prefix '_' tells the sass/scss compiler that this file is a partial. And so, the compiler will not try to compile the file.

Sass partials

Raimes

Answer 4

If the mixins are defined in main.scss just make sure to import the file before the file they are used in ie action-sheet-layout-1.scss in this case.

Tawannatawdry

Answer 5

For angular application

Create or rename the file with prefix _ eg _main.scss. Thats tells the sass/scss compiler that this file is a partial.

_style.scss

$sizes: 3, 7, 20, 33,37,40;

@mixin width-classes {
  @each $i in $sizes {
    $width: $i +'% !important';
    .w-#{$i} {
      width: #{$width};
    }
  }
}
@include width-classes;

In the other scss file, import the scss file. app.scss

@import '../../../../../../style';

Bollen