Preprocessor

A preprocessor adds an additional step before our css code itself. It is usually having a language on top css such scss or sas.

Reasons for writing scss instead of css

It has a powerful capability

1. Variability
2. Nexting
3. Mixings
4. Automatic Vendor Prefixing
5. More flexible
6. Has powerful frameworks and can equally make use of bootstrap right from your scss code

Differences between SASS and SCSS

SASS __ Syntactically Awesome Stile-Sheets

1. Its is the original language that came up with this extra capabilities on top of CSS to be able to write much more reusable code
2. It also the original syn-taxing language
3. The syntax is shorter
4. Does not use semicolons or {}
5. you must use a new line for every line of code you make instead of semicolon ; (You can't write two different lines in the same line)
6. Strict rules for white-spaces
7. =my-mixin
8. +my-mixin
9. @import foo
10. @extend foo EG

    .container 
    float: left
    width: 100%
    p
    color: #333
    

    SCSS __ Sassy CSS

11. It was built with the purpose to make it closer to CSS language so that people using usig css can easily transition to SCSS with out having to learn a new syntax.
12. The css syntax is basically the subset of SCSS syntax
13. Ignore whitespaces
14. @mixin my-mixin
15. @include my-mixin
16. @import foo
17. @ extend foo Eg

    .container {
    float: left;
    width: 100%;
    p {
     color: #333;
    }
    }
    

Partials

They are SCSS file that are not converted to css files, Therefore the preprocessors will not create any CSS files from them

1. The name must always start with underscore_ eg _variables.scss

Importing Partials

Here is my package.json file. "scss": "node-sass --watch scss -o css" .This line of code watches any changes in your scss and css files. Whaenever your edit or make changes in either your partials or scss file which are both in your scss/ folder, the effect will be automatically take effect.

{
  "name": "scss",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "scss": "node-sass --watch  scss -o css"
  },
  "author": "Eze Bernardine May",
  "license": "ISC"
}

This here aremy variables inmy partials, and the name of my partial is _variables.scss

$text-color: rgb(228, 86, 10);
$background-color: rgb(114, 118, 90);
$font-size: 81%;

This here is how to import your oartials into your main.scss code

@import '_variables.scss';