READ MORE

SassでSVGをdata URI schemeで表示させるコード生成

dataURLは通常は外部ファイルを読み込む画像などを、画像ファイルを設置せずコードとして埋め込める仕組みです。 このようなコードになります。HTMLコードだけで1pxの透過GIFから引用しました。 以前、画像ファイルな …

READ MORE

Sassの関数でサイズ指定を簡単に

Sassの@functionでサイズをコンバートする関数を自作すると、マークアップで少し手抜きできます。 値を1/2に変換 レティーナディスプレイ対策もすっかり定番となり Photoshopのデザインデータは大概×2サイ …

READ MORE

webpackでSassのコンパイル

webpackというタスクランナーが良いと教えてもらったので、さわりだけ試してみました。 挑戦はしましたが、私の中ではこのようなふんわりした認識しかないので、解説は省略! 環境構築がシンプル WebAppを作るのに向いて …

READ MORE

Sassの@eachで色とアイコンを一括指定

カテゴリごとのテーマカラーとアイコンを一括指定する方法です。 classとアイコンのimgファイルで命名規則を揃えておけば このように、Sassのリストとeachを利用して短いコードでスタイリングできます。