saz/README.md

Sass mixins for css3 cross browser

# saz
css3 cross browser mixins for SASS
#### useage
import in your SASS file as follows...
````
@import 'saz'
````

### available mixins

#### boxShadow
````
.example-boxShadow{
  @include boxShadow(1px 1px 1px 1px #999);
}
````
creates
````
.example-boxShadow {
  -webkit-box-shadow: 1px 1px 1px 1px #999;
  -moz-box-shadow: 1px 1px 1px 1px #999;
  box-shadow: 1px 1px 1px 1px #999;
}
````
#### boxSizing
````
.example-boxSizing{
  @include boxSizing(border-box);
}
````
creates
````
.example-boxSizing {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
````
#### borderRadius
````
.example-borderRadius{
  @include borderRadius(1px 0 0 1px);
}
````
creates
````
.example-borderRadius {
  -webkit-border-radius: 1px 0 0 1px;
  border-radius: 1px 0 0 1px;
}

````
#### transition
````
.example-transition{
  @include transition(all 400ms ease-in);
}
````
creates
````
.example-transition {
  -webkit-transition: all 400ms ease-in;
  -moz-transition: all 400ms ease-in;
  -ms-transition: all 400ms ease-in;
  -o-transition: all 400ms ease-in;
  transition: all 400ms ease-in;
}
````
#### multipleColomns
````
.example-multipleColomns{
  @include multipleColomns(4, 15px);
}
````
creates
````
.example-multipleColomns {
  -moz-column-count: 4;
  -moz-column-gap: 15px;
  -webkit-column-count: 4;
  -webkit-column-gap: 15px;
  column-count: 4;
  column-gap: 15px;
}

````
#### transform
````
.example-transform{
  @include transform(scale(2) translateX(270px));
}
````
creates
````
.example-transform {
  -moz-transform: scale(2) translateX(270px);
  -webkit-transform: scale(2) translateX(270px);
  -o-transform: scale(2) translateX(270px);
  -ms-transform: scale(2) translateX(270px);
  transform: scale(2) translateX(270px);
}
````
#### calc
````
.example-calc{
  @include calc(width, '100% - 30px');
}
````
creates
````
.example-calc {
  width: -webkit-calc(100% - 30px);
  width: -moz-calc(100% - 30px);
  width: calc(100% - 30px);
}
````
#### outline
````
.example-outline{
  @include outline('2px dotted #2', 5px);
}
````
creates
````
.example-outline {
  outline: "2px dotted #2";
  outline-offset: 5px;
}
````
#### fontFace
fontFace($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg)
- $name(required)
- $path(required)
- $weight(optional)
- $style(optional)
- $exts(required: a list of file extensions)
````
 @include fontFace("Awesome Font", "../fonts/awesome-font.ttf",400 ,normal , eot woff2 woff ttf svg);

````
creates
````
@font-face {
  font-family: "Awesome Font";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/awesome-font.ttf.eot?") format("eot"), 
  url("../fonts/awesome-font.ttf.woff2") format("woff2"), 
  url("../fonts/awesome-font.ttf.woff") format("woff"), 
  url("../fonts/awesome-font.ttf.ttf") format("truetype"), 
  url("../fonts/awesome-font.ttf.svg#Awesome_Font") format("svg");
}

````