Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Why to put β_β in front of filename in SCSS?
The SCSS allows developers to write CSS in a more structured way. Also, we can create multiple files for CSS while using the SCSS and import the required file in the main SCSS file.
In this tutorial, we will see the objective to put β_β before the filename in SCSS.
When should we put β_β in front of the filename in SCSS?
Whenever we put the -_β before the filename in the SCSS, the compiler ignores the file while compiling the SCSS. The file becomes partial if the filename starts with the β_β character.
For example, we have two files named βstyle.scssβ and β_partial.scssβ. The compiler only compiles the style.scss file, and ignores the _partial.scss file. However, if we require to use the css of the _partial.scss file, we can import it in the style.scss file.
Example
The example below demonstrates how to use the SCSS with the html.
Filename β demo.html
We have added a βstyle.cssβ file in the below file using the β<link>β tag, which is generated by the compiler of the SCSS. In the output, users can observe that CSS is applied to the div element's text, which became italic.
<html> <head> <link rel = "stylesheet" href = "style.css"> </head> <body> <h2> Using the <i> SCSS </i> with HTML. </h2> <div> This is a div element. </div> </body> </html>
Filename β style.scss
In the below file, we created the variable to store the font size and style. After that, we used the variables to style the div element.
$font-size : 20px;
$font-style: italic;
div {
font-size: $font-size;
font-style: $font-style;
}
Filename β style.css
Whenever we compile the style.scss file, it generates the below code, which is used by the html file.
div {
font-size: 20px;
font-style: italic;
}
Example
<html>
<head>
<style>
/* compiled scss code */
div {
font-size: 20px;
font-style: italic;
}
</style>
</head>
<body>
<h2> Using the <i> SCSS </i> with HTML. </h2>
<div> This is a div element. </div>
</body>
</html>
Example
In this example, we demonstrate how to put β_β before the file name and how to use its CSS in the main css file.
Filename β demo.html
The below file contains the simple HTML code and includes the βstyle.cssβ file in the <head> tag.
<html> <head> <link rel = "stylesheet" href = "style.css"> </head> <body> <h2> Using the <i> SCSS from the _partial.css file </i> with HTML.</h2> <div> Content of the div element. </div> </body> </html>
Filename - _partial.css
Users need to create a _partial.scss file with β_β before the filename. After that, users need to add the below code in the file. When we compile the SCSS code, the compiler will ignore the code of this file
$text-color: blue; $border-width: 2px; $border-style: solid; $border-color: green;
Filename β style.scss
Now, users need to add the below code to the style.scss file, which is the main css file. In the below code, we have imported the css from the β_partial.cssβ file. In this way, we can use the code of the partial files.
@import "partial"
div {
color: $text-color;
border: $border-width $border-style $border-color;
}
Filename β style.css
Whenever we compile the style.scss file, it generates the style.css file automatically.
div {
color: blue;
border: 2px solid green;
}
Example
<html>
<head>
<style>
/* compiled SCSS code from the _partial.css file */
div {
color: blue;
border: 2px solid green;
}
</style>
</head>
<body>
<h2> Using the <i> SCSS from the _partial.css file </i> with HTML.</h2>
<div> Content of the div element. </div>
</body>
</html>
The main motive for inserting the β_β before the file name in SCSS is to make the file partial so the compiler can ignore the file. Whenever we require to use the css of the partial files, we can import it into the main file.
The main benefit of using the partial files is that we donβt require to write repetitive code, making it clearer. For example, we can add different partial files for the CSS of different parts and use them whenever required.
343 Views
To Continue Learning Please Login