1

スタイルシートを LESS から SCSS に変換していますが、大部分はスムーズに進みましたが、問題が 1 つあります。ミックスインの 1 つが機能していないようです。

基本的に、私は html5 の流行に完全に飛びついたわけではなく、ブラウザの互換性のためにグラデーションに画像を使用しています。

その場でグラデーションを生成する PHP スクリプトを作成し (はい、キャッシュします!)、mixin が呼び出されたときに LESS がそのリンクを処理します。

とにかく、私の古い mixin (LESS から):

.verticalGradient(@startColor, @endColor, @height){
    @tmpStartColor: escape("@{startColor}");
    @tmpEndColor: escape("@{endColor}");
    background: @endColor url('@{img_path}gradient/v/5px/@{height}/@{tmpStartColor}/@{tmpEndColor}.png') 0 0 repeat-x;

}

これは、これまでの新しい mixin (SCSS) の内容です。

@mixin verticalGradient($startColor, $endColor, $height){
  background: $endColor url('#{$img_path}gradient/v/5px/' + $height + '/' + $startColor + '/' + $endColor + '.png') 0 0 repeat-x;
}

問題は次のとおりです。エスケープしないと、URL は次のようになります。

/img/gradient/v/5px/25px/transparent/#ffe4c4.png

そのはず:

/img/gradient/v/5px/25px/transparent/%23ffe4c4.png

もちろん、ハッシュタグのせいで、サーバーは transparent/ までしか見えないので、色の情報は取得できません。

ハッシュタグを取り除くことは、可能な場合は許容できる解決策ですが (以前のようにエスケープすることをお勧めします)、それを行う方法が見つからないようです。

ありがとう!

4

1 に答える 1