The journey of #100DaysOfCode (@Darine_Tleiss)

Darine_Tleiss · June 20, 2022, 7:28pm

100daysofcode - Day13

Hello friends, How it’s going on , wrapping up our 13th day successfully with some amazing content. And a deep dive into SASS and SCSS.

In yesterday’s post, we defined SCSS and SASS, how they extend the CSS capabilities giving us a lot of features out of box , making the front end developers life a smooth and productive one . We also mentioned the SCSS architecture , with a gentle intro about the thinking and building phase. And now it’s time to resume our process and talk more about the 3 and the most important phase. The (Think Build Architect) 3rd parameter.

YEAH, You guessed it !!. The Architect phase

Architect ?: In this phase we should create a logical architecture to organize our CSS files
and folders.
And here we follows the famous 7-1 pattern

7-1 pattern ?: A famous and well adopted structure that serves as a solid base for large and production projects. In this / arch we have 7 different folders for partial SCSS files and a single file that sits at the root, we usually call it the main file, where all files are imported to be compiled into a compatible CSS stylesheet

How does the seven/one pattern organize the folders and files in SCSS ?

Starting with folders, we will explore each one of them in deep details, starting with:

Base: the folder that hold the boilerplate code of the project, including all standard styles, like the typographic rules, which they are used commonly throughout the project
Example:
```
        	base/
                  _animations.scss
      			  _typography.scss
      		      _ base.scss(contains the html and body components)
```
Components: the folder that hold the style of the sliders, buttons, and all similar components like the reusable widgets in React JS
Example:
```
		  components/
				_button.scss
				_form.scss
                _popup.scss
```
Layout: the folder that contains the styles files that control the project layout , like the styles of the navigation bar, the header, the footer …
Example:
```
	  layout/
		_footer.scss
		_navigation.scss
		_header.scss
```
Pages: the folder that contains the specific style of an individual page, like the home page style. Which is not required in other pages and at the same time does not 🆇 require any style from other pages.
Example:
```
    	 pages/
            _home.scss
```
Themes: a folder that contains the files of specific themes, and it’s not used in every project out there , as it only required if we have some sections the contain alternate schemes
Example:
```
	   themes/
		    _theme.scss
		    _admin.scss
```
Abstracts: the folder that contains the helper files, mixins functions, SASS tools and any other config file , and this files are just helpers which don’t output when they get compiled
Example:
```
       abstracts/
	       _functions.scs
	       _mixins.scss
	       _variables.scss
```
Vendors: the folder that contains all third party code and all external libraries:books:, like bootstrap, jQuery, tailwind …
Example:
```
	   vendors/
	     	_bootstrap.scss 
	    	_jquery-ui.scss
```

So yeah, now we explored our folders successfully , so let’s move on and explore the single file that exists in the amazing architecture.

main.scss: the file that only contains the required imports from all other files.
Example:

    
        @import "abstracts/functions";
        @import "abstracts/mixins";
        @import "abstracts/variables";  
           
        @import "base/animations";    
        @import "base/base";  
        @import "base/typography";    
        @import "base/utilities";    
           
        @import "components/bg-video" ;  
        @import "components/button";  
        @import "components/card";
        @import "components/composition";
        @import "components/feature-box";
        @import "components/form";
        @import "components/popup";
        @import "components/story";
               
        @import "layout/footer";
        @import "layout/grid";    
        @import "layout/header";
        @import "layout/navigation";
         
        @import "pages/home";

And now, we have reached the end of our post. I hope you enjoyed reading it and benefited from it. Stay tuned for my ⎘ next posts where we will learn together how we can install SASS and SCSS, via the node package manager and start exploring it in an interactive way