Skip to content

@leopoldodonnell /core-classes.sass
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
SASS from LESS Classes
/*
* 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.