Sass @import Rules

Last Updated:

Sass @import Rules

The @import allows us to combine multiple Sass files into one CSS file.

In the following example, we will include basic.scss stylesheet into main.scss.

Example

basic.scss
h2 { margin: 50px; }

This following is the main.scss file.

SASS TO CSS CONVERTER
@import 'basic'; p{ color:green; }
Output
h2{ margin: 50px; } p{ color:green; }

Syntax

@import 'fileName', 'fileName1', '...'

Combining Multiple File

In the following example, we will include one.scss, two.scss into main.scss file.

Note: Multiple imports to be separated by commas rather than requiring each one to have its own @import.

Example

one.scss
h1 { margin: 50px; }
two.scss
h2 { font-size: 30px; }
SASS TO CSS CONVERTER
@import 'one', 'two';
Output
h1 { margin: 50px; } h2 { font-size: 30px; }

Share this Page

Meet the Author