Created
January 29, 2012 12:11
-
-
Save litera/1698511 to your computer and use it in GitHub Desktop.
SCSS common mixins with cross browser style definitions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//* 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