[Sass] SassError: There is no module with the namespace “math”.

しばらくLessやらCSS-in-JSに浮気してたワイ、久しぶりにSassを使ったらWARNINGまみれになってびっくりした。

昔から、Sassで / (スラッシュ)使うと、割り算なのか区切りなのかぱっと見判別できなくてややこしいなあと思ってたんだけど、中の人もそう思ってたようだ。とうとう割り算としての利用が廃止になるらしい。
Dart Sass v1.33以上で未対応のSASS/SCSSをビルドすると表題の警告が嵐のように流れる様を見ることができる。

Breaking Change: Slash as Division

公式ブログでも【破壊的変化】と銘打ってるけど、流れるWARNINGの量でお察し案件だった。
ちょっと使おうと思って入れたUIライブラリが未対応だったりしてたので、直近メンテされてないものを使う時は注意した方がいいと思った。

続きを読む

[CSS] Flexible Box Layout Module 解説レポート

使い始めたら手放せないフレキシブルボックスレイアウトモジュールについて熱く語ります。

注)
これは6年前に社内向けレポートか何かで書いたやつだと思います…(うろ覚え)
今でも通用する内容だったのでドライブにあった原稿を転載しました。
内容が古いところは加筆修正してます。

続きを読む

[CSS,JS] 404エラーのimgタグをいい感じにスタイリングする

詳しく書いてある記事はこちらで、
https://bitsofco.de/styling-broken-images/
imgがbroken状態になるとbefore, after擬似要素使えるからよしなにやっつければおkという意味である。
この記事ではbefore, after擬似要素に背景色をつけてposition:absoluteで上に被せて消している。

私の場合は

  • どんなサイズの画像があるか事前にわからない
  • レスポンシブ
  • NO IMAGE画像素材を使う
  • Retina対応もする

ていう条件があった。

続きを読む

スマートフォンサイトを1080x1920pxのデザインサイズで作る

なんでもネイティブアプリのUIデザインが1080x1920pxだからと。
えーまじで、と。iPhone6+なら1242x2208pxでないの?と。
Webでそんな数字聞いた事ないんだけど今ってどうなの?と思ってググってみたんだけども

やっぱりWebだと1080なんてのはないなあと思い知らされた。
とはいえ時間もないし強引にやってみることにした。

続きを読む

[Sass] @extend の挙動

classとplaceholder selecterについてそれぞれ@extendを試みた以下のSCSSをコンパイルする。 %ext { color:red; &::before { content: ‘ext’; } … 続きを読む

[js,css] Android4.1 が返す element.style.cssText の値が他と違う件

style.cssTextにベンダープレフィックス付きプロパティをセットする検証コードをWebkit系ブラウザで見ると、
戻り値はセットした値と同じベンダープレフィックス付きプロパティになります。

var el = document.getElementById('helloWorld');
el.innerHTML = 'Hello, World!';

el.style.cssText = '-webkit-animation:hoge;';

document.write(el.style.cssText);

続きを読む