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 a normal workspace, we are used to writing the entire code in a separate file, which makes our code difficult for other developers to read and understand. SASS allows us to split files and separate 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 method in detail, with a code example to link multiple sub-files of a single file in SASS.
By using @import and partial files
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 detail through code examples -
step
Step 1 − In this step, we will create multiple SASS file with .scss extension
Step 2 - Now, we will create a SASS file containing the @import statements for all the SASS files created in the previous step.
Step 3 - In the final step, we will use the above command to include or link the public files into the final CSS file and then link it with the HTML document.
Explanation
is: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 contains 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 files 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 SASS is pre-installed on your system to implement the above code example.
By using @use and partial files
Embedding styles using the @use method is almost similar to the @import method. You just need to prefix the file names with an underscore and import them using the @use statement. This will also allow us to access functions and mixins defined in the SASS file.
The Chinese translation ofExplanation
is:Explanation
File 1 − File 1 will be a SASS file that contains the functions, mixins and simple CSS styles defined with an underscore as prefix.
File 2 − This will be a common file that links all SASS files together using @use statements.
File 3 − This file is the final CSS file, it is the final version of all styles from all SASS files.
_test.scss −
@function my_space(){
$padding: "15px";
return $padding;
}
common.scss −
@use "test";
div{
color: #fff;
padding: test.my_space();
}
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 learned two ways to link or embed split SASS files into a separate file and use that final CSS file to add styles to our HTML pages.
The above is the detailed content of File splitting in SASS. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1376
52
Working With GraphQL Caching
Mar 19, 2025 am 09:36 AM
If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or
Making Your First Custom Svelte Transition
Mar 15, 2025 am 11:08 AM
The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.
Show, Don't Tell
Mar 16, 2025 am 11:49 AM
How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about
Building an Ethereum app using Redwood.js and Fauna
Mar 28, 2025 am 09:18 AM
With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum
What the Heck Are npm Commands?
Mar 15, 2025 am 11:36 AM
npm commands run various tasks for you, either as a one-off or a continuously running process for things like starting a server or compiling code.
How do you use CSS to create text effects, such as text shadows and gradients?
Mar 14, 2025 am 11:10 AM
The article discusses using CSS for text effects like shadows and gradients, optimizing them for performance, and enhancing user experience. It also lists resources for beginners.(159 characters)
Let's use (X, X, X, X) for talking about specificity
Mar 24, 2025 am 10:37 AM
I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and
Creating Your Own Bragdoc With Eleventy
Mar 18, 2025 am 11:23 AM
No matter what stage you’re at as a developer, the tasks we complete—whether big or small—make a huge impact in our personal and professional growth.
