Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="capsule">
<header class="capsule__header">
<h1 class="capsule__headline">What We're Loving Now</h1>
<a class="capsule__cta" href="#">See More!</a>
<p class="capsule__description">A few of the things we like</p>
</header>
<section class="capsule__content">
<div class="block">
<a src="#" class="block__media">
<img src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2015/11/11/1/dh2016_master-suite-bathroomfull-from-entry_h.jpg.rend.hgtvcom.231.174.jpeg" />
</a>
</div>
<div class="block">
<a src="#" class="block__media">
<img src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2010/2/24/3/original_laundry-rolling-shelves-organization_s4x3.jpg.rend.hgtvcom.231.174.jpeg" />
</a>
</div>
<div class="block">
<a src="#" class="block__media">
<img src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2014/9/20/0/Original_BPF-Holiday-House_hgtv_entertaining_hot-chocolate_spicy_h.jpg.rend.hgtvcom.231.174.jpeg" />
</a>
</div>
</section>
</div>
// ----
// Sass (v4.0.0.alpha.1)
// ----
@function map-merge-deep($map-old, $map-new, $overwrite: true) {
// Iterate through each value of the new map
@each $key, $new-value in $map-new {
// Check if that value already exists on the old map
@if map-has-key($map-old, $key) {
// There is an existing key
$old-value: map-get($map-old, $key);
@if type-of($new-value) == map and type-of($old-value) == map {
// If both are maps, recurse regardless of $overwrite
$merged-value: map-merge-deep($old-value, $new-value);
$map-old: map-set($map-old, $key, $merged-value);
} @else {
// Otherwise check $overwrite
@if $overwrite{
$map-old: map-set($map-old, $key, $new-value);
}
}
} @else {
// There is no existing key to add
$map-old: map-set($map-old, $key, $new-value);
}
}
@return $map-old;
}
@function config($old-config, $new-config) {
@return map-merge($old-config, $new-config);
}
@function option($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
@function getParentSelector() {
$parentSelector: '#{&}';
$sep: str-index($parentSelector, '__');
@if ($sep) {
@return str-slice($parentSelector, 0, $sep - 1);
}
@else {
@return $parentSelector;
}
}
// Pattern mixins
$debug: true;
@mixin atom($name, $preset: null) {
$parent: getParentSelector();
@at-root #{$parent}__#{$name} {
@if ($debug) {
type: atom;
}
@content;
};
}
@mixin molecule($name) {
@at-root &__#{$name} {
@if ($debug) {
type: molecule;
}
@content;
}
}
@mixin organism($name) {
.#{$name} {
@if ($debug) {
type: organism;
}
@content;
}
}
@mixin headline($custom: ()) {
$headline: config((
'extends': none,
'font-size': null,
'font-weight': null
), $custom);
@include atom('headline', option($headline, 'preset')) {
@extend %#{option($headline, 'extends')} !optional;
font-size: option($headline, 'font-size');
font-weight: option($headline, 'font-weight');
}
}
@mixin description($custom: ()) {
$description: config((
'extends': none
), $custom);
@include atom('description') {
@extend %#{option($description, 'extends')} !optional;
}
}
@mixin cta($custom: ()) {
$cta: config((
'extends': none
), $custom);
@include atom('cta') {
@extend %#{option($cta, 'extends')} !optional;
}
}
@mixin header($custom: ()) {
$type: 'header';
$header: config((
'headline': null,
'margin': null
), $custom);
@include molecule('header') {
margin: option($header, 'margin');
@include headline();
@include description();
@include cta();
}
}
@mixin capsule($custom: ()) {
$capsule: config((
), $custom);
@include organism('capsule') {
@include header((
'headline': 'headline1'
));
}
}
@include capsule();
.capsule {
type: organism;
}
.capsule__header {
type: molecule;
}
.capsule__headline {
type: atom;
}
.capsule__description {
type: atom;
}
.capsule__cta {
type: atom;
}
<div class="capsule">
<header class="capsule__header">
<h1 class="capsule__headline">What We're Loving Now</h1>
<a class="capsule__cta" href="#">See More!</a>
<p class="capsule__description">A few of the things we like</p>
</header>
<section class="capsule__content">
<div class="block">
<a src="#" class="block__media">
<img src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2015/11/11/1/dh2016_master-suite-bathroomfull-from-entry_h.jpg.rend.hgtvcom.231.174.jpeg" />
</a>
</div>
<div class="block">
<a src="#" class="block__media">
<img src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2010/2/24/3/original_laundry-rolling-shelves-organization_s4x3.jpg.rend.hgtvcom.231.174.jpeg" />
</a>
</div>
<div class="block">
<a src="#" class="block__media">
<img src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2014/9/20/0/Original_BPF-Holiday-House_hgtv_entertaining_hot-chocolate_spicy_h.jpg.rend.hgtvcom.231.174.jpeg" />
</a>
</div>
</section>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.