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
File Splitting in SASS
SASS is a CSS pre-processor, that stands for Syntactically Awesome Style Sheet. The SASS code is written just like a scripting language like JavaScript, but at the time of compilation it is converted into CSS and compiled as CSS in the browser. SASS can be used with any version of CSS. It is used to enhance and advance the way of writing the code in normal CSS.
In normal workspace, we are used to of writing the whole code in one single file only, that makes our code complex to read and understand for any other developer. SASS allow us to split the file and divide the code into multiple files.
The process of splitting a file includes the breaking of a one big file into multiple sub files and then link them with each other, which can be easily done by using the below methods in SASS −
By using @import and partials
By using @use and partials
Let us now understand the above methods in details to link the multiple sub files of a single file with each other in SASS with the help of code examples.
By Using @import and Partials
In this method, we will write the styles as we normally writes in CSS files. But there will be a common file that contains the @import statement for all the other files to include or link them together and get the code of all those files in that file.
After all the sub files are linked or included into the common file, you need to run the below command in the same folder where all SASS files exists −
Sass –-watch common_file_name.scss final_output_file_name.scss
The above command will link or include the whole code of the common SASS file into the final output file that will be linked to the HTML document to style the page.
Let us discuss the implementation of the above method in details with the help of code example −
Steps
Step 1 − In this step, we will create multiple SASS file with .scss extension
Step 2 − Now, we will create a SASS file that contains the @import statement for all the SASS files created in the previous step.
Step 3 − In the final step, we will include or link the common file with the final CSS file using above command and then link it with the HTML document.
Explanation
File 1 − let us create a file named test.scss and put some SASS code inside that file.
test.css −
div{
color: #fff;
background: #444;
margin: 15px;
}
File 2 − Now, create a file named common.scss. This file will link all the sub files using the @import statement.
common.scss −
@import "test.scss";
div{
font-size: 22px;
font-weight: bold;
padding: 15px;
}
File 3 − This will be our final file final.css, which will contain all the SASS code and will be linked to the HTML document.
Run below command −
sass –-watch common.scss final.css
final.css −
final.css:
/* imported code from test.scss */
div{
color: #fff;
background: #444;
margin: 15px;
}
/* code from common.scss */
div{
font-size: 22px;
font-weight: bold;
padding: 15px;
}
Now, we can link the final.css file with the HTML document to style the page with the CSS of all the SASS files as done in the below example.
Example
The below example will you how you can create and link multiple SASS file together and style a page −
<html>
<head>
<style>
/* imported code from test.scss */
div{
color: #fff;
background: #444;
margin: 15px;
}
/* code from common.scss */
div{
font-size: 22px;
font-weight: bold;
padding: 15px;
}
</style>
</head>
<body>
<div>
<h2>This is Heading of First Div.</h2>
</div>
<div>
<h2>This is Heading of Second Div.</h2>
</div>
</body>
</html>
In the above example, we have used the final final.css file to style the document with all the styles of SASS files.
Note − Please make sure that you have SASS pre-installed to implement the above code example in your system.
By Using @use and Partials
The @use method of embedding the style is almost similar to the @import method. You just need to name the files with an underscore as an prefix to their names and import them using @use statement. It will also allow us to access the functions and mixins defined in the SASS files.
Explanation
File 1 − File 1 will be a SASS file that contains the functions, mixins and simple CSS styles defined with a underscore as prefix.
_test.scss −
@function my_space(){
$padding: "15px";
return $padding;
}
File 2 − It will be a common file, that link all the SASS file together using the @use statement.
common.scss −
@use "test";
div{
color: #fff;
padding: test.my_space();
}
File 3 − This file is the final CSS file which is a final version of all styles coming from all the SASS files.
Run below command −
sass –-watch common.scss final.css
final.css −
/* combined code from both files */
div{
color: #fff;
padding: 15px;
}
In this way you can implement the SASS by splitting the files and add styles to the HTML document with a final outputting CSS file.
In this article, we have learned about the two different ways of linking or embedding the splitted SASS files into one single file and then add styles to our HTML page using that final CSS file.
219 Views
