Skip to content

Instantly share code, notes, and snippets.

@brbrown25
Created February 23, 2014 05:43
Show Gist options
  • Save brbrown25/9167494 to your computer and use it in GitHub Desktop.
Save brbrown25/9167494 to your computer and use it in GitHub Desktop.
@mixin font-prop($size,$line-height,$letter-spacing,$color:inherit,$family:inherit){
@if $letter-spacing == f{
color: $color;
font-family: $family;
font-size: $size;
line-height: $line-height;
}
@else{
color: $color;
font-family: $family;
font-size: $size;
line-height: $line-height;
letter-spacing: $letter-spacing;
}
}
@mixin positionAndSize($t,$l,$width:auto,$height:auto,$pos:absolute){
@if $width == auto and $height == auto{
position: $pos;
top: $t;
left: $l;
}
@else{
position: $pos;
top: $t;
left: $l;
width: $width;
height: $height;
}
}
@mixin border-radius($amount){
-moz-border-radius: $amount;
-webkit-border-radius: $amount;
-o-border-radius: $amount;
border-radius: $amount;
}
@mixin mult-column($cc,$cg){
-moz-column-count: $cc;
-moz-column-gap: $cg;
-webkit-column-count: $cc;
-webkit-column-gap: $cg;
column-count: $cc;
column-gap: $cg;
}
@mixin font-family-gen($name,$family,$path){
@font-face{
font-family:quote($name);
src: url($path+$family+'.eot');
src: url($path+$family+'.eot?#iefix') format('embedded-opentype'),
url($path+$family+'.otf') format('opentype'),
url($path+$family+'.ttf') format('truetype'),
url($path+$family+'.svg#'+$name) format('svg');
font-weight: normal;
font-style: normal;
}
}
@mixin box-shadow($hoff,$voff,$blur,$color,$spread:''){
@if $spread == '' {
-webkit-box-shadow: $hoff $voff $blur $color;
-moz-box-shadow: $hoff $voff $blur $color;
box-shadow: $hoff $voff $blur $color;
}
@else{
-webkit-box-shadow: $hoff $voff $blur $spread $color;
-moz-box-shadow: $hoff $voff $blur $spread $color;
box-shadow: $hoff $voff $blur $spread $color;
}
}
@mixin linear-gradient($angle, $color-stops...) {
$_angle-with-vendor-prefix: "";
$_angle: "";
$start : nth($color-stops, 1);
$end : nth($color-stops, 2);
@if $angle == "to top" or $angle == "bottom" {
$_angle-with-vendor-prefix: bottom;
$_angle: to top;
} @else if $angle == "to right" or $angle == "left" {
$_angle-with-vendor-prefix: left;
$_angle: to right;
} @else if $angle == "to bottom" or $angle == "top" {
$_angle-with-vendor-prefix: top;
$_angle: to bottom;
} @else if $angle == "to left" or $angle == "right" {
$_angle-with-vendor-prefix: right;
$_angle: to left;
} @else if $angle == "to top right" or $angle == "bottom left" {
$_angle-with-vendor-prefix: bottom left;
$_angle: to top right;
} @else if $angle == "to bottom right" or $angle == "top left" {
$_angle-with-vendor-prefix: top left;
$_angle: to bottom right;
} @else if $angle == "to bottom left" or $angle == "top right" {
$_angle-with-vendor-prefix: top right;
$_angle: to bottom left;
} @else if $angle == "to top left" or $angle == "bottom right" {
$_angle-with-vendor-prefix: bottom right;
$_angle: to top left;
} @else {
$_angle-with-vendor-prefix: $angle % 360;
$_angle: (90 - $angle) % 360;
}
background: -moz-linear-gradient($_angle-with-vendor-prefix, $color-stops);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#{$start}), to(#{$end}));
background: -webkit-linear-gradient($_angle-with-vendor-prefix, $color-stops);
background: -o-linear-gradient($_angle-with-vendor-prefix, $color-stops);
background: linear-gradient($_angle, $color-stops);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start}', endColorstr='#{$end}', GradientType=0);
}
@mixin transition($bg-pos,$type){
-webkit-transition: background-position $bg-pos+s $type;
-moz-transition: background-position $bg-pos+s $type;
-o-transition: background-position $bg-pos+s $type;
transition: background-position $bg-pos+s $type;
}
@mixin debug{
border: solid thick red;
}
@function inToPx($sizeInInches,$inchValue: 106px){
@return round(($sizeInInches * $inchValue));
}
@function ptToPx($sizeInPoints,$unit: 1px){
@return round((($sizeInPoints * 1/72)*$unit)*100);
}
@function pxToEm($sizeInPixels,$base: 16px){
@return ($sizeInPixels/$base)+em;
}
@function cmyk_to_rgb($c,$m,$y,$k){
$c: $c / 100; //get cyan
$m: $m / 100; //get magenta
$y: $y / 100; //get yellow
$k: $k / 100; //get key black
$r: 1 - min( 1, $c * ( 1 - $k ) + $k ); //combine cyan and black
$g: 1 - min( 1, $m * ( 1 - $k ) + $k ); //combine magenta and black
$b: 1 - min( 1, $y * ( 1 - $k ) + $k ); //combine yellow and black
$red: round( $r * 255 ); //round red value to range 0 - 255
$green: round( $g * 255 );//round green value to range 0 - 255
$blue: round( $b * 255 );//round blue value to range 0 - 255
@return rgb($red,$green,$blue);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment