Architecture to organize your CSS files. If the site is small perhaps it is not necessary to divide it with so much effort. That's why I propose you an optional and trimmed version that I always use when doing a quick job (a week or less).
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
resources/sass
LICENSE
README.md
index.html

README.md

Pattern Template 7-1 Lite version, an extraordinarily neat architecture that any Web Designer can understand at a glance. Structure with the help of SASS.

sass/                    
|
|– _base.sass            
|– _header.sass          
|– _footer.sass          
|– _mixins.sass          
|– _typography.sass      
|– _variables.sass       
|– pages/                
|   |– _home.sass        
|   |– _contact.sass     
|   ...                  
|– vendors/              
|   |– _bootstrap.sass   
|   |– _jquery-ui.sass   
|   ...                  
`– main.sass             

Compile SASS.

Install

yarn global add node-sass

Run

node-sass --output-style compressed resources/sass/main.sass css/main.css

Watch: Autocompile if it detects changes

node-sass --watch --source-map true --output-style compressed resources/sass/main.sass css/main.css