Mike Wagz mikehwagz

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

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

	componentDidMount() {
	this.startLoop();
	}

	componentWillUnmount() {
	this.stopLoop();
	}

	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"

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

	export default React.createClass({

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