[Sass] Architect : the 7 - 1 pattern

7 different folders for partial Sass files, and 1 main Sass file to import all other files into a compiled CSS stylesheet.

 

The 7 folders:

 

base/

• basic product definitions

components/

• one file for each component

layout/

• define the overall layout of the project

pages/

• styles for specific pages of the project

themes/

• want to implement different visual themes

abstract/

• put code that doesn't output any CSS such as variables or mixins

vendors/

• all third party CSS goes mixin(a huge variable with multiple lines of code) is just a reusable piece of code
• whenever we want that, that mixin that code is then put in the place where we used or where we called that mixin.

 

@mixin clearfix {

content:"";

display:block;

clear:both;

}

@mixin variable-name(argument) {

}

@mixin style-link-text($col) {

color: $col;

}

@include style-link-text($color-text-dark);
/* $color-text-dark is that we need a argument! */