Setting up SASS/SCSS & Prefixing with POSTCSS

Hey 👋,

There are two parts to this gist and the first is independant.

For the second part you need to have completed the first part.

You do not need both just if you want them they are below.

Setting up SASS/SCSS

In your project in the CLI follow these steps:

Create a package.json

npm init or npm init -y for a blank package.json

Add the SASS package as a devDependancy

npm install sass --save-dev

Update your scripts in the package.json. You have different options to choose from.

"compile:scss": "sass scss/main.scss main.css" will compile the scss file
"watch:scss": "sass --watch scss/main.scss main.css" will watch the file and compile everytime it is saved.
scss/main.scss is the path to the scss file you may have to change it based on your project.
main.css is the output file you may have to change it based on your project.

Run your new scripts based on what you want to do.

npm run compile:scss
npm run watch:scss

Example package.json

{
  "name": "Demo",
  "version": "1.0.0",
  "description": "Demoing SASS",
  "scripts": {
    "watch:scss": "sass --watch scss/main.scss main.css",
    "compile:scss": "sass scss/main.scss main.css"
  },
  "author": "Charlie Richardson",
  "license": "ISC",
  "devDependencies": {
    "sass": "^1.39.0"
  }
}

Setting up post-css to autoprefix your compiled CSS file

This will prefix your css to work across different browsers from the last 10 versions of each.

Add the following devDependencies

npm install autoprefixer npm-run-all postcss postcss-cli --save-dev

Add a prefix script to your package.json

"prefix:css": "postcss main.css --use autoprefixer -r"
main.css is the target file or path to the target file you may have to change it based on your project.
-r rewrites the file if you have your unprefixed css in main.css and run the script it will rewrite the file with the prefixed css

Add a build script to your package.json

"build:css": "npm-run-all compile:scss prefix:css"
This script will compile your scss into css and then prefix it.

Add this key and value to your package.json

"browserslist": "last 10 versions"

You will want to run this script this before you add commit and push changes to your repo. You don't need to do it every time just so the css on github has been prefixed.

Example package.json

{
  "name": "Demo",
  "version": "1.0.0",
  "description": "Demoing sass & postcss",
  "browserslist": "last 10 versions",
  "scripts": {
    "watch:scss": "sass --watch scss/main.scss main.css",
    "compile:scss": "sass scss/main.scss main.css",
    "prefix:css": "postcss main.css --use autoprefixer -r",
    "build:css": "npm-run-all compile:scss prefix:css"
  },
  "author": "Charlie Richardson",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.3.4",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
    "sass": "^1.39.0"
  }
}

Charlie-robin/setup-sass.md

Setting up SASS/SCSS & Prefixing with POSTCSS

Setting up SASS/SCSS

Example package.json

Setting up post-css to autoprefix your compiled CSS file

Example package.json

Links