File splitting in SASS

Last Updated : 14 Nov, 2022

In this article, we will see how to split the SASS File into partial files, along with knowing its implementation through the examples.

Syntactically Awesome Style Sheet(SASS) is a CSS preprocessor that is fully compatible with every version of CSS. It is a scripting language (like JS) that is compiled into CSS in the browser. It provides additional benefits over normal CSS styling that enhances the way of writing CSS styles.

SASS facilitates splitting a SASS code File into multiple files and makes the code easier to debug, & also, we can create multiple files with partial codes and include them all into one common file. File Splitting is a process of breaking the complete SASS code in a file into multiple modules and linking them together into a common file by implementing the below approaches:

@import and partials
@use and partials

We will explore both approaches & understand them through the implementations.

@import and partials: In this case, we will create files with partial code snippets and one common file that contains the @import to import all the other files. The @import directive allows you to include the content of one file in another. Partials are the Sass files with partial code which support modularity.

Example 1: In this example, we have two files index.scss & color.scss, where color.scss file contains some code that is attached to the index.scss file with @import directive. With this, we are breaking the code into two files and coloring the browser with a blue color. Below, we have created 2 SASS files, i.e. color.scss & index.scss:

color.scss:

html,
body {
    background:blue;
}

index.scss:

@import "color.scss";
body {
    font-family:sans-serif;
    font-size: 10px;
    color: white;
}

Now, execute the below command in the same folder where the above two files are stored (Make sure sass is already installed):

sass --watch index.scss output.css

This command will generate the following CSS file:

output.css:

html,
body {
    background: blue;
}

body {
    font-family: sans-serif;
    font-size: 10px;
    color: white;
}

Now, include the above-generated CSS in the HTML template.

index.html:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          href="output.css"> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>File splitting in Sass</h3> 
</body> 
  
</html>

Output:

@use and partials: In this case, we will create partial files with the underscore ( _ ) as a prefix and one common file that contains the @use to import all the other files. The @use is similar to @import but it also allows to call mixins and functions from other files. We need to use the partial files without underscore.

Example 2: In this example, we have 2 files index.scss and _partial.scss, where _partial.scss file contains a function add_green which is called in index.scss file with @use. This helps us to create a modular program(File splitting) that colors the text with green. Here, we have created 2 SASS files, i.e., the _partial.scss & index.scss, as given below:

_partial.scss:

@function add_green() {
   $returnValue : green;
   @return $returnValue;
}

index.scss:

@use "partial";

body {
   font-family: sans-serif;
   font-size: 10px;
   color: partial.add_green();
}

Now, execute the below command in the same folder where the files are stored (Make sure sass is already installed):

sass --watch scss/index.scss style/output.css

This command will generate the following CSS file:

output.css:

body {
    font-family: sans-serif;
    font-size: 10px;
    color: green;
}

Now, include the above-generated CSS in the HTML template.

index.html:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href="output.css"> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>File splitting in Sass</h3> 
</body> 
  
</html>