Question

在我的.scss中我使用CSS3伪类。例如：

.btn:disabled {
  @include assets-sprites(btn_disabled);
}
.btn.disabled {
  @include assets-sprites(btn_disabled);
}

指南针将这两个声明合并为一个：

.btn:disabled, .btn.disabled {
  background: url("img/assets.png")
}

但是，如果选择器中存在CSS3伪类，则Internet Explorer 8不会读取声明（例如：disabled，：checked，：not等）。

那么我怎么能把它输出到那样的东西？

.btn:disabled {
  background: url("img/assets.png")
}

.btn.disabled {
  background: url("img/assets.png")
}

谢谢：）

Answer 1

您可以将占位符和mixin结合使用DRY方法来管理它：

SCSS

@import "compass";

// Generate separate CSS3 pseudo-selector / fallback selector.
//
// @param string $selector
//   The CSS3 selector name, without the first colon.
// @param string $sprite
//   The sprite name without the file extension.
@mixin sprite-css3-pseudo($selector, $sprite, $map: $assets-sprites) {
  // CSS3 selector
  &:#{$selector} {
    @extend %assets_css3-map;
    @include sprite-background-position($map, $sprite);
  }
  // IE8 fallback
  &.#{$selector} {
    @extend %assets-map;
    @include sprite-background-position($map, $sprite);
  }
}

// $<map>-sprite-base-class to customize the base class
// used when we importing the sprite map.
$assets-sprite-base-class: '%assets-map';

// Compass generates the following rule:
// %assets-map {
//   background: $assets-sprites no-repeat;
// }
@import "assets/*.png";

// We have to split the CSS3 selectors of the classic selectors (the
// fallback) so we need to declare a new placeholder with the same
// content generated by Compass for the base class.
%assets_css3-map {
  background: $assets-sprites no-repeat;
}

.btn {
  @include sprite-css3-pseudo('disabled', 'btn_disabled');
}
.fb {
  @include sprite-css3-pseudo('checked', 'fb_icon');
}

.icon-alarm {
  // We can still use the regular sprite generator
  @include assets-sprite('alarm');
  // And our mixin :)
  @include sprite-css3-pseudo('disabled', 'alarm');
}

CSS

.btn.disabled, .fb.checked, .icon-alarm, .icon-alarm.disabled {
  background: url('../images/assets-sacf5a47174.png') no-repeat;
}

.btn:disabled, .fb:checked, .icon-alarm:disabled {
  background: url('../images/assets-sacf5a47174.png') no-repeat;
}

.btn:disabled {
  background-position: 0 -224px;
}
.btn.disabled {
  background-position: 0 -224px;
}

.fb:checked {
  background-position: 0 -176px;
}
.fb.checked {
  background-position: 0 -176px;
}

.icon-alarm {
  background-position: 0 0;
}
.icon-alarm:disabled {
  background-position: 0 0;
}
.icon-alarm.disabled {
  background-position: 0 0;
}

Answer 2

这是解决方案，感谢@pascalduez：

$assets: sprite-map("assets/*.png");

.btn:disabled { background: sprite($assets, user); }
.btn.disabled { background: sprite($assets, user); }

指南针：IE8的独立精灵声明

2 个答案:

SCSS

CSS