jareware

⇐ 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

JoshBarr

import React                from 'react';
import Flickity             from 'flickity';

export default React.createClass({

    getInitialState() {
        return {
            selectedIndex: 0
        }
    },

learncodeacademy

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/scripts.js",
  output: {
    path: __dirname + "/js",
    filename: "scripts.min.js"

jacob-beltran

// How to ensure that our animation loop ends on component unount

componentDidMount() {
  this.startLoop();
}

componentWillUnmount() {
  this.stopLoop();
}

mxstbr

// There's two ways to use Tachyons together with styled-components
// Both are valid, which one you use depends if you want to always apply a tachyons class when a certain component
// is rendered or if you want to apply it for specific instances.

// 1. Use .attrs to define classNames that should always be applied to a styled component
//    Whenever you use <Component /> now it'll have both the styled-components as well as the Tachyons class
//    See the docs for more info: https://www.styled-components.com/docs/basics#attaching-additional-props
const Component = styled.div.attrs({
  className: 'bw0-l',
})`

baptistebriel

// http://ericholsinger.com/install-ffmpeg-on-a-mac
ffmpeg -i input.mp4 -vcodec h264 -acodec mp3 output.mp4

ayamflow

font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;

bjoerge

/* eslint-disable no-console */
import client from 'part:@sanity/base/client'
import reduce from 'json-reduce'

// see https://github.com/sanity-io/sanity/blob/next/packages/example-studio/schemas/languages.js for an example
import {SUPPORTED_LANGUAGES} from '../schemas/languages'

import Translate from '@google-cloud/translate'

const translateAPI = new Translate({

ayamflow

// Need to toggle the autoClear flag to avoid breaking rendering to RenderTarget

function update(dt) {
  renderer.render(scene, camera);
  renderer.autoClear = false;
  renderer.clearDepth();
  renderer.render(orthoScene, orthoCamera);
  renderer.autoClear = true;
}

ryanflorence

////////////////////////////////////////////////////////////////////////////////
// Create a directory called "pages" next to
// this file, put markdown files in there, and
// then run:
//
// ```
// $ node build.mjs
// ```
//
// Then deploy the "build" directory somewhere.