[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)

@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!

 

 

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.