SCSSを使用して1つの経験を共有したいと思います。 普遍的なグラディエント生成を行うことは（一度だけではなく、どういうわけか私の手が届かないために）私にとって必要でした。 ユニバーサル、これは複数のグラデーションを連続して設定する機能であり、ブラウザのプレフィックスをサポートする必要があります（これを行う）。
HabrとGoogleに対するこの種のソリューションの検索では結果が得られなかったため、自分で対処する必要がありました。 ケースの詳細。
クロスブラウザグラデーションのルールを正しく書き留める方法を思い出せなかったので、常にオンラインサービスをグーグルで検索しました （たとえば、このwww.colorzilla.com/gradient-editor ）。 ロードするとすぐに、グラデーションのコードを取得します。
background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */
先を見据えて、私はすぐにフィルターを言います： IEの場合、およびSafari4 +の-webkit-gradientは、実装できないために見逃さなければなりませんでした（まあ、または実装する方法が見つかりませんでした）。 したがって、タイトルは「ほぼ」誇示します。 上記から、次のようなものが得られます。
background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
これは私が実装したものであり、その結果、色と位置からグラデーションの配列を設定する必要があり、出力では上記のルールを取得します。 実際には配列自体：
$gradientOptions: rgba(225,225,225,0) 0%, rgba(225,225,225,1) 10%, rgba(225,225,225,1) 90%, rgba(225,225,225,0) 100%; @include linearGradient(#fff, $gradientOptions , left);
上記のレコードの構造を（試行錯誤によって）詳細に検討した結果、2つの繰り返し部分を区別できます。
background: -*-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
そして
#1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%
「背景：線形勾配（右に、＃1e5799 0％、＃2989d8 50％、＃207cca 51％、＃7db9e8 100％）;」の場合、例外を作成しますが、それでも色設定行が繰り返されます。
以下は、一般的なコードを出力する関数です。
$browsersPrefix: moz o webkit ms; @mixin linearGradient($oldColor, $gradientList, $direction) { background: $oldColor; $directionRevers:null; @if $direction == left { $directionRevers: right; } @else if $direction == right { $directionRevers: left; } @else if $direction == top { $directionRevers: bottom; } @else if $direction == bottom { $directionRevers: top; } @include buildGradientLine($gradientList); @each $prefix in $browsersPrefix { background:-#{$prefix}-linear-gradient($direction, $resultLine); } background: linear-gradient(to $directionRevers, $resultLine); }
簡単な説明：
$directionRevers
変数は、方向がどこから始まるかを示すブラウザーソリューションとは異なり、グラデーションがどちらの側に向かうかを示すW3C標準に準拠したルールにのみ必要です。 ああ、コードには4つの方向しかありませんが、より柔軟なソリューションが必要な場合は、コードを簡単に作成できます。
@each
は、
$browsersPrefix
変数で以前に指定されたプレフィックスを反復処理し、必要なコードを表示します。
欠落している行は、
@include buildGradientLine($gradientList)
および
$resultLine
変数です。 行
@include buildGradientLine($gradientList)
は、単に「色の線」を形成し、変数
$resultLine
はそれが含まれています。
$resultLine:null; @mixin buildGradientLine($gradientList) { $resultLine:null; @for $i from 1 through length($gradientList) { $colors: nth($gradientList, $i); $color: nth($colors, 1); $position: nth($colors, 2); $resultLine: $resultLine $color $position; @if $i != length($gradientList) { $resultLine: $resultLine#{','} } } }
まず、
$resultLine:null
をグローバル変数として宣言すると、平均的なプログラマーにはロジックが明確になります（ただし、学生には明らかなはずですが、何でも起こり得ます）。 ところで、コードのこの部分に問題がありました。 ループの代わりに、通常の
@each
を使用した結果、同じ結果になりましたが、行の最後に、グラデーションを表示したくない最後のコンマがありました。 ここで
@for
た
@for
のソリューション。 コードのこのトリッキーな部分を誰が気にしているのか：
$colors: nth($gradientList, $i); $color: nth($colors, 1); $position: nth($colors, 2);
説明：
$colors: nth($gradientList, $i);
配列全体からループ内の値のペアを選択し、
$color: nth($colors, 1); $position: nth($colors, 2)
$color: nth($colors, 1); $position: nth($colors, 2)
は、それぞれ変数の色と位置に書き込みます。
そして、それはほとんどクロスブラウザのグラデーションであることが判明しました。 色の位置としてパーセンテージを使用してみましたが、ピクセルで動作するはずです。主なことは見逃さないことです。 RGBAも満たしています。 デモは添付されていません。今はこの時間がないので、時間があります。間違いなく追加します。
PS：コードは既成のソリューションから挿入されたので、変数の名前が目を痛めることがあります。 スペル、句読点など、あなた自身がどこで知っているかについて。