scss-themes.md

Configurable Themes with SCSS

Motivation

First Attempt: Overrides

application.scss + .scss

(-) No unique location to look for a selector

(-) Specificity wars

(-) Useless code

(-) Hard to change

Second Attempt: CSS Classes as Interface

(-) Duplication

(-) Coupling to DOM

(-) Hard to extend/change

=> SCSS Variables

$navigation-bar-background-color: #aabbcc;

@import "theme/base";

Techniques

Default Values

$navigation-bar-background-color: #112233 !default;

$overview-title-font-size $overview-title-font-weight $overview-title-letter-spacing $overview-title-line-height $overview-title-margin-bottom $overview-title-margin-top

!??

Maps

$overview-title-typography: ( font-size: 2em, font-weight: bold );

$overview-title-typography: () !default;

.overview-title { @include typography($overview-title-typography, ( font-size: 1.8em )) }

nil

$navigation-item-background-color: nil !default;

.navigation-item { background-color: $navigation-item-background-color; }

Switching between Variants

$navigation-bar-icon-variant: "sprite";

$navigation-bar-icon-variant: "icon-font";

Hierachy of Variables

$standard-icon-variant: "icon-font" !default; $widget-icon-variant: $standard-icon-variant !default; $navigation-bar-icon-variant: $widget-icon-variant !default;

Using Placeholders to Decouple from 3rd-Party Class Names

$vjs-selector-mapping: ( play_button: ".vjs-play-control", play_button-playing: ".vjs-play-control.vjs-playing", ... );

@each $suffix, $selector in $vjs-selector-mapping { #{$selector} { @extend %player_controls-#{$suffix}; } }

Plugin Integration

@import "pageflow/theme"; @import "pageflow-timline-page/theme"; @import "pageflow-linkmap-page/theme"; ...

Mixins as Abstraction Layer

@include pageflow-page-type-pictograms("timeline_page")

@mixin pageflow-page-type-pictograms($name, $directory: "pageflow/#{$name}/themes/default/pictograms") { $pictogram-dir: $directory; $custom-page-type-pictograms: false !default;

@if $custom-page-type-pictograms { $pictogram-dir: "pageflow/themes/#{$theme-name}/page_type_pictograms/#{$name}"; }

%pageflow_page_type_thumbnail.is_#{$name}:after { background-image: image-url('#{$pictogram-dir}/sprite.png'); } }

Avoid Nesting

.overview { .title {} }

.overview { &-title {} }

Tools

Sassdoc

/// Type of icons to use: /// /// - "icon-font": Circular buttons with font awesome icons. /// /// - "sprite": Custom icons from icon_sprite.png in theme /// directory. $navigation-icons: $widget-icons !default;

Browserstack/Applitools

Alternatives

CSS Custom Properties:

.navigation-bar { background-color: var(--navigation-bar-background-color, #112233); }

body { --navigation-bar-background-color: #aabbcc; }

CSS Modules

// navigation.js import styles from "./styles/navigation.css";

export default function() { return

; };

// styles/navigation.css .wrapper { }

Thanks!

github.com/tf @tfischbach

github.com/codevise/pageflow