Sass/Compassコンパイル時の​色名変換で​ハマった

公開

更新

ちょうど、下記の2つのmixin を使おうとしてハマった。

test.scss
@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 でコンパイルすると下のようになる。

test.css
.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の方で使用しているtransparentrgba(0,0,0,0)に変換されてしまって、こっちがIE8以下で認識されなくなる。

いろいろ情報を集めていると、sass 3.3.x 以降は、この現象が起きないということで、sass と compass をアップデートして解決。ついでに、str-slice()関数を使って、dataURI の中にも、#付きの色名を放り込めるようになってホクホク。

参考