Tanner Langley
I want to...
<div class="paragraph--type--simple-cta">
<h3>Heading</h3>
<a href="/about">Learn more</a>
</div>
<div>
<h3 class="heading large">Heading</h3>
<a class="btn btn-medium orange" href="/about">Learn more</a>
</div>
<div>
<h3 class="heading large">Heading</h3>
<a class="btn btn-medium orange" href="/about">
Learn more
</a>
</div>
Identifier
Classifier
Bright Idea:
.paragraph--type--simple-cta {
a {
@include btn($background: $blue, $color: #fff);
}
}
.paragraph--type--simple-cta {
a {
// With named parameters
@include btn($bg: $blue, $color: #fff, $border-color: $blue, $active-bg: transparent,
$active-color: $blue, $active-border-color: $blue, $size: small);
// Without named parameters...
@include btn($blue, #fff, $blue, transparent, $blue, $blue, small);
}
}
.paragraph--type--simple-cta {
a {
@include btn($blue, #fff, $blue, transparent, $blue, $blue, small);
}
}
.paragraph--type--simple-cta {
a {
@include btn(blue);
}
}
$zindex: (
modal : 9000,
overlay : 8000,
dropdown : 7000,
header : 6000,
footer : 5000
);
.header {
z-index: map-get($zindex, header);
}
$buttons: (
blue: (
background: $blue,
color: #fff,
border: $blue,
active-background: #fff,
active-color: $blue,
active-border: $blue,
),
green: (
background: $green,
color: #fff,
border: $green,
active-background: #fff,
active-color: $green,
active-border: $green,
)
);
.paragraph--type--simple-cta {
a {
@include btn(blue);
}
}
// framework/_buttons.scss
$buttons: (
default: (
color: white,
background: blue,
border: blue
)
) !default;
@mixin btn($key) {
$config: map-get($buttons, $key);
color: map-get($config, color);
background: map-get($config, background);
border: 1px solid map-get($config, border);
}
Anything that configures pieces of your site
VS
// framework/_buttons.scss
$buttons: (
default: (
color: white,
background: blue,
border: blue
)
) !default;
@mixin btn($key) {
$config: map-get($buttons, $key);
color: map-get($config, color);
background: map-get($config, background);
border: 1px solid map-get($config, border);
}
// base/_config.scss
$buttons: (
blue: (
background: $blue,
color: #fff,
border: $blue,
active-background: #fff,
active-color: $blue,
active-border: $blue,
),
green: (
background: $green,
color: #fff,
border: $green,
active-background: #fff,
active-color: $green,
active-border: $green,
)
);
.paragraph--type--simple-cta {
a {
@include btn(blue);
}
}
$max-widths: (
site-container: (
width: 1600px,
gutters: false
),
content: (
width: 640px,
gutters: (
small: 15px,
medium: 20px
)
),
);
.paragraph--type--compound-logo-grid {
@include max-width(content);
}
I want to...
@function key($map, $key, $sub-key: null) {
@if map-has-key($map, $key) {
$val: map-get($map, $key);
@if $sub-key and map-has-key($val, $sub-key) {
$val: map-get($val, $sub-key);
}
@return $val;
}
@warn "Unknown '#{$key}' in '#{$map}'.";
@return null;
}
map-get() with an extra level
$nested-map: (
first-key: (
nested-key: "I'm a nested key!",
another: "just another nested key :("
)
);
@mixin cool-mixin() {
// value: I'm a nested key!
$nested-key: key($nested-map, first-key, nested-key);
}
@function extend-in-map($map-to-search, $sub-map-key) {
$map-to-merge: key($map-to-search, $sub-map-key);
@if (map-has-key($map-to-merge, extend)) {
$key-of-map-to-extend: map-get($map-to-merge, extend);
@if (map-has-key($map-to-search, $key-of-map-to-extend)) {
@return map-merge(key($map-to-search, $key-of-map-to-extend), $map-to-merge);
}
}
@return $map-to-merge;
}
Extend a subkey with another subkey
@mixin btn($button-key) {
$button: extend-in-map($buttons, $button-key);
background: key($button, background);
color: key($button, color);
// and so on...
}
$buttons: (
blue: (
background: $blue,
color: #fff,
border: $blue,
active-background: #fff,
active-color: $blue,
active-border: $blue,
),
blue-transparent: (
extend: blue,
active-background: transparent
)
);
.paragraph--type--simple-cta {
a {
@include btn(blue, small);
}
}