Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Why to put “_” in front of filename in SCSS?
In SCSS, placing an underscore (_) at the beginning of a filename creates a partial file. This tells the SCSS compiler to ignore the file during compilation, preventing it from generating a separate CSS file. Partials are designed to be imported into other SCSS files.
When to Use Underscore Prefix
Use the underscore prefix when creating SCSS files that contain
- Variables and mixins
- Reusable CSS components
- Files meant to be imported, not compiled independently
For example, _variables.scss and _mixins.scss are partials, while main.scss is a regular file that gets compiled.
Example 1: Basic SCSS Variables
Let's create a simple example with SCSS variables
<!DOCTYPE html>
<html>
<head>
<style>
/* Compiled from main.scss */
div {
font-size: 20px;
font-style: italic;
color: #333;
}
</style>
</head>
<body>
<h2>Using SCSS Variables</h2>
<div>This text is styled using SCSS variables.</div>
</body>
</html>
Source Files:
_variables.scss (partial file)
$font-size: 20px; $font-style: italic; $text-color: #333;
main.scss (main file)
@import "variables";
div {
font-size: $font-size;
font-style: $font-style;
color: $text-color;
}
A styled div element with 20px italic text in dark gray color appears on the page.
Example 2: Using Partial for Component Styles
This example shows how to organize component styles in partials
<!DOCTYPE html>
<html>
<head>
<style>
/* Compiled from main.scss */
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.card {
border: 2px solid #e0e0e0;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="card">
<h3>Card Component</h3>
<p>This card uses styles from a partial file.</p>
<button class="button">Click Me</button>
</div>
</body>
</html>
Source Files:
_components.scss (partial file)
$primary-color: #007bff;
$border-color: #e0e0e0;
.button {
background-color: $primary-color;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.card {
border: 2px solid $border-color;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
main.scss (main file)
@import "components";
A styled card with rounded corners, shadow, and a blue button appears on the page.
Key Benefits
- Modular organization: Keep related styles in separate files
- Reusability: Import partials across multiple main files
- Clean output: Only main files generate CSS, avoiding clutter
- Better maintenance: Easier to find and update specific components
Conclusion
Using underscores in SCSS filenames creates partials that organize code without generating separate CSS files. This promotes modular, maintainable stylesheets by separating variables, components, and utilities into reusable imports.
827 Views
