Skip to content

Instantly share code, notes, and snippets.

@AlexPashley
Created July 5, 2013 14:44
Show Gist options
  • Star 33 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save AlexPashley/5935029 to your computer and use it in GitHub Desktop.
Save AlexPashley/5935029 to your computer and use it in GitHub Desktop.
SASS: Mixins for CSS
/* MIXINs */
@mixin transition( $val : ease 0.5s ) {
-webkit-transition: $val;
-moz-transition:$val;
-o-transition:$val;
-ms-transition:$val;
transition:$val;
}
@mixin text-shadow( $top: 3px, $left: 3px, $blur: 3px , $colour: #333 ) {
-webkit-text-shadow:$top $left $blur $colour;
-moz-text-shadow:$top $left $blur $colour;
-o-text-shadow:$top $left $blur $colour;
text-shadow:$top $left $blur $colour;
}
@mixin box-shadow($top: 3px, $left: 3px, $blur: 4px, $colour: #444, $inset:"") {
-webkit-box-shadow: #{$inset} $top $left $blur $colour;
-moz-box-shadow: #{$inset} $top $left $blur $colour;
box-shadow: #{$inset} $top $left $blur $colour;
}
@mixin rounded-corners($tl : 4px, $tr : 4px, $br: 4px, $bl: 4px) {
-webkit-border-radius:$tl $tr $br $bl;
-moz-border-radius:$tl $tr $br $bl;
-o-border-radius:$tl $tr $br $bl;
border-radius:$tl $tr $br $bl;
}
@mixin rotate( $val: -2deg ) {
-webkit-transform: rotate($val);
-moz-transform: rotate($val);
-ms-transform: rotate($val);
-o-transform: rotate($val);
transform: rotate($val);
}
@mixin transform($val) {
-webkit-transform: $val;
-moz-transform: $val;
-ms-transform: $val;
transform: $val;
}
@mixin transform-origin($val) {
-webkit-transform-origin: $val;
-moz-transform-origin: $val;
-ms-transform-origin: $val;
transform-origin: $val;
}
@mixin transform-style($val) {
-webkit-transform-style: $val;
-moz-transform-style: $val;
-ms-transform-style: $val;
transform-style: $val;
}
@mixin perspective($val) {
-webkit-perspective: $val;
-moz-perspective: $val;
-ms-perspective: $val;
perspective: $val;
}
@mixin perspective-origin($val){
-webkit-perspective-origin: $val;
-moz-perspective-origin: $val;
-ms-perspective-origin: $val;
perspective-origin: $val;
}
@mixin font( $name, $src, $hash ) {
@font-face {
font-family: $name;
src: url('fonts/' + $src + '.eot');
src: url('fonts/' + $src + '.eot?#iefix') format('embedded-opentype'),
url('fonts/' + $src + '.woff') format('woff'),
url('fonts/' + $src + '.ttf') format('truetype'),
url('fonts/' + $src + '.svg#' + $hash ) format('svg');
font-weight:normal;
font-style:normal;
}
}
@mixin dropdown_fix {
display: block;
background: $orange;
position: absolute;
width:88px;
height:15px;
left:15px;
top:90%;
}
@mixin mq($point) {
@if $point == p {
@media all and (max-width:1000px) { @content; }
}
@else if $point == d {
@media all and (min-width:1001px) { @content; }
}
@else if $point == ps {
@media all and (max-width:319px) { @content; }
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment