SCSS Gist for File Icons

fileicons.scss

/**** File icons ****/
$fileIconWidth: 32px;
$fileIconHeight: 32px;
.fileIcon {
  display: inline-block;
  height: $fileIconHeight;
  width: $fileIconWidth;
  background: url(images/fileIcons.png) center no-repeat;

  /*Row 1 */
  &[data-icon=jpg] {
    background-position: 0*$fileIconWidth 0*$fileIconHeight;
  }

  &[data-icon=gif] {
    background-position: -1*$fileIconWidth 0*$fileIconHeight;
  }

  &[data-icon=pdf] {
    background-position: -2*$fileIconWidth 0*$fileIconHeight;
  }

  &[data-icon=eps] {
    background-position: -3*$fileIconWidth 0*$fileIconHeight;
  }

  &[data-icon=psd] {
    background-position: -3*$fileIconWidth 0*$fileIconHeight;
  }

  /*Row 2 */
  &[data-icon=txt] {
    background-position: 0*$fileIconWidth -1*$fileIconHeight;
  }

  &[data-icon=doc] {
    background-position: -1*$fileIconWidth -1*$fileIconHeight;
  }

  &[data-icon=xls] {
    background-position: -2*$fileIconWidth -1*$fileIconHeight;
  }

  &[data-icon=ppt] {
    background-position: -3*$fileIconWidth -1*$fileIconHeight;
  }

  &[data-icon=mdb] {
    background-position: -3*$fileIconWidth -1*$fileIconHeight;
  }

  /*Row 3 */
  &[data-icon=ogg] {
    background-position: 0*$fileIconWidth -2*$fileIconHeight;
  }

  &[data-icon=wav] {
    background-position: -1*$fileIconWidth -2*$fileIconHeight;
  }

  &[data-icon=mp3] {
    background-position: -2*$fileIconWidth -2*$fileIconHeight;
  }

  &[data-icon=mid] {
    background-position: -3*$fileIconWidth -2*$fileIconHeight;
  }

  &[data-icon=zip] {
    background-position: -3*$fileIconWidth -2*$fileIconHeight;
  }

  /*Row 4 */
  &[data-icon=avi] {
    background-position: 0*$fileIconWidth -3*$fileIconHeight;
  }

  &[data-icon=flv] {
    background-position: -1*$fileIconWidth -3*$fileIconHeight;
  }

  &[data-icon=wmv] {
    background-position: -2*$fileIconWidth -3*$fileIconHeight;
  }

  &[data-icon=mov] {
    background-position: -3*$fileIconWidth -3*$fileIconHeight;
  }

  &[data-icon=mpg] {
    background-position: -3*$fileIconWidth -3*$fileIconHeight;
  }

  /*Row 5 */
  &[data-icon=xml] {
    background-position: 0*$fileIconWidth -4*$fileIconHeight;
  }

  &[data-icon=php] {
    background-position: -1*$fileIconWidth -4*$fileIconHeight;
  }

  &[data-icon=fla] {
    background-position: -2*$fileIconWidth -4*$fileIconHeight;
  }

  &[data-icon=css] {
    background-position: -3*$fileIconWidth -4*$fileIconHeight;
  }

  &[data-icon=html],&[data-icon=tml] {
    background-position: -3*$fileIconWidth -4*$fileIconHeight;
  }

}