Created
June 7, 2014 19:18
-
-
Save ezekg/ccf842e5ee74287f1868 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.3.8) | |
// Compass (v1.0.0.alpha.19) | |
// Flint (v1.3.5) | |
// ---- | |
@import "flint"; | |
// Customization module defaults | |
// ------------------------------------------------------------------------------- | |
$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; | |
// Global variables | |
// ------------------------------------------------------------------------------- | |
$customizer-instances: () !global; | |
// Create new customizable instance | |
// ------------------------------------------------------------------------------- | |
// @param $args [map] : map of customizable property->value pairs | |
// @param $module [string] : module to pull property values from | |
// ------------------------------------------------------------------------------- | |
// @return $customizer-instances [map] : updated instance map | |
@function new-customizer-instance($args, $module) { | |
// Define static selector | |
$selector: selector_string(); | |
// 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: ( | |
"#{$selector}": ( | |
$instance-properties, | |
), | |
); | |
// Merge into main map | |
@return map-merge($customizer-instances, $customizer-instance); | |
} | |
// Return value for property based on passed module | |
// ------------------------------------------------------------------------------- | |
// @param $args [list] : list of keys for customizable property | |
// @param $module [string] : 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 $args [map] : map of customizable property->value pairs | |
// @param $module [string] : module to pull property values from | |
// ------------------------------------------------------------------------------- | |
// @return $customizer-instances [map] : updated instance map | |
@mixin new-customizer-instance($args, $module) { | |
$customizer-instances: new-customizer-instance($args, $module) !global; | |
} | |
// Create new customizable properties, save to instance map | |
// ------------------------------------------------------------------------------- | |
// @param $args [map] : map of customizable property->value pairs | |
// @param $module [string] : 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 is-map($args) { | |
// 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); | |
// Get values from module | |
@if is-list($value) or exists($customizer, $value) { | |
$value: use-module($value, $uses); | |
} | |
// 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."; | |
} | |
} | |
// ------------------------------------------------------------------------------- | |
.selector { | |
@include customizer($args: ( | |
color: "white", | |
background: "primary" "darkest", | |
border-color: "complementary" "base", | |
), $uses: "palette"); | |
} | |
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
.selector { | |
color: #f2f9ff; | |
background: #092226; | |
border-color: #f2192c; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment