How to import regular CSS file in SCSS file ?
Last Updated :
24 Aug, 2022
In this article, we will learn how to import regular CSS files into SCSS files. Syntactically Awesome Style Sheet is the superset of CSS. SCSS is the more advanced version of CSS. SCSS was designed by Hampton Catlin and was developed by Chris Eppstein and Natalie Weizenbaum. Due to its advanced features, it is often termed Sassy CSS. SCSS have file extension of .scss.You can achieve this task just by writing one line.
@import keyword: This keyword is used to import other files. For example, we made one file with some property and after some time you feel like you want to change some elements you need to create one different file with a different name. After creating a file you can add that file to the current project with the help of the @import keyword.
Import keyword is used to combine all SCSS and CSS files into one file because the code becomes lengthy when we add too many properties to one file so it is used to separate files into smaller parts and import them later when needed.
Syntax:
@import url "/path/of/the/file";
Approach:
- First, create an HTML file without CSS property.
- In the next step, create a file with the .scss extension.
- In the last step, you need to import the CSS file into the SCSS file using the keyword import.
The process for importing the regular CSS file into the SCSS file: You can create any number of CSS and SCSS files and you can use them using the keyword ‘import’. For example, create one CSS file and import that file into the SCSS file then you can able to use that property in your project.
Example1: In the below code, we will create an HTML file and then with the help of the import keyword we will add some CSS properties to the HTML file.
So, first, we create the GfG.html file
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src=
</script>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>
A computer science portal for geeks.
</h3>
</center>
</body>
</html>
|
After creating the GfG.html file, we create One partial named GfG.css
body{
border: 5px solid black;
margin: 60px;
}
Let us create one more CSS file named two.css
h3{
color:red;
}
In the next step, we can import GfG.css in style.scss file and write CSS to style our document. As we have imported the GfG.css and two.css file we can now use them in our style.scss file.
//style.scss
@import 'GFG.css';
@import 'two.css';
Final style.css file:
@import url(GFG.css);
@import url(two.css);
Output:
Example2: In the below code we will create an HTML file and then with the help of the import keyword, we will add some CSS properties to the HTML file.
So, first, we create the GfG.html file
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>GeeksforGeeks</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
</center>
</body>
</html>
|
After creating the GfG.html file, we create One partial named one.scss
$green:green;
$black:black;
$red:red;
In the next step, we can import one.scss in style.scss file and write CSS to style our document. As we have imported the one.css file we can now use them in our style.scss file.
@import 'one';
h1{
background-color:$red;
}
Final style.css file:
h1 {
background-color: red;
}
Output:
Share your thoughts in the comments
Please Login to comment...