スタイルシートを 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/ までしか見えないので、色の情報は取得できません。
ハッシュタグを取り除くことは、可能な場合は許容できる解決策ですが (以前のようにエスケープすることをお勧めします)、それを行う方法が見つからないようです。
ありがとう!