Simple Starter: Setting up a Simple static dev environment using Sass and Browser Sync

simple-starter.md

Simple Starter

Simple starter is a minimal set up for a simple development environment for static website building using Sass and Browser Sync.

1. Install Node JS.

2. Create a project folder on your computer.

3. Create a folder inside your project folder called src. Place your actual site files for your project in here.

4. Create a file called package.json in your project folder and paste the following code:

   {
     "name": "your-project-name",
     "version": "1.0.0",
     "description": "Description of your project",
     "main": "src/index.html",
     "scripts": {
       "sync": "browser-sync start -s \"src\" -f \"src/**/*.*\"",
       "start": "npm run sync",
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "Your Name",
     "license": "ISC",
     "devDependencies": {
       "browser-sync": "^2.24.7"
     }
   }

   Update the name, description, and author fields to your own project information.

5. Add a .gitignore file with these contents in your root folder:

   node_modules
   *.css.map
   package-lock.json

6. In terminal, browser to your project folder and run npm install.

7. When ready to start development just run npm start from terminal.

A browser tab will open that will live reload from your src folder as you make changes there.

Adding Sass

If you are using Sass for your styles:

1. Ensure that you have a styles.scss in your src folder as your root style sheet. This will compile to src/styles.css when running.

2. Rename all your .css files to use .scss instead. See more about Sass setup below.

3. Use this package.json instead (be sure to update the same data you did above to match your project setup):

   {
    "name": "your-project-name",
    "version": "1.0.0",
    "description": "Description of your project",
    "main": "src/index.html",
    "scripts": {
      "sync": "browser-sync start -s \"src\" -f \"src/**/*.*\"",
      "sass": "node-sass -w --include-path='src/scss' --source-map=true src/styles.scss src/styles.css",
      "start": "npm-run-all -p sync sass",
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Your Name",
    "license": "ISC",
    "devDependencies": {
      "browser-sync": "^2.24.7",
      "node-sass": "^4.9.3",
      "npm-run-all": "^4.1.3"
    }
   }

4. Update your .gitignore to this to ensure that only your SCSS files are tracked instead of CSS files:

   node_modules
   *.css
   *.css.map
   package-lock.json

5. Run npm install again to ensure you get the new packages.

Just as before, use npm start to fire up your development environment. You should see your work reload in the browser as you work including when you make changes to Sass files.

More About Sass Setup

Sass is a very power CSS Preprocessor. Based on the configurations above you can easily make use of the following features:

• With a single root stylesheet styles.scss inside src you can either place all your styles in this file or import any number of other styles from other files in your project.
• @import 'filename' allows you to import the indicated file. In Sass, you don't need to include an extension for the file. And if you place the file inside a new subfolder called scss you don't need to include scss/ in the path since this folder is configured as an import path. This means you can keep all your modular styles organized inside scss/.
• Sass is also configured to compile files that end with .scss to CSS files. However, if you name a file starting with an underscore _ this default processing is aborted. Therefore, any Sass files that you import into your main style sheet can be placed inside scss/ and named starting with _ to ensure they don't get compiled other than when they're imported elsewhere.

We recommend using a structure like this for your Sass files:

src/
  |- scss/
  |   |- _layout.scss
  |   |- _type.scss
  |   |- _vars.scss
  |   |- ... etc.
  |- styles.scss

The specific files here are not as important as that we placed them in the scss/ folder and that they begin with _.

Then styles.scss looks like this:

@import 'vars';
@import 'type';
@import 'layout';
// etc...

Therefore styles.scss simply imports each of the separate modular Sass stylesheets from within the scss folder and compiles them into styles.css.