Created
July 26, 2012 09:20
-
-
Save philwareham/3181172 to your computer and use it in GitHub Desktop.
A handy collection of some of the mixins available in Compass (and a few from Compass Recipes too).
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
// Compass variable: disable support for IE6 | |
$legacy-support-for-ie6: false; | |
// Compass variable: disable support for IE7 | |
$legacy-support-for-ie7: false; | |
// Font face (requires Compass v0.13) | |
@include font-face( | |
$name, | |
$font-files, | |
$eot : false, | |
$weight: false, | |
$style : false | |
); | |
// Micro clearfix | |
@include pie-clearfix; | |
// Inline block | |
// optionally disable Compass default vertical alignment of inline-block (requires Compass v0.13) | |
$inline-block-alignment: none; | |
@include inline-block; | |
// Linear gradient | |
@include background-image(linear-gradient(white, #cccccc 30%, #bbbbbb 70%, #aaaaaa)); | |
// Gradient linear plus image | |
@include background(image-url("foo.png"), linear-gradient(top left, #333, #0c0)); | |
// Radial gradient | |
@include background-image(radial-gradient(45px 45px, aqua 10px, #1e90ff 30px)); | |
// Cross browser min-height | |
@include min-height($value); | |
// Cross browser min-width | |
@include min-width($value); | |
// List - no bullets | |
@include no-bullets; | |
// List - horizontal | |
@include horizontal-list($padding: 4px, $direction: left); | |
// List - inline block | |
@include inline-block-list($padding: false); | |
// List - delimited | |
@include delimited-list($separator: ", "); | |
// Table inner borders | |
@include outer-table-borders($width: 2px, $color: black); | |
// Table inner borders | |
@include inner-table-borders($width: 2px, $color: black); | |
// Prevent long urls/text from breaking layouts | |
@include force-wrap; | |
// Text shadow single | |
@include single-text-shadow(rgba(blue, 0.2) .5em .5em 1em); | |
// Text shadow multiple | |
@include text-shadow( | |
$shadow-1 : rgba(blue, 0.2) .5em .5em 1em, | |
$shadow-2 : false, | |
$shadow-3 : false, | |
$shadow-4 : false, | |
$shadow-5 : false, | |
$shadow-6 : false, | |
$shadow-7 : false, | |
$shadow-8 : false, | |
$shadow-9 : false, | |
$shadow-10: false | |
); | |
// Hide text (better technique than text-align:-9999px) | |
@include hide-text; | |
// Stretch X (using position: absolute) | |
@include stretch-x($offset-left:0, $offset-right:0); | |
// Stretch Y (using position: absolute) | |
@include stretch-y($offset-top:0, $offset-bottom:0); | |
// Stretch X+Y (using position: absolute) | |
@include stretch($offset-top:0, $offset-right:0, $offset-bottom:0, $offset-left:0); | |
// Background multiple | |
@include background( | |
$background-1, | |
$background-2 : false, | |
$background-3 : false, | |
$background-4 : false, | |
$background-5 : false, | |
$background-6 : false, | |
$background-7 : false, | |
$background-8 : false, | |
$background-9 : false, | |
$background-10: false | |
); | |
// Background clip | |
@include background-clip($clip: padding-box); | |
// Background origin | |
@include background-origin($origin: content-box); | |
// Background size | |
@include background-size( | |
$size-1 : $default-background-size, // 100% auto | |
$size-2 : false, | |
$size-3 : false, | |
$size-4 : false, | |
$size-5 : false, | |
$size-6 : false, | |
$size-7 : false, | |
$size-8 : false, | |
$size-9 : false, | |
$size-10: false | |
); | |
// Border radius | |
@include border-radius($radius: $default-border-radius, $vertical-radius: false); | |
// Box shadow single | |
@include single-box-shadow( | |
$color : $default-box-shadow-color, // #333 | |
$hoff : $default-box-shadow-h-offset, // 0px | |
$voff : $default-box-shadow-v-offset, // 0px | |
$blur : $default-box-shadow-blur, // 5px | |
$spread: $default-box-shadow-spread, // false | |
$inset : $default-box-shadow-inset // false | |
); | |
// Box shadow multiple | |
@include box-shadow( | |
$shadow-1 : default, // #333 0px 0px 5px false false | |
$shadow-2 : false, | |
$shadow-3 : false, | |
$shadow-4 : false, | |
$shadow-5 : false, | |
$shadow-6 : false, | |
$shadow-7 : false, | |
$shadow-8 : false, | |
$shadow-9 : false, | |
$shadow-10: false | |
); | |
// Box sizing | |
@include box-sizing(border-box); | |
// CSS columns | |
@include column-count(2); | |
@include column-gap(20px); // optional | |
@include column-width(100px); // optional | |
@include column-rule(1px solid #c00); // optional | |
// Transition single | |
@include single-transition(all, 1s, ease-in-out, 0); // property, duration, function, delay | |
// Transition multiple | |
@include transition( | |
$transition-1 : all 1s ease-in-out 0, // property, duration, function, delay | |
$transition-2 : false, | |
$transition-3 : false, | |
$transition-4 : false, | |
$transition-5 : false, | |
$transition-6 : false, | |
$transition-7 : false, | |
$transition-8 : false, | |
$transition-9 : false, | |
$transition-10: false | |
); | |
// MORE MIXINS - FOR USE WITH COMPASS RECIPES PLUGIN | |
// http://moox.github.com/compass-recipes/ | |
// Compass Recipes drop shadow - lifted corners | |
// demo: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ | |
@include drop-shadow-lifted-corners( | |
$height: 16px, | |
$margin: 10px, | |
$angle : 6deg, | |
$color : rgba(#000, .3) | |
); | |
// Compass Recipes drop shadow - curled corners | |
// demo: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ | |
@include drop-shadow-curled-corners( | |
$border-radius: 0 0 120px 120px / 0 0 6px 6px, | |
$box-shadow : 0 8px 12px rgba(#000, .5), | |
$skew : 8deg, | |
$rotate : 3deg, | |
$distance : 10px | |
); | |
// Compass Recipes drop shadow - perspective | |
// demo: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ | |
@include drop-shadow-perspective( | |
$skew : 50deg, | |
$distance-x : 80px, | |
$distance-y : 5px, | |
$box-shadow-radius: 8px, | |
$color : rgba(#000, .4) | |
); | |
// Compass Recipes drop shadow - raised | |
// demo: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ | |
@include drop-shadow-raised( | |
$height: 10px, | |
$color : #000 | |
); | |
// Compass Recipes drop shadow - curved | |
// demo: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ | |
@include drop-shadow-curved( | |
$side: 'vertical', | |
$distance: 10px, | |
$box-shadow: 0 0 15px rgba(#000, .6), | |
$radius-1: 10px, | |
$radius-2: 100px | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment