{

Learn @use and @import rule and directive SASS|SCSS


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

@import directive in SASS

@import is used to import CSS and sass styles As you know SASS is an 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 an extra HTTP call to imports it, SASS will not make an extra call.

Another difference is SASS imports other features mixins, partials, and all other features.

The advantages of this approach are 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 is used in both to include style sheet files into other style sheets.

CSS  SASS  
Supports CSS files onlySupports .sass and .scss extension only
imported file declaration is not removed from the included file
import file statements do not exist and the content will be replaced in included sass file
Performance is not good, It makes extra HTTP calls to import CSS resourcesPerformance is good and not makes HTTP call
CSS imports CSS-supported featuresIt imports mixins, partials, and all features of the SASS language
CSS imports the content at runtimeThis will imports content at compile or [email protected] directive in SASS
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.