CSS — SASS

Learning SASS (SCSS), a CSS pre-processor that makes writing CSS — 10 times faster, better and more organized.

Note: This a course audited from here.

Child Repositories (Project Deployments)

1. Nature Tours - Live here

   GitHub Repo

2. Trillo (flexbox) - Live here

   GitHub Repo

Reference Concepts @codepen

1. SASS (SCSS)
   1. SASS Demo - I [Variables & Nesting]
   2. SASS Demo - II [@mixin, @extends & @function]
2. Flexbox
   1. Flexbox Demo - I [Flex Container Properties]
   2. Flexbox Demo - II [Flex Item Properties]
   3. Flexbox Demo - III [Adding More Flex Items]
3. Grid
   1. Grid Demo - I [Making The First Grid]
   2. Grid Demo - II [Using fr Unit]
   3. Grid Demo - III [Positioning Grid Items]
   4. Grid Demo - IV [Spanning Grid Items]

   5. Grid Challenge - I

      Solution

   6. Grid Demo - V [Naming Grid Lines]
   7. Grid Demo - VI [Naming Grid Areas]
   8. Grid Demo - VII [Implicit vs. Explicit Grid]
   9. Grid Demo - VIII [Aligning Grid Items in different Grid Areas]
   10. Grid Demo - IX [Aligning Grid Tracks]
   11. Grid Demo - X [min-content, max-content & minmax() function]
   12. Grid Demo - XI [Responsive grid layouts with auto-fit & auto-fill]

SASS (SCSS) Installation & Execution

Download and install node/npm from here. In the project where SASS is to be installed, type in npm init to initialize the project with a package.json file. Now to install SASS, in the terminal (should be in pwd/our-project-directory), we type in the following commands:

• npm install node-sass --save-dev
• npm install live-server --save-dev
• npm install postcss-cli --save-dev
• npm install autoprefixer --save-dev
• npm install concat --save-dev

and after the packages are installed, we shall see that our package.json file should have the following content:

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "project-description",
  "main": "index.js",
  "scripts": {},
  "author": "Ch Sriram",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.7.6",
    "concat": "^1.0.3",
    "node-sass": "^4.13.1",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^7.1.1"
  }
}

If we look into "devDependencies", we can see all the packages we installed along with their latest versions.

After that, we write our own scripts under "scripts" object in our package.json as follows:

{
  "name": "nature-tours",
  "version": "1.0.0",
  "description": "landing page for nature tours",
  "main": "index.js",
  "scripts": {
    "watch:sass": "node-sass ./sass/main.scss ./css/style.css -w",
    "devserver": "live-server",
    "start": "npm-run-all --parallel watch:sass devserver",

    "compile:sass": "node-sass ./sass/main.scss ./css/style.comp.css",
    "concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css",
    "prefix:css": "postcss --use autoprefixer -b \"last 10 versions\" css/style.concat.css -o css/style.prefix.css",
    "compress:css": "node-sass css/style.prefix.css css/style.min.css --output-style compressed",
    "build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
  },
  "author": "Ch Sriram",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.7.6",
    "concat": "^1.0.3",
    "node-sass": "^4.13.1",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^7.1.1"
  }
}

We can see how the "scripts" are defined in package.json file.

There are 2 scripts of importance:

• When developing/working-on the project, run the script named start by typing in npm run start.
• When we need to deploy the project, we run the script named build:css by typing in npm run build:css.

Note: In case, if you do not want to go through this lengthy installation process, you can always download the respective child repository as a zip file and run npm install to install all the "devDependencies" and the "scripts" automatically.