SASS | @import
Using @import we can import SCSS or CSS files in our main file, So basically we can combine multiple files together.
Syntax:
@import 'Relative path to the file1', 'Relative path to the file2', ...;
We do not have to include .scss or .css extension after file name in the path. You can import as many files as you want. To understand relative path go through this article.
- Importing SCSS file into SCSS file:
Here we put _ before the name of the .scss file which tells the SASS compiler that the file should not compile on its own.Advantage:
The main advantage of doing this is, We can combine multiple files using @import and then compile the main file. So, as a result, we will have only one CSS file and therefore browser will not have to make more than one HTTP request to load different CSS files.
_aside_list.scss#aside_list {
list-style-type
:
none
;
li {
color
: grey;
text-align
:
center
;
width
:
40px
;
height
:
80px
;
background-color
: lightpink;
// Here & is parent selector
&:hover {
background-color
: pink;
}
}
}
chevron_rightfilter_noneYou can leave _ and .scss extension while importing the .scss file.
input.scss
@import "aside_list";
Compiled file of input.scss: output.css
#aside_list { list-style-type: none; } #aside_list li { color: grey; text-align: center; width: 40px; height: 80px; background-color: lightpink; } #aside_list li:hover { background-color: pink; }
- Importing CSS file into SCSS file:
Importing CSS file is similar to importing .scss file but you must not include .css as the extension of CSS file. The main reason for this is: CSS also have @import rule which has .css extension syntax.paragraph.css
p {
color
:
red
;
font-size
:
20px
;
}
chevron_rightfilter_noneinput.scss
@import
'paragraph'
;
chevron_rightfilter_noneCompiled file of input.scss: output.css
p { color: red; font-size: 20px; }
Recommended Posts:
- CSS | @import rule
- What is the best way to include CSS file? Why use @import?
- SASS | @if and @else
- How to import Google Fonts in HTML ?
- SASS | Nesting
- SASS | Interpolation
- CSS Preprocessor | SASS
- SASS | Comments
- SASS | Variables
- What is the difference between SCSS and SASS ?
- SASS | @mixin and @include
- SASS | Parent Selector
- SASS | Placeholder Selectors
- Last-child and last-of-type selector in SASS
- SASS | Shadowing and Flow Control
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.