| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| font: 12px/1.2 Arial; | |
| -webkit-perspective: 600px; | |
| -webkit-perspective: 600px; | |
| background: #666; | |
| background: -webkit-linear-gradient(#222,#222,#444); | |
| color: #fff; |
| @mixin mobile { @media only screen and (max-width:480px) { @content; } } |
| @mixin data-image($file) { | |
| background-image:url('../images/#{$file}'); // fallback | |
| background-image:inline-image($file); // data URI | |
| *background-image:url('../images/#{$file}'); // IE7- hack | |
| } |
| @mixin drop-shadow($color:rgba(0,0,0,0.2), $blur:0, $x:0, $y:0) { // color, blur, x, y | |
| -ms-box-shadow:$x $y $blur $color; // IE10+ | |
| @if ($x == 0 and $y == 0) { // non directional glow | |
| filter: Glow(color=#{ie-hex-str($color)},strength=#{numericvalue($blur)}); | |
| -ms-filter: glow(color=#{ie-hex-str($color)},strength=#{numericvalue($blur)}); | |
| } @else { | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=#{numericvalue($blur)}, Direction=#{degrees($x, $y)}, Color='#{ie-hex-str($color)}')"; // IE8 | |
| filter: progid:DXImageTransform.Microsoft.Shadow(Strength=#{numericvalue($blur)}, Direction=#{degrees($x, $y)}, Color='#{ie-hex-str($color)}'); // IE7- | |
| } | |
| -o-box-shadow:$x $y $blur $color; // Opera |
| @mixin rounded($radius:4px) { | |
| -ms-border-radius:$radius; // IE10+ | |
| -o-border-radius:$radius; // Opera | |
| -moz-border-radius:$radius; // Firefox | |
| -webkit-border-radius:$radius; // Webkit (Safari, Chrome, other) | |
| border-radius:$radius; | |
| } |
| @mixin transition($transition:all 0.2s) { | |
| -ms-transition:$transition; // IE10+ | |
| -o-transition:$transition; // Opera | |
| -moz-transition:$transition; // Firefox | |
| -webkit-transition:$transition; // Webkit (Safari, Chrome, other) | |
| transition:$transition; | |
| } |
| @mixin font-stack($primaryFont:"", $secondaryFont:"", $fallbackFonts:"Arial, Helvetica, Geneva, sans-serif") { | |
| /* might add inline-font-files() at some point */ | |
| @if $secondaryFont != "" { | |
| font-family:#{$primaryFont}, #{$secondaryFont}, #{$fallbackFonts}; | |
| } @else { | |
| @if $primaryFont != "" { | |
| font-family:#{$primaryFont}, #{$fallbackFonts}; | |
| } @else { | |
| font-family:#{$fallbackFonts}; | |
| } |
| @mixin gradient($startColor:$white, $endColor:$gray-2) { | |
| background:$startColor; // fallback | |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}',GradientType=0 ); // IE 6-8 | |
| background:-ms-linear-gradient(top, $startColor 0%, $endColor 100%); // IE 10+ | |
| background:-o-linear-gradient(top, $startColor 0%, $endColor 100%); // Opera | |
| background:-moz-linear-gradient(top, $startColor 0%, $endColor 100%); // Firefox | |
| background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Webkit (Safari, Chrome, other) | |
| background:-webkit-linear-gradient(top, $startColor 0%, $endColor 100%); // Webkit (Safari, Chrome, other) | |
| background:linear-gradient(to bottom, $startColor 0%, $endColor 100%); | |
| } |
In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.
For less, I'm using the ruby version because this is what they suggest on the website. The javascript version may be different.