Last active
August 29, 2015 14:08
-
-
Save ezekg/84f57966e945006ecd45 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
// ---- | |
// Sass (v3.4.7) | |
// Compass (v1.0.1) | |
// ---- | |
/// | |
/// Customization modules | |
/// | |
/// @type {Map} | |
/// | |
$customizer: ( | |
"palette": ( | |
"primary": ( | |
"lightest": #eff3d1, | |
"light": #bbdfbc, | |
"base": #8bb58e, | |
"dark": #0b3c42, | |
"darkest": #092226, | |
), | |
"complementary": ( | |
"light": #f6616e, | |
"base": #f2192c, | |
"dark": #b40a19, | |
), | |
"gray": ( | |
"light": #819699, | |
"base": #4b5557, | |
"dark": #333a3b, | |
), | |
"black": #131517, | |
"white": #f2f9ff, | |
), | |
) !global; | |
/// | |
/// Helper functions | |
/// | |
/// | |
/// Fetch value from map | |
/// | |
/// @param {Map} $map - map to fetch value from | |
/// @param {ArgList} $keys - list of keys to traverse | |
/// | |
/// @return {*} | |
/// | |
@function map-fetch($map, $keys...) { | |
$result: $map; | |
@each $key in $keys { | |
@if $result { | |
$result: type-of($result) == "map" and map-has-key($result, $key) and map-get($result, $key) or false; | |
} @else { | |
@return false; | |
} | |
} | |
@return $result; | |
} | |
/// | |
/// Check if key exists in map | |
/// | |
/// @param {Map} $map - map to search | |
/// @param {String} $value - key to search for | |
/// | |
/// @return {Bool} | |
/// | |
@function exists($map, $value){ | |
$is-map: type-of($map) == "map"; | |
$top-has-key: $is-map and map-has-key($map, $value) or false; | |
@if $top-has-key { | |
@return true; | |
} @else if $is-map { | |
@each $m, $k in $map { | |
@if exists($k, $value) { | |
@return true; | |
} | |
} | |
} | |
@return false; | |
} | |
/// | |
/// Map of instances | |
/// | |
/// @type {Map} | |
/// | |
$customizer-instances: () !global; | |
/// | |
/// Create new customizable instance | |
/// | |
/// @param {Map} $arg - map of customizable property->value pairs | |
/// @param {String} $module - module to pull property values from | |
/// | |
/// @return {Map} $customizer-instances | |
/// | |
@function new-customizer-instance($args, $module) { | |
// Empty argument map | |
$instance-properties: (); | |
// Run through each argument individually | |
@each $arg in $args { | |
$property: nth($arg, 1); | |
$value: nth($arg, 2); | |
// Build temp map to merge into $instance-properties for each property | |
$temp: ( | |
"#{$property}": ( | |
"module": $module, | |
"value": $value | |
) | |
); | |
// Merge into argument map | |
$instance-properties: map-merge($instance-properties, $temp); | |
} | |
// Create new instance map for selector, save properties | |
$customizer-instance: ( | |
"#{&}": ( | |
$instance-properties | |
) | |
); | |
// Check if selector already exists, if so, merge instance vars | |
@if exists($customizer-instances, "#{&}") { | |
$self: map-fetch($customizer-instances, "#{&}"); | |
// Merge new vars into self, then merge into main map | |
@return map-merge($customizer-instances, map-merge($self, $customizer-instance)); | |
} | |
// Merge into main map | |
@return map-merge($customizer-instances, $customizer-instance); | |
} | |
/// | |
/// Return value for property based on passed module | |
/// | |
/// @param {List} $args - list of keys for customizable property | |
/// @param {String} $module - module to pull property values from | |
/// | |
/// @return {*} - $value from $module | |
/// | |
@function use-module($args, $module) { | |
// Module to use | |
$use: $module; | |
// Make sure all submodules exist | |
$exists: true; | |
// Grab length of arguments | |
$length: length($args); | |
// Break down arguments into list to pass into map-fetch | |
@each $arg in $args { | |
$use: append($use, $arg); | |
} | |
// Check if sub-modules exist | |
@if $length > 1 { | |
@for $i from 1 through $length { | |
@if not exists($customizer, nth($args, $i)) { | |
$exists: false; | |
} | |
} | |
} | |
@if $exists { | |
// Grab value from module by passing in newly built list | |
@return map-fetch($customizer, $use...); | |
} @else { | |
// One or more of the modules were not found, throw error | |
@warn "Invalid arguments: #{$use}. One or more module or sub-module not found."; | |
@return $exists; | |
} | |
} | |
/// | |
/// Create new customizable instance | |
/// | |
/// @param {Map} $args - map of customizable property->value pairs | |
/// @param {String} $module - module to pull property values from | |
/// | |
/// @return {Map} $customizer-instances | |
/// | |
@mixin new-customizer-instance($args, $module) { | |
$customizer-instances: new-customizer-instance($args, $module) !global; | |
} | |
/// Create new customizable properties, save to instance map | |
/// | |
/// @param {Map} $args - map of customizable property->value pairs | |
/// @param {String} $module - module to pull property values from | |
/// | |
/// @output $property->$value pairs for each argument | |
/// | |
@mixin customizer($args, $uses: null) { | |
// Make sure argument is a map | |
@if type-of($args) == "map" { | |
// Use module? Expecting module to exist | |
@if $uses != null { | |
// Check if module exists | |
@if exists($customizer, $uses) { | |
// Save arguments to instance map | |
@include new-customizer-instance($args, $uses); | |
// Run through each argument individually | |
@each $arg in $args { | |
// Break up argument into property->value | |
$property: nth($arg, 1); | |
$value: nth($arg, 2); | |
// Check if sub-module exists | |
@if type-of($value) == "list" or exists($customizer, $value) { | |
// Get values from sub-module | |
$value: use-module($value, $uses); | |
// Sub-module did not exist, throw error | |
} @else { | |
@warn "Invalid argument: #{$value}. Sub-module was not found."; | |
} | |
// Output styles | |
#{$property}: $value; | |
} | |
// Module did not exist, throw error | |
} @else { | |
@warn "Invalid argument: #{$uses}. Module was not found."; | |
} | |
// No module specified, expecting plain CSS | |
} @else { | |
// Loop through each argument individually | |
@each $arg in $args { | |
// Break up argument into property->value | |
$property: nth($arg, 1); | |
$value: nth($arg, 2); | |
// Output styles | |
#{$property}: $value; | |
} | |
// Warn that customization mixin shouldn't be used without a module | |
@warn "The customization mixin should not be used without specifying a module to use."; | |
} | |
// Argument was not a map, throw error | |
} @else { | |
@warn "Invalid argument: #{$args}. Argument type is not a map."; | |
} | |
} | |
/// | |
/// Tests | |
/// | |
.customizer { | |
@include customizer( | |
$args: ( | |
color: "white", | |
background: "primary" "darkest", | |
border-color: "complementary" "base" | |
), | |
$uses: "palette" | |
); | |
@include customizer( | |
$args: ( | |
background-color: "black", | |
), | |
$uses: "palette" | |
); | |
} | |
output { | |
instances: inspect($customizer-instances); | |
} |
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
.customizer { | |
color: #f2f9ff; | |
background: #092226; | |
border-color: #f2192c; | |
background-color: #131517; | |
} | |
output { | |
instances: (".customizer": (("background-color": (("module": "palette", "value": "black")))), "color": (("module": "palette", "value": "white")), "background": (("module": "palette", "value": "primary" "darkest")), "border-color": (("module": "palette", "value": "complementary" "base"))); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment