sassy /ˈsasi/ adjective (informal): lively, bold, and full of spirit; cheeky SaSS' scss syntax stands for Sassy CSS and I always thought that's a bit much for something I perceived to be nothing more than glorified sed. Until the right problem came along and made me realize that SaSS is actually very Sassy! Bonus feature: learn how scss code can be plugged into mocha and unit tested :)

1. Tudor Barbu
@motanelu

2. #bcnjs
@bcnjs

5. github.com/barcelonaJS/speakers

9. h1 {
color: #EB9406;
margin-bottom: 10px;
}
h2 {
color: #1D72DB;
margin-bottom: 5px;
line-height: 16px;
font-size: 14px;
}
p {
margin-bottom: 5px;
line-height: 16px;
font-size: 14px;
}
img {
border: solid 2px #EB9406;
}
a {
color: #EB9406;
}
Same color
Same typography

11. h1 {
color: #CC0000;
margin-bottom: 10px;
}
h2 {
color: #1D72DB;
margin-bottom: 5px;
line-height: 16px;
font-size: 14px;
}
p {
margin-bottom: 5px;
line-height: 16px;
font-size: 14px;
}
img {
border: solid 2px #EB9406;
}
a {
color: #CC0000;
}
#EB9406
#CC0000

14. $font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
=transform($property)
-webkit-transform: $property
-ms-transform: $property
transform: $property
.box
+include transform(rotate(30deg))
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box {
@include transform(rotate(30deg));
}
Sass SCSS - Sassy CSS

17. h1 {
color: #EB9406;
margin-bottom: 10px;
}
h2 {
color: #1D72DB;
margin-bottom: 5px;
line-height: 16px;
font-size: 14px;
}
p {
margin-bottom: 5px;
line-height: 16px;
font-size: 14px;
}
img {
border: solid 2px #EB9406;
}
a {
color: #EB9406;
}
$primary-color: #EB9406;
$secondary-color: #1D72DB;
@mixin typography() {
margin-bottom: 5px;
line-height: 16px;
font-size: 14px;
}
h1 {
color: $primary-color;
margin-bottom: 10px;
}
h2 {
color: $secondary-color;
@include typography();
}
p {
@include typography();
}
img {
border: solid 2px $primary-color;
}
a {
color: $primary-color;
}

20. primary
secondary
accent
success
error
warning
info
neutral
normal hover active disabled
Same “distance” between colors

21. #94A7BC#BFCAD7 #1D72DB #294F78 #15283C#1F3B5A #0C1824
… …
#91D6DC#BDE6EA #5AC2CA #23ADB8 #12575C#1A828A #0B3437
… …
#ECD9B8#F4E8D4 #E3C595 #A2C678 #6D5939#A38655 #413522
… …
…

22. $color_primary: #294F78;
$color_secondary: #23ADB8;
/* ... */
$color_alert: #A2C678;
$darker_shades = [25%, 50%, ...];
$lighter_shades = [25%, 50%, ...];
$color_primary_D1: #1F3B5A;
$color_primary_D2: #15283C;
$color_primary_D3: #0C1824;
$color_primary_L1: #1D72DB;
$color_primary_L2: #94A7BC;
$color_primary_L3: #BFCAD7;
$color_secondary_D1 = #1A828A;
/* ... */

24. $tokens = (
color_primary: #294F78,
color_secondary: #23ADB8,
/* ... */
color_alert: #A2C678,
);
$tokens = (
color_primary: #294F78,
color_secondary: #23ADB8,
/* ... */
color_alert: #A2C678,
color_primary_D1: #1F3B5A,
color_primary_D2: #15283C,
color_primary_D3: #0C1824,
color_primary_L1: #1D72DB,
color_primary_L2: #94A7BC,
color_primary_L3: #BFCAD7,
color_secondary_D1: #1A828A
/* ... */
);

25. @function delta-shades(
$tokens,
$colors: color_primary color_secondary color_accent color_success color_alert color_error color_info,
$dark-shades: ( D1: 25%, D2: 50%, D3: 70%, D4: 90% ),
$light-shades: ( L1: 25%, L2: 50%, L3: 70%, L4: 90% )
) {
$temp: ();
@each $color in $colors {
@each $shade, $percentage in $dark-shades {
$temp: map-merge(
$temp,
('#{$color}-#{$shade}': mix(black, map-get($tokens, $color), $percentage))
);
}
@each $shade, $percentage in $light-shades {
$temp: map-merge(
$temp,
('#{$color}-#{$shade}': mix(white, map-get($tokens, $color), $percentage))
);
}
}
@return $temp;
};

26. $palette: (
color-primary: #2b91c1,
color-secondary: #d57c1b,
color-accent: #00cea5,
color-success: #8bc34a,
color-alert: #f5a623,
color-error: #f44c23,
color-info: #0d79ff
);
$palette: delta-shades($palette);
.primary-button:hover {
background-color: map-get($palette, color-primary_D1);
}
.secondary-button:hover {
background-color: map-get($palette, color-secondary_D1);
}

27. OMG!
It works!

28. Does it really?

30. yarn add sass-true --dev

31. @import 'true';
@import '../../src/scss/delta-shades.scss';
@include describe('delta-shades()') {
@include it('runs with custom parameters') {
$palette: (
color_primary: #f442d1,
color_secondary: #f4b841
);
$shades: delta-shades($palette, color_primary color_secondary,
(DS1: 30%, DS2: 60%), (LS1: 30%, LS2: 60%)
);
@include assert-equal(
map-get($shades, color_primary-DS2), mix(black, #f442d1, 60%)
);
@include assert-equal(
map-get($shades, color_primary-LS1), mix(white, #f442d1, 30%)
);
@include assert-equal(
map-get($shades, color_secondary-LS2), mix(white, #f4b841, 60%)
);
}
}

33. .delta-badge__large {
font-size: var(--delta-badge-large_font-size);
font-weight: var(--delta-badge-large_font-weight);
line-height: var(--delta-badge-large_height);
padding: 0 var(--delta-badge-large_padding);
}
.delta-badge__large {
font-size: 14px;
font-weight: bold;
line-height: 32px;
padding: 0 8px;
}
:root {
--delta-badge-large_font-size: 14px;
--delta-badge-large_font-weight: bold;
--delta-badge-large_height: 32px;
--delta-badge-large_padding: 8px;
}

34. @function delta-var($key, $tokens, $export-prefix) {
$use-css-vars: false;
@if (variable_exists(DELTA-USE-CSS-VARS)) {
$use-css-vars: $DELTA-USE-CSS-VARS;
}
@if ($use-css-vars == true) {
@return var(--#{$export-prefix}-#{$key});
} @else {
@return map-get($tokens, $key);
}
}

35. $tokens: (
large_font-size: 14px,
large_font-weight: bold;
large_height: 32px;
large_padding: 8px;
);
.delta-badge__large {
font-size: delta-var(large_font-size, $tokens, delta-badge);
font-weight: delta-var(large_font-weight, $tokens, delta-badge);
line-height: delta-var(large_height, $tokens, delta-badge);
padding: 0 delta-var(large_padding, $tokens, delta-badge);
}
.delta-badge__large {
font-size: 14px;
font-weight: bold;
line-height: 32px;
padding: 0 8px;
}
.delta-badge__large {
font-size: var(--delta-badge-large_font-size);
font-weight: var(--delta-badge-large_font-weight);
line-height: var(--delta-badge-large_height);
padding: 0 var(--delta-badge-large_padding);
}
$DELTA-USE-CSS-VARS: true;

36. @import 'true';
@import '../../src/scss/delta-var.scss';
@include describe('delta-var()') {
$map: (
primary_color: black,
font_size: 14px
);
@include it('renders CSS values when the flag is false') {
$DELTA-USE-CSS-VARS: false !global;
@include assert() {
@include output {
color: delta-var(primary_color, $map, delta-token);
font-size: delta-var(font_size, $map, delta-token);
}
@include expect {
color: black;
font-size: 14px;
}
}
}
@include it('renders CSS variables when the flag is true') {
$DELTA-USE-CSS-VARS: true !global;
@include assert() {
@include output {
color: delta-var(primary_color, $map, delta-token);
font-size: delta-var(font_size, $map, delta-token);
}
@include expect {
color: var(--delta-token-primary_color);
font-size: var(--delta-token-font_size);
}
}
}
}

38. ●
●
●