public
Created

SASS from LESS Classes

  • Download Gist
core-classes.sass
Sass
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
/*
* A SASS conversion by Leo O'Donnell ( http://github.com/leopoldodonnell ) of the excellent work by Jeffrey Way
* @see http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-never-type-a-vendor-prefix-again/
* @see http://snipplr.com/view/47181/less-classes/
*/
@mixin border-radius( $radius: 3px )
-webkit-border-radius: $radius
-moz-border-radius: $radius
border-radius: $radius
 
 
@mixin outline-radius( $radius: 3px )
-webkit-outline-radius: $radius
-moz-outline-radius: $radius
outline-radius: $radius
 
 
@mixin box-shadow( $x : 2px, $y : 2px, $blur : 5px, $spread : 0, $color : rgba(0,0,0,.6) )
-webkit-box-shadow: $x $y $blur $spread $color
-moz-box-shadow: $x $y $blur $spread $color
box-shadow: $x $y $blur $spread $color
 
 
@mixin transition( $what : all, $length : 1s, $easing : ease-in-out )
-webkit-transition: $what $length $easing
-moz-transition: $what $length $easing
-o-transition: $what $length $easing
transition: $what $length $easing
 
 
@mixin transform( $params )
-webkit-transform: $params
-moz-transform: $params
transform: $params
 
 
@mixin box( $orient : horizontal, $pack : center, $align : center )
display: -webkit-box
display: -moz-box
display: box
-webkit-box-orient: $orient
-moz-box-orient: $orient
box-orient: $orient
-webkit-box-pack: $pack
-moz-box-pack: $pack
box-pack: $pack
-webkit-box-align: $align
-moz-box-align: $align
box-align: $align
 
 
@mixin flex( $val : 1 )
-webkit-box-flex: $val
-moz-box-flex: $val
box-flex: $val
 
 
@mixin resize( $direction )
-webkit-resize: $direction
-moz-resize: $direction
resize: $direction
 
 
@mixin linear-gradient( $begin: black, $end: white, $switch : 100% )
background: $begin
background: -webkit-gradient(linear, 0 0, 0 100%, from($begin), color-stop($switch, $end))
background: -moz-linear-gradient(top, $begin, $end $switch)
background: -o-linear-gradient(top, $begin, $end $switch)
background: linear-gradient(top, $begin, $end $switch)
 
@mixin double-borders( $colorOne : green, $colorTwo : red, $radius : 0 )
border: 1px solid $colorOne
-webkit-box-shadow: 0 0 0 1px $colorTwo
-moz-box-shadow: 0 0 0 1px $colorTwo
box-shadow: 0 0 0 1px $colorTwo
@include border-radius( $radius )
 
 
@mixin triple-borders( $colorOne : green, $colorTwo : red, $colorThree : blue, $radius : 0 )
border: 1px solid $colorOne
@include border-radius( $radius )
-webkit-box-shadow: 0 0 0 1px $colorTwo, 0 0 0 2px $colorThree
-moz-box-shadow: 0 0 0 1px $colorTwo, 0 0 0 2px $colorThree
box-shadow: 0 0 0 1px $colorTwo, 0 0 0 2px $colorThree
 
 
@mixin columns( $count : 3, $gap : 10 )
-webkit-column-count: $count
-moz-column-count: $count
column-count: $count
-webkit-column-gap: $gap
-moz-column-gap: $gap
column-gap: $gap
 
 
@mixin box-sizing( $type : border-box )
-webkit-box-sizing: $type
-moz-box-sizing: $type
box-sizing: $type

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.