Organizing Sass Files for Scalable Projects
Sometimes it is challenging to write all the code in one file. Sass allows split the code into different files and folders. It simplifies the support and code refactoring.
sass folder
Our first task is to create the sass folder in the project root. This way we let the compiler know that we use sass in the project.
sass folder organization
In the sass folder:
- We create the
main.scssfile. It is the main file for the compiler. We will connect all fragments to this file with the help of the@importdirective; - We create different folders for the sass partials. (e.g., the
utilitiesfolder for variables, thecomponentsfolder for the repeating styles of some elements, thebasefolder for the global styles and resetting default element behavior, and thelayoutsfolder for not repeating styles).
partials
Now, we are ready to add files and write some sass code to give the styles to the elements. To keep the structure, we create one file for each feature. The file name must start with the underscore (_). For the compiler, it means that it is not the main file. It is partial.
All structure is ready. We can import all the files to the main.scss file with the help of the @import directive. The order is essential. For example, if we would like to use some variables from the _variables.scss file in the _button.scss file, then we have to keep the _variables.scss file import higher than the _button.scss file import inside of the main.scss file.
The syntax for importing the file is the following. We use @import, and double quotes ("") to specify the correct path to the file.
@import "path";
The result content in the main.scss file is following:
@import "utilities/variables";
@import "base/resetting";
@import "components/button";
@import "components/link";
@import "layouts/about-section";
@import "layouts/contacts-section";
Note
We have considered the basics of the sass preprocessor that allows us to use it for projects. However, any preprocessor has a vast amount of different features. To cover all of them is different from the plot of this course.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 2.04Organizing Sass Files for Scalable Projects
Pyyhkäise näyttääksesi valikon
Sometimes it is challenging to write all the code in one file. Sass allows split the code into different files and folders. It simplifies the support and code refactoring.
sass folder
Our first task is to create the sass folder in the project root. This way we let the compiler know that we use sass in the project.
sass folder organization
In the sass folder:
- We create the
main.scssfile. It is the main file for the compiler. We will connect all fragments to this file with the help of the@importdirective; - We create different folders for the sass partials. (e.g., the
utilitiesfolder for variables, thecomponentsfolder for the repeating styles of some elements, thebasefolder for the global styles and resetting default element behavior, and thelayoutsfolder for not repeating styles).
partials
Now, we are ready to add files and write some sass code to give the styles to the elements. To keep the structure, we create one file for each feature. The file name must start with the underscore (_). For the compiler, it means that it is not the main file. It is partial.
All structure is ready. We can import all the files to the main.scss file with the help of the @import directive. The order is essential. For example, if we would like to use some variables from the _variables.scss file in the _button.scss file, then we have to keep the _variables.scss file import higher than the _button.scss file import inside of the main.scss file.
The syntax for importing the file is the following. We use @import, and double quotes ("") to specify the correct path to the file.
@import "path";
The result content in the main.scss file is following:
@import "utilities/variables";
@import "base/resetting";
@import "components/button";
@import "components/link";
@import "layouts/about-section";
@import "layouts/contacts-section";
Note
We have considered the basics of the sass preprocessor that allows us to use it for projects. However, any preprocessor has a vast amount of different features. To cover all of them is different from the plot of this course.
Kiitos palautteestasi!
