A concept which combines Harry Roberts "MindBEMding" with a collection of reusable SCSS helper.
You use emwaw.me to
┌∩┐(◣_◢)┌∩┐
The Bad Example shows how you shouldn't use SCSS variables, extensions and mixins inside your project.
You want to use a SCSS variable to save the background-color of your body? You probably end up with a variable name like this...
$body-background-color: #fff;
// OR
$body-color: #fff;
// OR
$my-color-1: #fff;
// OR
$background: #fff;
So you mastered to control the background-color of your body, but what happens if you want to use the same color on an anchor?
body {
background: $body-background-color;
}
a {
color: darken($body-background-color, 20%);
}
This makes no sense at all. But I'm trying to fix that with emwaw.me
__̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.___
emwaw.me gives you predefined names based on the greek alphabet, so that you can put your values inside them:
// Colors
$emw--color-alpha: #fff;
$emw--color-beta: darken($emw--color-alpha, 30%);
$emw--color-gamma: #cc0;
// Units
$emw--unit-alpha: 1em;
$emw--unit-beta: 1.5em;
$emw--unit-gamma: 10%;
// Lists
$emw--list-alpha: $emw--color-alpha, $emw--color-beta 40%;
// Elements (class)
.emw__element-alpha {
margin-bottom: $emw--unit-epsilon / 4 !important;
color: $emw--color-delta;
}
// Modifier (extension)
%emw__modifier-alpha {
margin: $emw--unit-gamma / 2 $emw--unit-gamma;
}
%emw__modifier-beta {
margin-top: $emw--unit-beta;
margin-bottom: $emw--unit-alpha;
}
// Mixins
@mixin emw__mixin-alpha($alpha, $beta) {
padding-left: $alpha;
padding-right: $alpha;
@include breakpoint(medium) {
padding-left: $beta;
padding-right: $beta;
}
}
Only use the project specific $emw SCSS helper from now on.
body {
@extend %emw__modifier-alpha;
font: $emw--unit-alpha sans-serif;
color: $emw--color-gamma;
@include emw__mixin-alpha($emw--unit-beta, $emw--unit-alpha);
@include background(
linear-gradient(to bottom, $emw--list-alpha)
);
}
h1 {
@extend %emw__modifier-beta;
font-size: $emw--unit-beta * 2;
color: $emw--color-beta;
}
a {
color: $emw--color-beta;
}
footer {
padding-top: $emw--unit-gamma;
border-top: $emw--unit-alpha solid darken($emw--color-alpha, 20%);
}
(。◕‿◕。)
Instead of using $emw inside our project, we declare individual names that make sense. But first of all: let's create our colors and units.
// Colors
$emw--color-alpha: #fff;
$emw--color-beta: darken($emw--color-alpha, 30%);
// Units
$emw--unit-alpha: 1em;
And now we add our project specific SCSS variables (with a meaning ;D).
$background-color: $emw--color-alpha;
$link-color: $emw--color-beta;
$footer-unit-alpha: $emw--unit-alpha;
$border-color: $emw--color-beta;
body {
background-color: $background-color;
}
a {
color: $link-color;
}
footer {
padding-top: $footer-unit-alpha;
border-top: $footer-unit-alpha / 2 solid $border-color;
}
Get the parts of emwaw.me that are useful to you, put them inside a _emwaw.me.scss and import that file into your SCSS.
@import "emwaw.me";
龴ↀ◡ↀ龴
/**
* Colors
*/
$emw--color-alpha: 0;
$emw--color-beta: 0;
$emw--color-gamma: 0;
$emw--color-delta: 0;
/**
* Units
*/
$emw--unit-alpha: 0;
$emw--unit-beta: 0;
$emw--unit-gamma: 0;
$emw--unit-delta: 0;
/**
* Lists
*/
$emw--list-alpha: 0;
$emw--list-beta: 0;
$emw--list-gamma: 0;
$emw--list-delta: 0;
/**
* Elements
*/
.emw__element-alpha {}
.emw__element-beta {}
.emw__element-gamma {}
.emw__element-delta {}
/**
* Modifier
*/
%emw__modifier-alpha {}
%emw__modifier-beta {}
%emw__modifier-gamma {}
%emw__modifier-delta {}
/**
* Mixins
*/
@mixin emw__mixin-alpha() {}
@mixin emw__mixin-beta() {}
@mixin emw__mixin-gamma() {}
@mixin emw__mixin-delta() {}
This older example of the emwaw.me concept creates an infinite CSS animation.
Lucas Bonomi improved his Music Note with emwaw.me and created the 3D Music Note!
A responsive Webs Pricing Table with CSS transformations.
The logo of the interweb★s.
Fork me on GitHub