[ Install Sass ]
gem install sass

[ Watch directory for sass ]
sass ---watch scss:css

[ SCSS Partials ]
Partial files are scaffolded out into folders that contain bits of css or sass coupled with a index.scss file that

/components
_butons.scss
_icons.scss
_index.scss ( always need this file and should have a import method to call in all the components into this index flie by way of )
    @import 'buttons';

in the main scss file you will then import all the indexs into the main file via the importa method.

[ Extending / Placeholder ]
Create a extends.scss file and for example for rules that will be common in a element you can create an extender
//This will align text within a given element

In the extends.scss file:

//Center
%centered {
text-align: centered;
}

In the file you want the extend to be invoked

.main-header {

@extend %centered;
font: Helvitica;
background-color: fff;
}

[ SCSS Nesting ]
a  {
//Within this space replce any type of rule for the anchor tag with the ampersand followed by the rules.
&:hover {
color: fff;
text-align: center;
}
&:active {
color: 000;
text-style: bold;
  }
}

[ Variables in SCSS ]
//Basic color variable
$white: #ffffff;

//Basic color function
$content-text: $white;

[ Mixins ]
//In a _mixins file
//Text Mixin

@mixin text($size,  $l-heigh: null , $weight: null, $color:null) {
//setting the values to null will leave the rules set to blank unless we set them in the mixin call
font-size: $size;
line-height: $l-height;
font-weight: $weight;
color: $color;
}

/// To use/include in your SCSS file
@include text (1em, 1.5, $color: $body-color) {
margin: 0;
font-family: $stack-helevtica;
}


======[ Flexbox ]===========

-- In the parent container always invoke the flex display rule with the following command

//Make child elements flex compatiable
display: flex;

-- Within the element set the size of how big you want the element to flex
flex: [ enter numerical value ]

-- Within the container you can also set the alignment with
align-items: ( center ) ;
justify-content: ( center, start-end , start )

-- To set width the flex way
flex-basis: ( numerical percentage ) ;

-- To make a row of items wrap
flex-wrap: ( wrap or no wrap ) ;

-- Center something in a block level element when you don't know the size
display:flex; //in the parent container
margin: auto; // to center the item/element/content

-- Change the the direction elements flex ( horizontal or vertical )
flex-direction: ( row , column ) ;

-- Good rule of thumb when dealing with inline-boxes is to set the box-sizing rule
box-sizing: border-box;