Skip to content

Mixins API

Jump to bottom
AtomicPages LLC edited this page Jan 17, 2017 · 2 revisions

IMPORTANT

Skeleton Sass API Docs have been moved: https://atomicpages.github.io/skeleton-sass/docs/index.html

Leaving the docs below for historical value for earlier revisions.

Skeleton Sass is populated with plenty of helpful mixins that make writing custom styles less of a pain. Below is a list of all the global and project-scoped mixins with their respective signature that are bundled with Skeleton Sass.

Global Mixins

grid

This mixin generates the grid for fluid and fixed grids.

@mixin grid($width: $base-width, $fluid: $is-fluid, $gutterWidth: $base-gutter-width, $colCount: $base-col-count) {
	@if($fluid) {
		@include _fluidGrid($colCount);
	} @else {
		@include _fixedGrid($width, (($width / $colCount) - $gutterWidth), $gutterWidth, $colCount);
	}
}
Example

See skeleton/themes/_skeleton.scss and the grid sections for usage.

mobile-grid

This mixin calls another mixins that generates the mobile grids for various breakpoints.

@mixin mobileGrid($width: $base-width, $isFluid: $is-fluid, $colCount: $base-col-count) {
	@include _mobileGrid($width, $colCount, $isFluid);
}
Example

See skeleton/themes/_skeleton.scss and the mobile grid sections for usage.

font-size

This mixin handles the font-size calculation based on the options set in _MYconfig.scss and/or the default settings in skeleton/core/_config.scss.

@mixin font-size($size, $fallback: $use-px-fallback) {
	@if($fallback) {
		font-size: $size;
	}

	@if($use-rem and not $use-em and not $use-percent) {
		font-size: rem($size);
	} @elseif($use-em and not $use-rem and not $use-percent) {
		font-size: em($size);
	} @elseif($use-percent and not $use-rem and not $use-em) {
		font-size: percent($size);
	} @else {
		@debug "More than one option is chosen for the default unit. Choose only one. Defaulting to px.";
		@if(not $fallback) { // we have no other choice...
			font-size: $size;
		}
	}
}
Example
@include font-size(16) => 1.6rem // if rem unit is in use
@include font-size(16) => 160% // if percent unit is in use

hide-text

This mixin is a makes life a little bit easier when trying to hide text.

@mixin hide-text {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
Example
@mixin hide-text {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

div {
	background: url("http://images4.fanpop.com/image/photos/16000000/LOL-Cats-lol-cats-16076992-499-321.jpg");
	width: 499px;
	height: 331px;
	@include hide-text();
}

and the HTML...

<div>This is a LOL cat</div>

Our end result would be the image without the text.

prefixr

Yep, borrowed from bourbon. This mixin writes the necessary prefixes for various browsers.

@mixin prefixer($property, $value, $prefixes) {
	@each $prefix in $prefixes {
		@if $prefix == webkit {
			@if $prefix-for-webkit {
				-webkit-#{$property}: $value;
			}
		}
		@else if $prefix == moz {
			@if $prefix-for-mozilla {
				-moz-#{$property}: $value;
			}
		}
		@else if $prefix == ms {
			@if $prefix-for-microsoft {
				-ms-#{$property}: $value;
			}
		}
		@else if $prefix == o {
			@if $prefix-for-opera {
				-o-#{$property}: $value;
			}
		}
		@else if $prefix == spec {
			@if $prefix-for-spec {
				#{$property}: $value;
			}
		}
		@else  {
			@warn "Unrecognized prefix: #{$prefix}";
		}
	}
}
Example
@include prefixr(box-sizing, border-box, webkit moz spec) => -webkit-box-sizing: border-box
														  => -moz-box-sizing: border-box
														  => box-sizing: border-box

box-shadow

This mixin generates a box-shadow with prefixes. This mixin will accept multiple arguments. A warning will be shown if the number of arguments exceeds 4.

@mixin box-shadow($shadow...) {
	@if length($shadow) > 4 {
		@warn("$shadow should only accept four argument for each side of the box. Using more may cause undesired results");
	}
	@include prefixer(box-shadow, $shadow, webkit moz ms o spec);
}
Example
.form input[type="text"],
.form input[type="email"],
.form input[type="url"],
.form input[type="tel"] {
	border: 1px solid #ccc;
	@include box-shadow(inset 1px 1px 3px rgba(0,0,0,0.3));
}

border-radius

This mixin generates a border-radius with prefixes. This mixin will accept multiple arguments. A warning will be shown if the number of arguments exceeds 4.

@mixin border-radius($radii...) {
	@if length($shadow) > 4 {
		@warn("$radii should only accept four argument for each side of the box. Using more may cause undesired results");
	}
	@include prefixer(border-radius, $radii, webkit moz ms o spec);
}

// And all these helper mixins
@mixin border-top-left-radius($radius: $default-border-radius) { @include _bd("top", "left", $radius); }

@mixin border-top-right-radius($radius: $default-border-radius) { @include _bd("top", "right", $radius); }

@mixin border-bototm-left-radius($radius: $default-border-radius) { @include _bd("bottom", "left", $radius); }

@mixin border-bottom-right-radius($radius: $default-border-radius) { @include _bd("bottom", "right", $radius); }

@mixin border-top-radius($radius: $default-border-radius) {
	@include border-top-left-radius($radius);
	@include border-top-right-radius($radius);
}

@mixin border-right-radius($radius: $default-border-radius) {
	@include border-top-right-radius($radius);
	@include border-bottom-right-radius($radius);
}

@mixin border-bottom-radius($radius: $default-border-radius) {
	@include border-bottom-left-radius($radius);
	@include border-bottom-right-radius($radius);
}

@mixin border-left-radius($radius: $default-border-radius) {
	@include border-top-left-radius($radius);
	@include border-bottom-left-radius($radius);
}
Example
.rounded { @include border-radius(3px); }
.rounded-tl { @include border-top-left-radius(3px); }

opacity

A mixin that generates an opacity property as well as legacy IE support for those that wish to support those browsers.

@mixin opacity($alhpa, $ie: true) {
	@if(type-of($alpha) != number) {
		@warn "$alpha must be a number. Setting to 0.5.";
		$alpha: 0.5;
	} @else {
		@if($alpha < 0 or $alpha > 1) {
			@warn "$alpha must be within 0 and 1. Setting to 0.5.";
			$alpha: 0.5;
		}
	}
	@if($ie == true) {
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha * 100);
	}
	opacity: $alpha;
}
Example
.fog { @include opacity(0.75); } => opacity: 0.75
								 => filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);

box-sizing

A mixin to generate the box-sizing property with prefixes.

@mixin box-sizing($type) {
	$type: unquote($type);
	@include prefixer(box-sizing, $type, webkit moz spec);
}
Example
* { @include box-sizing(border-box); }

A series of mixins to handle various aspects of transitions.

single-transition

A mixin designed to create a single transition.

@mixin single-transition($property, $duration, $function, $delay: false) {
	@if($delay == false) {
		$delay: "";
	}
	$transition: $property $duration $function $delay;
	@include prefixer(transition, $transition, webkit moz ms o spec);
}
Example
.fade { @include single-transition(opacity 0.3s linear); }

transition

A mixin designed to create a single transition as well as multiple transitions separated by a comma.

@mixin transition($transition...) {
	@include prefixer(transition, $transition, webkit moz ms o spec);
}
Example
.fancy { @include transition(background 0.3s, background 0.4s ease, background 0.3s linear); }

filter-gradient

A mixin that generates a filter-gradient for legacy IE browsers.

@mixin filter-gradient($start, $stop, $direction) {
	@if $direction < 0 or $direction > 1 {
		@warn "Invalid value for $direction. Defaulting to 0";
		$direction: 0;
	}

	*zoom: 1;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start)}', endColorstr='#{ie-hex-str($stop)}', gradientType='#{$direction}');
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start)}', endColorstr='#{ie-hex-str($stop)}', gradientType='#{$direction}');
}
Example
.fancy { @include filter-gradient(white, black, 0); }

radial-gradient

A mixin that generates a radial gradient (multiple stops not supported yet)

Example
.fancy {
	width: 100px;
	height: 100px;
	@include radial-gradient(white 0%, black 100%, true); // include IE fallback
}

linear-gradient

A mixin that generates a linear gradient (multiple stops not supported yet).

Example
.fancy {
	width: 100px;
	height: 100px;
	@include linear-gradient(top, 0% red, 100% green, true);
}

Reset Mixins

The reset mixins are great in number and are broke down for your use. To see more about these mixing, view their source code found in skeleton/themes/sphenoid/marrow/_public.scss

One helper reset that we would like to point out if the reset-filter-gradient reset mixin:

@mixin reset-filter-gradient {
	// see http://stackoverflow.com/questions/1768161/how-do-i-reset-or-override-ie-css-filters
	filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)" !important;
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)" !important;
}

This mixin exists for you use to override those pesky filter property gradients that simply won't leave.

Clone this wiki locally