Home > Article > Web Front-end > Why is "_" added in front of the file name in SCSS?
Why is "_" added in front of the file name in SCSS?
- WBOYforward
- 2023-08-25 14:09:131223browse
SCSS allows developers to write CSS in a more structured way. Also, we can create multiple files for CSS while using SCSS and import the required files into the main SCSS file.
In this tutorial, we will see the goal of adding "_" before the file name in SCSS.
When should you put "_" in front of a file name in SCSS?
Whenever we add -_' before a file name in SCSS, the compiler ignores the file while compiling SCSS. If the file name begins with the "_" character, the file becomes a partial file.
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 need to use the css of the _partial.scss file, we can import it into the style.scss file.
Example
The following example demonstrates how to use SCSS with html.
File name – demo.html
We have added a "style.css" file to the file below using the "" tag, which is generated by the SCSS compiler. In the output, the user can observe that CSS is applied to the text of the div element and the text becomes italicized.
<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>
File name – style.scss
In the file below, we have created variables to store the font size and style. After that, we use variables to style the div element.
$font-size : 20px;
$font-style: italic;
div {
font-size: $font-size;
font-style: $font-style;
}
File name – style.css
Whenever we compile the style.scss file, it generates the following 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 show how to add "_" in front of the file name and how to use its CSS in the main css file.
File name – demo.html
The file below contains simple HTML code and contains the "style.css" file within the
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>
File name - _partial.css
Users need to create a _partial.scss file with "_" in front of the file name. After that, the user needs to add the following code in the file. When we compile SCSS code, the compiler will ignore the code of this file
$text-color: blue; $border-width: 2px; $border-style: solid; $border-color: green;
File name – style.scss
Now, users need to add the following code to the style.scss file, which is the main css file. In the code below, we have imported the css from the "_partial.css" file. This way we can use the code from part of the file.
@import "partial"
div {
color: $text-color;
border: $border-width $border-style $border-color;
}
File name – style.css
Whenever we compile the style.scss file, it will automatically generate the style.css file.
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 motivation for inserting "_" before file names in SCSS is to partialize the file so that the compiler can ignore the file. Whenever we need to use the css of a partial file, we can import it into the main file.
The main benefit of using partial files is that we don't need to write duplicate code, making it clearer. For example, we can add different partial files for different parts of CSS and use them when needed.
The above is the detailed content of Why is "_" added in front of the file name in SCSS?. For more information, please follow other related articles on the PHP Chinese website!