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.

Answer 1

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