coryhouse

// At top, import immutable
import { Map } from 'immutable';

// Later, in constructor...
this.state = {
  // Create an immutable map in state using immutable.js
  user: Map({ firstName: 'Cory', lastName: 'House'})
};

updateState({target}) {

kplawver

# Running: ruby gitgc.rb and it'll do its thing. 
# 
# There's potentially a lot of output if you have a lot of directories
# and if you've never run git gc on them, it can take a while.
#
# Put the full paths of the directories where you keep git repos in the $STARTING_DIRS array:
# Example: 
#  $STARTING_DIRS = ["/Users/me/Documents/Projects"]
#
$STARTING_DIRS = []

PaulKinlan

(function() { 
  var CSSCriticalPath = function(w, d, opts) {
    var opt = opts || {};
    var css = {};
    var pushCSS = function(r) {
      if(!!css[r.selectorText] === false) css[r.selectorText] = {};
      var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/);
      for(var i = 0; i < styles.length; i++) {
        if(!!styles[i] === false) continue;
        var pair = styles[i].split(": ");

chriseppstein

mymodule {
  @at-root {
    .#{&}-header { ... }
    .#{&}-footer { ... }
    .#{&}-body   {
      a          { ... } 
      span       { ... } 
      p          { ... } 
    }
  }

carwin

Continuous Integration with SASS and Jenkins

This document explains how we can use Jenkins to solve some SASS/Git headaches.

The Problem at Hand

One of the problems that we deal with when working with SASS and Git is that the CSS added to the remote repository changes based on who compiled it.

That means every time someone commits to the remote repository before we can push our work up, HEAD will have changed and our push attempt will be rejected.

MoOx

  //...
  $background: null; // if you don't do this, background is undefined out of the @if/else scope
  @if ($direction) {
    $background: linear-gradient($direction, $color, $color2);
  }
  @else {
    $background: linear-gradient($color, $color2);
  }
  //...
  

madrobby

@media (min--moz-device-pixel-ratio: 1.5),
       (-o-min-device-pixel-ratio: 3/2),
       (-webkit-min-device-pixel-ratio: 1.5),
       (min-device-pixel-ratio: 1.5),
       (min-resolution: 144dpi),
       (min-resolution: 1.5dppx) {

/* Retina rules! */

}

jacine

Automated Retina Sprites with Compass

I asked the following on Twitter the other day:

Thoughts, anyone? "Seems like there are a million ways to do retina sprites with Compass. What's the best way? #sass #compass" tweet

Specifically, what I wanted to do was to reference an icon once, like so:

.selector {
  @include the-sprite('once');

estahn

@mixin all-retina-sprites($map, $map2x) {
  @media (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5),
    (min-resolution: 1.5dppx) {

    $base-class: sprite-map-name($map);

    .#{$base-class}-all-retina-sprites {

adamlogic

Compass and CSS Sprites, Explained

Last week I attempted to use the CSS sprites feature of Compass for the second or third time. It's been a struggle each time, but the power and potential is there, so I keep coming back. This time was a bit different, though, because I finally decided to stop relying on the docs and dive into the code.

Before I go into the nitty-gritty, let's take a step back and talk about why I