SCSS Files

To create a SCSS file, you can make a styles folder and add a .scss file to it

Vendor prefixes

After writing some css code, you can click the watch SASS button in the bottom. This creates the css file. You can then link the css file in the html file. If you use css features such as flexbox, there can be trouble if the user is on mobile. SASS automatically creates the prefixes to solve that problem (when you generate the css file)

Creating variables

Variables can be created using the dollar sign ($)

For example:

    $siteButton: black;

Making variables can make you more efficient when developing a UI. Normally, if you wanted to change something like color, you would have to go through the entire code and change the color manually. Using SASS variables, you can just change the variable value to change the color.

Example:

    $siteButton: white;

Nesting

Allows developer to nest css code.

  • ##### For example:

    traditional css

      header {
      background: white;
  }

  header button {
      color: black;
  }

    SASS

      header {

      background: white;

      button {

      color: black;

      }
  }

Complex nesting

For more complex nesting (such as the hover feature in css), the developer can nest using the & symbol.

For example: 
header {

        background: white;

        button {

        color: black;

            &:hover {
                background: gray;
            }
        }
    }

Code Modularity

If your scss file is getting large, you can create a new file in the same folder to separate the scss. An underscore is required however.

For example:

_header.scss

After creating the file, you need to import the _scss file into your main scss. You can do this by typing

@import "_(filename).scss"

Mixins... what is it?

Mixins are very similar to JS functions. You can add repetitive css code into a mixin and then call the 'function' in the scss file. Here's an example with proper syntax.

display: flex; is a very common piece of code in css and can be used to lay a collection of items in one direction or another. justify-content and align-items do just that (these are features inside flexbox) 
@mixin flex {
    display: flex; 
    justify-content: center;
    align-items: center;
}

header {
    @include flex();    
    background: white;

    button {

    color: black;

        &:hover {
            background: gray;
        }
    }
}

@mixin is used to create the 'function'

@include function_name(); calls the 'function'