1

コンパススプライトでこのような背景トリミングを実装する方法を見つけようとしています: http://nicolasgallagher.com/css-background-image-hacks/

http://jsfiddle.net/blineberry/BhbrL/

これは私が.sassファイルに持っているものです:

@import "buttons/*.png"
@include all-buttons-sprites

.buttons-arrow
  background-image: none
  width: 30px
  height: 45px

.buttons-arrow:before
  +buttons-sprites(arrow)
  display: block
  content: ""
  width: 15px
  height: 27px

ご覧のとおり、最初に背景画像なしで .buttons-arrow を作成してから、背景画像を追加し直しました。ただし、この .css ファイルが表示されました。

.buttons-sprite, .buttons-arrow, .buttons-arrow:before .buttons-arrow {
  background: url('../images/buttons-s5ae2b3a1e9.png') no-repeat;
}

.buttons-arrow {
  background-position: 0 0;
}

.buttons-arrow:hover, .buttons-arrow.arrow_hover, .buttons-arrow.arrow-hover {
  background-position: 0 -27px;
}

.buttons-arrow {
  background-image: none;
  width: 30px;
  height: 45px;
  margin-left: 150px;
}

.buttons-arrow:before {
  display: block;
  content: "";
  width: 15px;
  height: 27px;
}

.buttons-arrow:before .buttons-arrow {
  background-position: 0 0;
}

.buttons-arrow:before .buttons-arrow:hover, .buttons-arrow:before .buttons-arrow.arrow_hover, .buttons-arrow:before .buttons-arrow.arrow-hover {
  background-position: 0 -27px;
}

.buttons-arrow:hover {
  background-color: #ea4800;
}

これに組み合わされたので、明らかに間違っていました.buttons-arrow:before .buttons-arrow

このような単純な結果が欲しいだけです

.buttons-arrow {
  width: 30px;
  height: 45px;
  margin-left: 150px;
}

.buttons-arrow:before {
  background-image: url('../images/buttons-s5ae2b3a1e9.png');
  display: block;
  content: "";
  height: 27px;
  width: 15px;

スプライトを使用してコンパスでこれをコーディングするにはどうすればよいですか?

4

2 に答える 2

2

この場所はほとんど死んでいるので、Google でこれを検索している人々に感謝します。答えは次のとおりです。

これを上に置きます：

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

そこにarrow.pngとarrow_hover.pngがあります。アイデアは、すべての代わりにスプライト マップ関数を使用すること@importです。:before次に、疑似要素の背景画像を含めますが、元のコンテンツは含めないようにしてください。

.buttons-arrow
  width: 50px
  height: 50px
  &::before
    content: ""
    background: sprite($buttons, arrow) no-repeat
    display: block
    position: relative
    width: 20px
    height: 20px
  &:hover
    background-color: gray
    &::before
      content: ""
      background: sprite($buttons, arrow_hover) no-repeat
      position: relative
      width: 20px
      height: 20px
于 2012-10-09T03:38:18.770 に答える
0

@HPの回答に基づいて、それを機能させる方法を理解できました。それ以外の

@include buttons-sprites(arrow)

ただ使う

background: sprite($buttons-sprites, arrow);

これは、@HP が提案した回避策と非常に似ていますが、呼び出す代わりにsprite-map、暗黙的に生成された variable を使用します$buttons-sprites。

于 2014-07-04T08:44:51.823 に答える