Functions API

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 comes with a few useful functions that help with various tasks. Below is a list of all functions and their signatures in the following format: return name ( required [ optional: type ]* )

• string numToString ( number $int )
• number strip-units ( number $number )
• number em ( number $px, [ number $base: $base-font-size ] )
• number rem ( number $px, [ number $base: $base-font-size ] )
• number percent ( number $px, [ number $base: $base-font-size ] )
• number relative ( number $size )
• list triad ( color $color )
• list square ( color $color )

@function numToString($int) {
	// set up lists
	$ones: "one", "two", "three", "four", "five", "six", "seven", "eight", "nine";
	$teens: "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen";
	$tens: "", "twenty", "thirty", "forty", "fifty", "sixty", "seventy", "eighty", "ninety";

	$int: abs($int); // no nonnegative numbers
	$number: "";
	$temp: $int / 10;
	$temp: floor($temp);
	@if($int >= 1 and $int <= 100) {
		@if($temp < 1) { // it's a one!
			$number: nth($ones, $int % 10);
		}
		@if($temp == 1) { // in the teen range
			@if($int % 10 == 0) {
				$number: "ten";
			} @else {
				$number: nth($teens, $int % 10);
			}
		}
		@if($temp >= 2 and $temp <= 9) { // more than our teens
			@if($int % 10 == 0) {
				// means it's a number evenly divisible by 10
				$number: nth($tens, $int / 10);
			} @else {
				$number: "#{nth($tens, floor($int / 10))}-#{nth($ones, $int % 10)}";
			}
		}
		@if($temp == 10) { // this is the end...
			$number: "one-hundred";
		}
	} @else {
		$number: "Invalid parameter passed. Number must be between 1 and 100."
	}
	@return $number;
}

number strip-units ( number $number )

This function returns the number passed in without any units. Example usage is as follows:

@function _calcRU($px, $base, $unit) {
	$unit: quote($unit);

	@if not $unit == "em" or not $unit == "rem" or not $unit == "%" {
		@debug "Invalid unit, choose 'em' or 'rem'";
		@return null;
	}

	@if not unitless($px) {
		$px: strip-units($px);
	}

	@if not unitless($base) {
		$base: strip-units($base);
	}

	@if($unit == "%") {
		@return percentage($px / $base);
	}

	@return ($px / $base) * 1#{$unit};
}

The example above comes from the _calcRU command in skeleton/core/_dependencies.scss of Skeleton Sass.

number em ( number $px, [ number $base: $base-font-size ] )

This function takes in an absolute unit (i.e. pixel) and returns an em relative unit. This functions should only be used when converting from a px to em. It has not been tested to work with other absolute units.

body {
	font-size: 12px;
	font-size: em(12px); // should return 1.2em with the default settings
}

number rem ( number $px, [ number $base: $base-font-size ] )

This function takes in an absolute unit (i.e. pixel) and returns a rem relative unit. This functions should only be used when converting from a px to rem. It has not been tested to work with other absolute units.

body {
	font-size: 12px;
	font-size: rem(12px); // should return 1.2rem with the default settings
}

number percent ( number $px, [ number $base: $base-font-size ] )

This function takes in an absolute unit (i.e. pixel) and returns a percent unit. This functions should only be used when converting from a px to percent. It has not been tested to work with other absolute units.

body {
	font-size: 12px;
	font-size: percent(12px); // should return 120% with the default settings
}

number relative ( number $size )

This function converts an absolute unit to a relative unit based on your global configuration settings. This functions should only be used when converting from a px to your chosen relative unit. It has not been tested to work with other absolute units.

body { font-size: relative(12px); }

list triad ( color $color )

This function extends the built-in functions of Sass by allowing for triad colors to be calculated and returned as a list.

pre {
	$color: triad(#00FF00);
	background-color: nth($color, 1); // returns #0000FF
	color: nth($color, 2); // returns #FF0000
	outline: nth($color, 3); // return #00FF00
}

list square ( color $color )

This functions extends the built-in functions of Sass by allowing for square colors to be calculated and returned as a list.

foo {
	$color: square(#00FF00);
	content: nth(1, $color); // #007FFF
	content: nth(2, $color); // #FF00FF
	content: nth(3, $color); // #FF8000
	content: nth(4, $color); // #00FF00
}