SASS Functions

Nested Rules

Sass allows CSS rules to be nested within one another. The inner rule then only applies within the outer rule’s selector. For example:

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

It is compiled to CSS

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

This helps avoid repetition of parent selectors, and makes complex CSS layouts with lots of nested selectors much simpler. 

For example:

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

it is compiled to CSS

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

💥LIST

Lists are just a series of other values, separated by either spaces or 
commas. In fact, individual values count as lists, too: they’re just 
lists with one item. 

E.g:  1px 2px, 5px 6px or (1px 2px) (5px 6px) 

💥Maps

    Maps represent an association between keys and values, where keys are used to look up values.

 E.g:
       $map: (key1: value1, key2: value2, key3: value3); Unlike lists, maps must always be surrounded by parentheses and must always be comma-separated. Both the keys and values in maps can be any SassScript object. 

💥 Operations

All types support equality operations (== and !=). In addition, each type has its own operations that it has special support for.

💥Number Operations

SassScript supports the standard arithmetic operations on numbers (addition +, subtraction -, multiplication *, division /, and modulo %). 

💥Functions

    SassScript defines some useful functions that are called using the normal CSS function syntax:

p {
  color: hsl(0, 100%, 50%);
}

is compiled to:

p {
  color: #ff0000; }

💥 @import

     Sass extends the CSS @import rule to allow it to import SCSS and Sass files. All imported SCSS and Sass files will be merged together into a single CSS output file. 

In addition, any variables or mixins defined in imported files can be used in the main file.

 E.g:

@import "foo.scss";

or

@import "foo";

💥Partials

If we have a SCSS or Sass file that wewant to import but don’t want to compile to a CSS file, we can add an underscore to the beginning of the filename. 
This will tell Sass not to compile it to a normal CSS file. we can then import these files without using the underscore.
For example, we might have _colors.scss.