chriseppstein

@mixin ie6 { * html & { @content } }

#logo {
  background-image: url("/images/logo.png");
  @include ie6 { background-image: url("/images/logo.gif"); }
}

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; }

psebborn

function countCSSRules() {
    var results = '',
        log = '';
    if (!document.styleSheets) {
        return;
    }
    for (var i = 0; i < document.styleSheets.length; i++) {
        countSheet(document.styleSheets[i]);
    }
    function countSheet(sheet) {

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

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

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 {

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

}

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