ちょうど、下記の2つのmixin を使おうとしてハマった。
@mixin arrow($color:#003399, $size:3px, $directionFrom:left) {
position: relative;
z-index: 0;
&:before {
content: "";
display: inline-block;
border: $size solid transparent;
border-#{$directionFrom}-color: $color;
position: absolute;
top: 50%;
left: $size*-2;
margin-top: $size*-1;
z-index: 10;
}
}
@mixin bgGradient($start, $goal) {
background: $start;
background-image: url(data:image/svg+xml,%3c%21%2d%2d%20SVG%20syntax%20%2d%2d%3e%20%0d%0a%3csvg%20xmlns%3d%22http%3a%2f%2fwww%2ew3%2eorg%2f2000%2fsvg%22%20width%3d%22100%25%22%20height%3d%22100%25%22%20viewBox%3d%220%200%201%201%22%20preserveAspectRatio%3d%22none%22%3e%0d%0a%3clinearGradient%20id%3d%22g783%22%20gradientUnits%3d%22userSpaceOnUse%22%20x1%3d%220%25%22%20y1%3d%220%25%22%20x2%3d%220%25%22%20y2%3d%22100%25%22%3e%0d%0a%3cstop%20stop%2dcolor%3d%22%23#{$start}%22%20offset%3d%220%22%2f%3e%3cstop%20stop%2dcolor%3d%22%23#{$goal}%22%20offset%3d%221%22%2f%3e%0d%0a%3c%2flinearGradient%3e%0d%0a%3crect%20x%3d%220%22%20y%3d%220%22%20width%3d%221%22%20height%3d%221%22%20fill%3d%22url%28%23g783%29%22%20%2f%3e%0d%0a%3c%2fsvg%3e);
background-image: linear-gradient($start, $goal);
}
ひとつは、擬似要素のボーダーつかって小さな矢印を作るもので、後者はliner-gradientが使えない、IE9のために、SVGをData
URI エンコードで出したもの。
Compass でコンパイルすると下のようになる。
.arrow {
position: relative;
z-index: 0;
}
.arrow:before {
content: "";
display: inline-block;
border: 3px solid transparent;
border-left-color: #003399;
position: absolute;
top: 50%;
left: -6px;
margin-top: -3px;
z-index: 10;
}
.bgGradient {
background: white;
background-image: url(data:image/svg+xml,%3c%21%2d%2d%20SVG%20syntax%20%2d%2d%3e%20%0d%0a%3csvg%20xmlns%3d%22http%3a%2f%2fwww%2ew3%2eorg%2f2000%2fsvg%22%20width%3d%22100%25%22%20height%3d%22100%25%22%20viewBox%3d%220%200%201%201%22%20preserveAspectRatio%3d%22none%22%3e%0d%0a%3clinearGradient%20id%3d%22g783%22%20gradientUnits%3d%22userSpaceOnUse%22%20x1%3d%220%25%22%20y1%3d%220%25%22%20x2%3d%220%25%22%20y2%3d%22100%25%22%3e%0d%0a%3cstop%20stop%2dcolor%3d%22%23white%22%20offset%3d%220%22%2f%3e%3cstop%20stop%2dcolor%3d%22%23black%22%20offset%3d%221%22%2f%3e%0d%0a%3c%2flinearGradient%3e%0d%0a%3crect%20x%3d%220%22%20y%3d%220%22%20width%3d%221%22%20height%3d%221%22%20fill%3d%22url%28%23g783%29%22%20%2f%3e%0d%0a%3c%2fsvg%3e);
background-image: linear-gradient(white, black);
}
長いので、ハマったところだけ説明すると、後者のData
URIを用いたSVGの色を入れる所が、#FFFとかが来ちゃうと、whiteとか色名に変換してしまうので、うまくいかない。
それで、Sass/Compassでコンパイルするとカラーコードが色名になってしまう件を参考に
confg.rb
を編集して色名に変換するのをやめるんですが、そうするとこんどは、矢印を作るmixinの方で使用しているtransparentがrgba(0,0,0,0)に変換されてしまって、こっちがIE8以下で認識されなくなる。
いろいろ情報を集めていると、sass 3.3.x
以降は、この現象が起きないということで、sass と compass
をアップデートして解決。ついでに、str-slice()関数を使って、dataURI
の中にも、#付きの色名を放り込めるようになってホクホク。
参考