Skip to content

Instantly share code, notes, and snippets.

@ctalkington
Created November 4, 2014 00:23
Show Gist options
  • Save ctalkington/b78d5aeaf2825fa9f841 to your computer and use it in GitHub Desktop.
Save ctalkington/b78d5aeaf2825fa9f841 to your computer and use it in GitHub Desktop.
Foundation 5 - Stylus Functions
// This is the default html and body font-size for the base rem value.
$rem-base ?= 16px;
// CT: Stylus Compat
sif($res, $t, $f) {
return ($res) ? $t : $f;
}
// CT: Stylus Compat
nth($hash, $index) {
return $hash[$index];
}
// CT: Stylus Compat
scale-color($color, $lightness = false, $darkness = false) {
if ($lightness) {
return lighten($color, $lightness);
} else if ($darkness) {
return darken($color, $darkness);
} else {
return $color;
}
}
// IMPORT ONCE
// We use this to prevent styles from being loaded multiple times for compenents that rely on other components.
$modules ?= ();
exports($name) {
if (($name in $modules) == false) {
append($modules, $name);
{block}
}
}
//
// @functions
//
// RANGES
// We use these functions to define ranges for various things, like media queries.
lower-bound($range) {
if length($range) <= 0 {
return 0;
}
return nth($range, 0);
}
upper-bound($range) {
if length($range) < 2 {
return 999999999999;
}
return nth($range, 1);
}
// STRIP UNIT
// It strips the unit of measure and returns it
strip-unit($num) {
return remove-unit($num);
}
// CONVERT TO REM
convert-to-rem($value, $base-value = $rem-base) {
// CT: made this smarter
if (typeof($value) == 'unit') {
if (unit($value) == '') {
$value = $value * 1px;
}
if (unit($value) == 'px') {
$value = strip-unit($value) / strip-unit($base-value);
if ($value != 0) {
$value = $value * 1rem;
}
}
}
return $value;
}
data($attr) {
if $namespace {
return '[data-' + $namespace + '-' + $attr + ']';
}
return '[data-' + $attr + ']';
}
// REM CALC
// New Syntax, allows to optionally calculate on a different base value to counter compounding effect of rem's.
// Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported:
//
// rem-calc(10 20 30px 40);
//
// Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets
//
// rem-calc((10, 20, 30, 40px));
//
// Optionally call with a different base (eg: 8px) to calculate rem.
//
// rem-calc(16px 32px 48px, 8px);
//
// If you require to comma separate your list
//
// rem-calc((16px, 32px, 48), 8px);
rem-calc($values, $base-value = $rem-base) {
$max = length($values);
if $max == 1 {
return convert-to-rem(nth($values, 0), $base-value); }
$remValues = ();
for $i in (0...$max){
push($remValues, convert-to-rem(nth($values, $i), $base-value));
}
return $remValues;
}
// OLD EM CALC
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
emCalc($values){
return rem-calc($values);
}
// OLD EM CALC
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
em-calc($values){
return rem-calc($values);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment