Create a gist now

Instantly share code, notes, and snippets.

SCSS common mixins with cross browser style definitions
// Global reusable mixins
/*
* Version: 2.0 (2 Feb 2012)
*
* Copyright (c) 2011 Robert Koritnik
* Licensed under the terms of the MIT license
* http://www.opensource.org/licenses/mit-license.php
*/
@mixin noOuterDimensions {
margin: 0;
border: 0 none;
outline: 0 none;
padding: 0;
}
@mixin resetList($display: block) {
@include noOuterDimensions;
display: $display;
list-style: none;
}
@mixin roundedCorners($radius: 5px) {
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
background-clip: padding-box;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
}
@mixin shadow($settings) {
box-shadow: $settings;
-moz-box-shadow: $settings;
-webkit-box-shadow: $settings;
}
@mixin backgroundGradient($settings) {
background-image: linear-gradient($settings);
background-image: -o-linear-gradient($settings);
background-image: -ms-linear-gradient($settings);
background-image: -moz-linear-gradient($settings);
background-image: -webkit-linear-gradient($settings);
}
@mixin opacity($value) {
opacity: $value;
filter: unquote("alpha(opacity=#{($value * 100)})");
}
@mixin transition($property: all, $time: .5s) {
// transition times
transition-duration: $time;
-o-transition-duration: $time;
-ms-transition-duration: $time;
-moz-transition-duration: $time;
-webkit-transition-duration: $time;
// transition properties
transition-property: $property;
-o-transition-property: $property;
-ms-transition-property: $property;
-moz-transition-property: $property;
-webkit-transition-property: $property;
// transition function
transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
}
@mixin backgroundSize($tuplePercent) {
background-size: $tuplePercent;
-moz-background-size: $tuplePercent;
-webkit-background-size: $tuplePercent;
}
//* scss-compile-options: :style => :compressed
// import global mixins
@import "Mixins.scss";
body {
@include noOuterDimensions;
/* unquote workaround for arbitrary number of parameters */
@include backgroundGradient(unquote("#ccc, #fff 50%"));
}
ul.menu {
@include resetList;
li {
@include resetList;
float: left;
}
}
input[type=text] {
@include roundedCorners;
}
button {
&:hover {
@include shadow(0 1px 2px rgba(#000, .15));
}
}
.someElement {
@include opacity(.5);
@include transition;
&:hover {
@include opacity(1);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment