6

次のようなSassループを使用して独自のプレフィックスバージョンを生成することにより、サポートされていないBourbonを回避しようとしています:@keyframe

$list: '' -ms- -webkit- -moz- -o-
$at: @  //at sign
@each $prefix in $list

  #{$at}#{$prefix}keyframes moveclouds
    from
      #{$prefix}transform: translateX(2400px)
    to
      #{$prefix}transform: translateX(-400px)

そしてcssを生成することを期待しています:

@keyframes moveclouds from {
  transform: translateX(2400px);
}
@keyframes moveclouds to {
  transform: translateX(-400px);
}

@-moz-keyframes moveclouds from {
  -moz-transform: translateX(2400px);
}
@-moz-keyframes moveclouds to {
  -moz-transform: translateX(-400px);
}
....

問題は、行頭でSass出力@（アットマーク）を強制する方法がわからないことです

私が行った場合

$at: @    // wont work, error
$at: \@   // will generate  \@keyframes = not good
$at: "\@" // wont work error
$at: @@   // will generate  @@keyframes = not good

サインインSassで出力する方法を知っている人はいますか？

4

1 に答える 1

5

これは、変数補間を使用することは単に不可能です。@次のように割り当てを回避できます。

$at: unquote("@"); // either of these will work
$amp: #{"@"};

しかし、その後、次のエラーが発生します。

エラー sass/test.scss (4 行目: "" の後の無効な CSS: 予想される selector_comma_sequence は "@-ms-keyframes ..." でした)

補間@keyframesは現在サポートされていませんが、将来サポートされる予定です。その進行状況は GitHub で追跡できます。それまでの間、キーフレーム情報を手動で書き出す必要があります。簡単な例は次のようになります。

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }

    @keyframes #{$name} {
        @content;
    }
}

使用法：

@include keyframes(foo) {
    0% {
        color: red;
    }

    100% {
        color: blue;
    }
}

より複雑な例は、Eric Meyer の Sass Animation ライブラリにあります。

于 2012-12-28T21:56:50.793 に答える