Why is '_' added in front of the file name in SCSS?-CSS Tutorial-php.cn

Why is '_' added in front of the file name in SCSS?

WBOY

Release： 2023-08-25 14:09:13

forward

1305 people have browsed it

Why is _ added in front of the file name in SCSS?

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>

Copy after login

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;
}

Copy after login

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;
}

Copy after login

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>

Copy after login

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>

Copy after login

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;

Copy after login

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;
}

Copy after login

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;
}

Copy after login

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>

Copy after login

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!