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
Answer from shaderone on Stack OverflowCan't @use mixin, but can @import
Can i use mixins defined in a partial that is imported in the main scss file in another partial?
Import and export mixins, functions, extend
Using @import statements within control directives or mixins
Videos
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
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
I have three files:
-
style.scss
-
_mixins.scss
-
_navigation.scss
obviously, in _mixins.scss i have my mixins defined. In style.scss i then import these mixins with u/use 'mixins';. I now also have another partial called _navigation.scss that i also imported into the main scss file using u/use 'navigation';. I now want to use a mixin defined in the mixins partial, in the navigation partial. But when i try to do this i get an Error: Undefined mixin.
Is what i am trying to do not possible? If so, how would i use a mixin defined in _mixins.scss in another partial?
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
I found the best solution for me with pre-concating SASS files with GULP.
Like in this example for STYLUS
gulp.src(config.projects.css.source)
.pipe(sourcemaps.init())
.pipe(mktimecss(__dirname+'/web'))
.pipe(concat('styles'))
.pipe(stylus({
'include css': true,
use: [nib()],
// compress: true,
linenos: false
}))
...... and so on .......
We all know that Angular has component-specific SCSS file for styling which is really a good thing. We mostly write our common/global styles in styles.scss file or any other file which is imported into styles.scss file. Suppose we have variables.scss and mixins.scss file. These files contain variables and mixins. whenever we need to use them we can import them into styles.scss file to use them in that file. But, if we need those variables and mixin in our specific components we need to import them again into our components.
-
Doesn't it have any performance issues? like redundant variables and mixins in components as well.
-
Isn't it like building/bundling variables and mixins multiple times for each component we have imported into?
-
isn't this increasing the build/bundle size for each component and global component as well?
My question is what is the best way to access variables and mixins globally or locally (by importing in component) without having any performance issues and bundle size issues?