img-setを生成するfunction、mixin他 (SASS)

5年前、せっかくrubySASSを覚えてmixinとかいろいろ作ったのに、It’s no longer supported, and Ruby Sass users should migrate to another implementation.とかつれない状況になってしまっていた。５年も離れていたのが悪いのであるが、こんなにトレンドが変わると今せっかく覚え始めた DartSASSもいつまでスタンダードでいられるのか不安。

と言っていても仕方がない

CSSだけでSVGの色を変える2

CSS3のmaskを使えば簡単だった。
背景色を指定して、SVGでマスクする。背景をグラデーションにすればグラデーションになる。

mask: url(file.svg) no-repeat;
mask-size: contain;
background-color: #ffffff;

もちろんブラウザを選ぶが、条件さえ合えば一番簡単だ。
ってかmaskなんて機能があったなんて知らなかったよ。文字マスクもできるし、いろいろできそう。

SyntaxHighlighter

ここ、blogerでSyntaxHighlighterが動かなくなっているようだった。
外部参照のhttpが云々って理由らしいがよくわからない。
httpで開発元のalexgorbatchev.comを直接参照していたので、これを別のサイトに置き換える。
このサイトのここにCDNがあるので、jsとcssを置き換えて万事おｋ
lightboxも動かなくなっているみたいだが、今回は見送り

CSSだけでSVGの色を変える

SVGで作った単色アイコンを、CSSで色を変えたいと思って調べてみたが、CSS単体でやるのは基本的に無理っぽい。html内に SVGを直接書いて useを使って CSSで色指定、というのが一番近かった。が、background-image とかでは無理みたい。
そんで更に調べてみてsass/scssを使って無理矢理やってみた。

CSS覚え書き - 最初の指定

忘れないうちに、メモ。

それぞれ、ブラウザ毎に初期値が違うものをリセットする

* { margin: 0; padding: 0; line-height: 100%; font-size: 100%; }
table { border-collapse: collapse; }
object, embed { vertical-align: top; }

Firefoxで、縦スクロールバーを予め表示しておく

html { overflow-y:scroll; }

画像の枠線を消す。また、firefoxで<table> や<li>で縦に並べたときに下に1pxの隙間が空くのを防ぐ。

img { border: 0; vertical-align:bottom; }

文字サイズの統一（効果があるのかどうか今市不明だが、どっかに書かれていた方法）

body { font-size: 12px;  font-size: 62.5%; }
*:first-child+html body { font-size: small; }  /* IE7 */
* html body { font-size: small; }  /* IE6 */

最初の指定はこんなものかな