botmaster

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

botmaster

// clearfix
@mixin clearfix {
	&::after {
        content: "";
        display: block;
        clear: both;
    }
}

// edit font rendering -> tip: use for light text on dark backgrounds

botmaster

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<!--
You need Noto Color Emoji installed in your machine. 
Save this file in ~/.config/fontconfig/conf.d/ or /etc/fonts/conf.d/ (system-wide)
-->
<fontconfig>

  <match target="scan">
    <test name="family">

botmaster

// ----
// libsass (v3.3.2)
// ----

$spacer: 1rem;
$spacer-x: $spacer;
$spacer-y: $spacer;

$spacers: ();

botmaster

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

// Sass modifiers mixin by Sarah Dayan
// Generate All Your Utility Classes with Sass Maps: frontstuff.io/generate-all-your-utility-classes-with-sass-maps
// http://frontstuff.io
// https://github.com/sarahdayan

botmaster

const inBrowser = typeof window !== 'undefined'

// get user agent
const UA = inBrowser && window.navigator.userAgent.toLowerCase()

// detect browser
const isIE = UA && /msie|trident/.test(UA)
const isIE9 = UA && UA.indexOf('msie 9.0') > 0
const isEdge = UA && UA.indexOf('edge/') > 0
const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge

botmaster

SASS/SCSS/CSS Spacing Utility Classes

Following @ilicmarko's comment, here's my spacing.scss file…

(see spacing.scss)

…which generates the following spacing utility classes…

(see spacing.css)

botmaster

// State object
const state = {
    variable1: 0,
    variable2: 'value2',
    variable3: 'value3',

    _internalTimeout: null,

    isLoading: false,
    hasError: false,