Skip to content

Instantly share code, notes, and snippets.

@ezekg
Created June 7, 2014 19:18
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ezekg/ccf842e5ee74287f1868 to your computer and use it in GitHub Desktop.
Save ezekg/ccf842e5ee74287f1868 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// 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");
}
.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