css3.scss

/* 
    SCSS3 (c) 2011 Motion Média 
    Inspired by http://css3please.com/
 */

// --- Extensions

.clearfix { 
    zoom: 1;
    &:before, &:after {
        content: '.';
        display: block;
        overflow: hidden;
        visibility: hidden;
        font-size: 0;
        line-height: 0;
        width: 0;
        height: 0;
    }
    &:after { clear: both; }
}

.reset-box {
    margin: 0;
    padding: 0;
}

// --- Mixins

// Border radius
@mixin border-radius($top: 8px, $left: false, $bottom: false, $right: false) {
    @if($left == false)   { $left: $top; }
    @if($bottom == false) { $bottom: $top; }
    @if($right == false)  { $right: $left; }
    -moz-border-radius: $top $left $bottom $right;    // FF1-3.6
    -webkit-border-radius: $top $left $bottom $right; // Saf3-4, iOS 1-3.2, Android ≤1.6
    border-radius: $top $left $bottom $right;         // Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+
    // useful if you don't want a bg color from leaking outside the border:
    -moz-background-clip: padding; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box;
}

// Opacity
@mixin opacity($val) {
    -khtml-opacity: $val/100; // Safari 1.x (pre WebKit)
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$val})"; // IE7-IE8
    filter: alpha(opacity=$val); // IE6-IE8
    opacity: $val/100; // Chrome 4+, FF2+, Saf3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+
}

// Box shadow
@mixin box-shadow($top: 1px, $left: 1px, $size: 4px, $color: #000) {
    -webkit-box-shadow: $top $left $size $color; // Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+
    -moz-box-shadow: $top $left $size $color;    // FF3.5 - 3.6
    box-shadow: $top $left $size $color;         // Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5
}

// Background gradient
@mixin background-gradient($start: #ffffff, $end: #000000, $direction: top, $fallback: false) {
    @if($fallback== false)   { $fallback: $start; }
    background-color: $fallback;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$start}', EndColorStr='#{$end}')";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$start}', EndColorStr='#{$end}'); // IE6-IE8
    background-image: -webkit-gradient(linear, left $direction, left bottom, from($start), to($end)); // Saf4+, Chrome
    background-image: -webkit-linear-gradient($direction, $start, $end);                              // Chrome 10+, Saf5.1+, iOS 5+
    background-image:    -moz-linear-gradient($direction, $start, $end);                              // FF3.6
    background-image:     -ms-linear-gradient($direction, $start, $end);                              // IE10
    background-image:      -o-linear-gradient($direction, $start, $end);                              // Opera 11.10+
    background-image:         linear-gradient($direction bottom, $start, $end);
}

// Rotate
@mixin rotate($deg) {
  -webkit-transform: rotate($deg); // Saf3.1+, Chrome
     -moz-transform: rotate($deg); // FF3.5+
      -ms-transform: rotate($deg); // IE9
       -o-transform: rotate($deg); // Opera 10.5
          transform: rotate($deg);
}

// Scale
@mixin scale($val) {
  -webkit-transform: scale($val); // Saf3.1+, Chrome
     -moz-transform: scale($val); // FF3.5+
      -ms-transform: scale($val); // IE9
       -o-transform: scale($val); // Opera 10.5+
          transform: scale($val);
}

// 3D transform
@mixin transform-3d($deg: 180deg, $perspective: 300, $style: preserve-3d) {
  -webkit-perspective: $perspective; // Saf4+, Chrome 12+
     -moz-perspective: $perspective; // FF10+
      -ms-perspective: $perspective; // IE10+
          perspective: $perspective; 
  -webkit-transform: rotateY($deg); -webkit-transform-style: $style;
     -moz-transform: rotateY($deg);    -moz-transform-style: $style;
      -ms-transform: rotateY($deg);     -ms-transform-style: $style;
          transform: rotateY($deg);         transform-style: $style;
}

// Transition
@mixin transition($which, $duration: 0.3s, $effect: ease-out) {
  -webkit-transition: $which $duration $effect;  // Saf3.2+, Chrome
     -moz-transition: $which $duration $effect;  // FF4+
      -ms-transition: $which $duration $effect;  // IE10
       -o-transition: $which $duration $effect;  // Opera 10.5+
          transition: $which $duration $effect;

}

// Background size
@mixin background-size($x: 100%, $y: 100%) {
  -webkit-background-size: $x $y; // Saf3-4
     -moz-background-size: $x $y; // FF3.6
          background-size: $x $y; // Opera, IE9, Saf5, Chrome, FF4
}

// Box columns
@mixin box-column($count: 2, $gap: 10px) {
  -webkit-column-count: $count; -webkit-column-gap: $gap; // Saf3, Chrome
     -moz-column-count: $count;    -moz-column-gap: $gap; // FF3.5+
          column-count: $count;         column-gap: $gap; // Opera 11+
}

// Tab size
@mixin tab-size($size: 2) {
  -moz-tab-size: $size; // Firefox 4+
    -o-tab-size: $size; // Opera 10.60+
       tab-size: $size;
}