Зміст курсу
Advanced CSS Techniques
Advanced CSS Techniques
Folder-File Structure
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.scss
file. It is the main file for the compiler. We will connect all fragments to this file with the help of the@import
directive; - We create different folders for the sass partials. (e.g., the
utilities
folder for variables, thecomponents
folder for the repeating styles of some elements, thebase
folder for the global styles and resetting default element behavior, and thelayouts
folder 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.
The result content in the main.scss
file is following:
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.
Дякуємо за ваш відгук!