Sass

Container

wrapping the entire doc with a class .page or whatever, then in the scss add below
.page{
  @include container;
  // you can use @include container(70%) also when you want to take up only a certain amount of the set container
  }

• The container size is set in the Suzy Grid

Create a mixin where you can pass content

    @mixin nameofmixin($width: 420px){
    	@content;
    }
    
    // usefull if you use it as a media query shell
    // whatever content you pass the mixin, it will go between the{}
    // as opposed to just passing arguments 
    @include nameofmixin(){
    height: 300px;
    Color: white;
    
    }
// you can also pass it a parameter
    

Creating Mixins

    @mixin lgtext{
	border: 3px solid black;
    // below is a compass function
	@include border-radius(12px);
	font-size: 2.5em;
	padding:10px;
}
    
    

Using Mixins

    h1, h2 {
 	@include lgtext;
 }
    

Mixins with arguments and default values

    @mixin customBorder($width: 1px, $color: black, $style:solid){
	border:{
	width: $width;
	color:$color;
	style:$style;
	}
}
    
    

Using mixins with arguments

h2{
 	@include customBorder(4px, red, solid);
 }
    

Importing external Files

    @import "_file.scss";
 

Styling All heading tags

    #{headings()} {
	font-family: $font-secondary;
	font-weight: normal ;
	color: $darkgray;
	@include text-shadow($paleryellow 1px 1px) ;
}

Adjust Colors

color:lighten($darkblue, 25);
color:darken($darkblue, 25);

Text Shadow

    @include text-shadow(blue 1px 1px)

Extend a class

   .someclass
    {
    	text-align: center;
    	color: white;
    	border: 3px solid black;
    }
    
    // another Classs
    .anotherclass{
    	@extend .someclass;
    	padding: 10px;
    }
    
    

Place Holders

    %nameofplaceholder{
    transition: all .3s eas-in;
    }
    
    // call transition
    @extend %nameofplaceholder;
    

Using List

    $rainbow: red, orange, yellow, green, blue, indego, violet;
    
    @each $color in $rainbow{
    	.#{color}{
    	background-color: $color;
    }
    
    }
 
   
    

---------------------HTML ------------------
    
     <div class='color red"></div>
    <div class='color orange"></div>
    <div class='color yellow"></div>
    <div class='color green"></div>
    <div class='color blue"></div>
    <div class='color indego"></div>
    
    

List Example

    $categories:(ball, ballet, bosu, cardio, circuit, 
  kettlebell, kickbox, pilates, spinning, step, strength, yoga);
    @each $category in $categories {
  .#{$category}{
    background: $accent url(../images/icon/#{$category}.png) no-repeat;
    @include rounded(8px);
  }
}

  
    

    ------------- HTML -------------
      <ul id="type">
               <li><a href="#" class="ball">Ball Workouts</a></li>
              <li><a href="#" class="ballet">Ballet Barre</a></li>
              <li><a href="#" class="bosu">Bosa</a></li>
              <li><a href="#" class="cardio">Cardio</a></li>
              <li><a href="#" class="circuit">Circuit</a></li>
              <li><a href="#" class="kettlebell">Kettlebell</a></li>
              <li><a href="#" class="kickbox">Kickboxing</a></li>
              <li><a href="#" class="pilates">Pilates</a></li>
              <li><a href="#" class="spinning">Spinning</a></li>
              <li><a href="#" class="step">Step</a></li>
              <li><a href="#" class="strength">Strength</a></li>
              <li><a href="#" class="yoga">Yoga</a></li>
            </ul>
    

Importing Fonts

http://fonts.google.com Import font

@import url('https://fonts.googleapis.com/css?family=Nunito');
@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
@import url('https://fonts.googleapis.com/css?family=Raleway');

use fonts

$headingfont: 'Nunito',sans-serif;
$bodyfont: 'Raleway',sans-serif;
$bodyfont2: 'Slabo 27px',serif;

Border Box Sizing

Include this in your css file and it will take care of all the border box sizing

@include border-box-sizing;

---