Created
August 5, 2016 21:04
-
-
Save androide-osorio/a136c6d6d68857b5372c0714ef6636dd to your computer and use it in GitHub Desktop.
Useful SASS functions and mixins I keep using all the time build websites and applications
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
//----------------------------------------------- | |
// Utility functions | |
//----------------------------------------------- | |
// this file contains utility functions used | |
// throughout the entire SASS project | |
// @author Andrés Osorio | |
/// Remove the unit of a length | |
/// @param {Number} $number - Number to remove unit from | |
/// @return {Number} - Unitless number | |
@function strip-unit($number) { | |
@if type-of($number) == 'number' and not unitless($number) { | |
@return $number / ($number * 0 + 1); | |
} | |
@return $number; | |
} | |
//------------------------------------------------------------- | |
// convert a pixel value into an em value | |
// based on the context font-size | |
@function calc-em($target-px, $context: 16px) { | |
@return #{($target-px / $context)}em; | |
} | |
// convert a pixel value into a rem value | |
// based on the root font size | |
@function calc-rem($size, $context: 16px) { | |
$remSize: $size / $context; | |
@return #{$remSize}rem; | |
} | |
/** | |
* calculate CSS letter-spacing according to a tracking value | |
* (as seen in design apps like Photoshop). | |
* @param {number} $target the target tracking number | |
* @return {number} the converted tracking in ems | |
*/ | |
@function tracking( $target ){ | |
@return ($target / 1000) * 1em; | |
} | |
//------------------------------------------------------------- | |
/** | |
* returns a selector for heading elements, from | |
* the specified start to the specified end | |
* @param {number} $start the start heading. A number from 1 to 6 | |
* @param {number} $end the end heading. A number from 2 to 6 | |
* @return {list} | |
*/ | |
@function headings($start: 1, $end: 6) { | |
@if $start > $end { | |
@error "The first argument for headings() must be a number that is lower than or equal as the second argument."; | |
} | |
@if $start <= 0 or $start > 6 { | |
@warn "the first argument for headings() must be greater than 0 and less than or equal to 6. Defaulting value to 1"; | |
$start: 1; | |
} | |
@if $end <= 0 or $end > 6 { | |
@warn "the second argument for headings() must be less than 6. Defaulting value to 6"; | |
$end: 6; | |
} | |
$selector: unquote("h#{$start}"); | |
@for $heading from ($start + 1) to ($end + 1) { | |
$selector: append($selector, unquote("h#{$heading}"), 'comma'); | |
} | |
@return $selector; | |
} | |
/** | |
* return a color that is registered in the colors map | |
* @param {string} $key the color key in the map | |
* @return {mixed} | |
*/ | |
@function get-color($key) { | |
@if map-has-key($colors, $key) { | |
@return map-get($colors, $key); | |
} | |
@warn "Unknown value #{$key} in $colors."; | |
@return null; | |
} | |
/** | |
* easy way to fetch any of the predefined layer levels in the app (for z-index) | |
* @param {string} $key the layer level to query for | |
* @return {mixed} | |
*/ | |
@function z-value($key: default) { | |
@if map-has-key($z-layers, $key) { | |
@return map-get($z-layers, $key); | |
} | |
@warn "Unknown z-layer level #{$key} in $z-layers."; | |
@return null; | |
} | |
//------------------------------------------------------------------ | |
/** | |
* calculate the vw value of an absolute value (px, pt, etc) | |
* based on the specified base width | |
* @param {number} $target the absolute value to convert to vw | |
* @param {number} $base the base width to make the calculation against | |
* @return {number} the converted units in vw | |
*/ | |
@function calc-vw($target, $base) { | |
$vw-context: (strip-unit($base) * .01) * 1px; | |
@return ($target/$vw-context) * 1vw; | |
} | |
/** | |
* calculate the vh value of an absolute value (px, pt, etc) | |
* based on the specified base width | |
* @param {number} $target the absolute value to convert to vh | |
* @param {number} $base the base width to make the calculation against | |
* @return {number} the converted units in vh | |
*/ | |
@function calc-vh($target, $base) { | |
$vh-context: (strip-unit($base) * .01) * 1px; | |
@return ($target/$vh-context) * 1vh; | |
} | |
/** | |
* convert the desired absolute value to a vmin-equivalent unit | |
* using the provided dimensions as a list | |
* @param {number} $target the absolute value to convert to vmin | |
* @param {list} $dimensions a space-separated list of dimensions (e.g: 1024px 768px) | |
* @return {number} the converted units in vmin | |
*/ | |
@function calc-vmin($target, $dimensions) { | |
@if type-of($dimensions) != list { | |
@error "you must provide the dimensions as a list of width height or width,height (e.g: 1024px 768px);"; | |
} | |
$w: strip-unit(nth($dimensions, 1)); | |
$h: strip-unit(nth($dimensions, 2)); | |
$vmin-context: $w; | |
@if $w > $h { | |
$vmin-context: $h; | |
} | |
@return ($target/$vmin-context) * 1vmin; | |
} | |
/** | |
* convert the desired absolute value to a vmax-equivalent unit | |
* using the provided dimensions as a list | |
* @param {number} $target the absolute value to convert to vmax | |
* @param {list} $dimensions a space-separated list of dimensions (e.g: 1024px 768px) | |
* @return {number} the converted units in vmax | |
*/ | |
@function calc-vmax($target, $dimensions) { | |
@if type-of($dimensions) != list { | |
@error "you must provide the dimensions as a list of width height or width,height (e.g: 1024px 768px);"; | |
} | |
$w: strip-unit(nth($dimensions, 1)); | |
$h: strip-unit(nth($dimensions, 2)); | |
$vmax-context: $w; | |
@if $w < $h { | |
$vmax-context: $h; | |
} | |
@return ($target/$vmax-context) * 1vmax; | |
} |
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
/** | |
* a mixin for including shared heading styles in the specified context | |
* @param {number} $start the start heading. A number from 1 to 6 | |
* @param {number} $end the end heading. A number from 2 to 6 | |
*/ | |
@mixin headings($start: 1, $end: 6) { | |
$selector: headings($start, $end); | |
#{$selector} { | |
@content; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment