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 = []

springmeyer

moved to https://github.com/springmeyer/profiling-guide

scottkellum

function compound($c1: 1, $c2: 1, $c3: 1, $c4: 1, $c5: 1, $c6: 1)
  $common-multiple: ($c1 * $c2 * $c3 * $c4 * $c5 * $c6)
  $compound-grid: ()
  $compound-counter: 1
  @for $i from 1 through $common-multiple
    $add-col: false
    @if $c1 !=1
      @if $i / $c1 == round($i / $c1)
        $add-col: true
    @if $c2 !=1

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');

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! */

}

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 {

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);
  }
  //...
  

vasilisvg

No :hover for touch devices

Some touch devices trigger the mouseover event on the first touch when something changes visibly. This happens even with simple changes like a new color or removal of an underline. The click-event only fires the second time you touch.

This is easy to solve, if modernizr is included, by adding the class .no-touch to each :hover rule.

.no-touch a:hover { color: #06e; }

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.

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