Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A handy collection of some of the mixins available in Compass (and a few from Compass Recipes too).
// 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