Thursday, February 20, 2020

Learn @use and @import rule and directive in SASS/SCSS with examples

In this tutorials, we are going to learn @import and @use features with examples and difference between withm.

@import directive in SASS

 @import is used to import css and sass styles into As you kknow SASS is open source preprocessor language used in applications @import directive rule @import in css is used to import styles from one file into other css styles, SASS also works the same way, Only difference is css makes a extra http call to imports it, SASS will not make a extra call. Other difference is SASS imports other features mixins,partials and all other features. Advantages with this approach is reusable and not repeated code Syntax

@import "filename"
if you have all your colors related styles in colors.scss, then import into main.scss
@import are used in both to include style sheet files into other style sheets.

CSS SASS
Supports CSS files only Supports .sass and .scss extension only
imported file declaration is not removed in included file import file statements does not exist and content will be replaced in in in included sass file
Performance is not good, It makes extra http call to import css resources Performance is good and not makes Http call
css imports CSS supported features It imorts mixins,partials and all features of SASS language
css imports the content at runtime It This will imports content at compile or runtime

@use directive in SASS


Related article


EmoticonEmoticon