Popular syntax

Border Radius

@include border-radius(12px);

Clearfix

@include clearfix

Breakpoint using juice

@include bp(medium) affects medium and down
@include bp(large-up) // affects large and up

open the juice file, they have a bunch of presets

Juice Center an element vertically and horizontally

When you use this the container has to have a position set. absolute, relative etc..

.element {
 @include centerer;
}

Text Shadow

@include text-shadow(black 0 0 20px);

Background Linear Gradient

@include background-image(linear-gradient($navcolor1, $navcolor2));

Tips

when you use @include span(4 of 12) and you have three columns only 2 will display inline. So the fix is to @include span(4 of 14) This should fix the problem

Include a background image in the right corner

@include background-image(url('../images/misc/greenplanet.png'));
     background-size: 400px; // makes the image 400 px wide
     background-repeat: no-repeat;
     background-position: 120% center; // sets the background position of an image default is top-left
     padding-right: 300px; // keeps the text away from the background image

Using Fonts

@import url('https://fonts.googleapis.com/css?family=David+Libre');
$para2: 'David Libre', serif;
body{

font-family:$para2;

}

---