Sass Minimal Site

Purpose

This is a bare bones Scalable and Modular Architecture for CSS (SMACSS) website using Sass.

File and Folder Structure

• fonts
• images
• sass
  • partials
    • base
    • components
    • global
  • style.scss
• scripts
• stylesheets
  • formalize.css
  • style.css
  • style.css.map
• .gitignore
• gulpfile.js
• index.html
• package.json

Sass Commands

Compile one file on demand

To compile the Sass manually, run the following command:

sass input.scss output.css

This compiles the input.scss file into the output.css file.

For this minimal site, run the command below:

sass sass/style.scss stylesheets/style.css

style.scss is the input SCSS file, and style.css is the output CSS file.

Watch for changes to a file

To watch your Sass so that recompiles after every change to a file:

sass --watch <input file>:<output file>

For the minimal site, run:

sass --watch sass/style.scss:stylesheets/style.css

Watch for changes within a folder

To watch your Sass so that recompiles after every change within a folder:

sass --watch <input folder>:<output folder>

For the minimal site, run:

sass --watch sass:stylesheets

The sass folder contains our Sass and SCSS files that we want to watch, while the stylesheets folder contains our compiled CSS.

Option - Install Gulp

This site comes with an optional gulpfile.js with a Gulp task runner that will re-compile your Sass as you make changes as well as lint your JavaScript using jshint.

To install Gulp run npm install.

To run the Gulp task use the command gulp.

To exit Gulp, type Ctrl+C.