Sass – webdev

レスポンシブデザイン実装のブレークポイント

レスポンシブデザインのCSSmediaqueryの設定サンプルです。

Sassの@functionでサイズをコンバートする関数を自作すると、マークアップで少し手抜きできます。

レティーナディスプレイ対策もすっかり定番となり
Photoshopのデザインデータは大概×2サイズでできたものとなっているかと思います。

これを、マークアップのときサイズ変換するのが地味に面倒だったりします。
たとえば、デザイン上で36px(36pt)と指定されている文字は×0.5してこうなります。

.headline {
	font-size: 18px;
}

これまで何の疑問もなくいちいち×0.5していましたが、functionを使えばそもそも計算しなくて済むことに気づきました。
このように値を半分にコンバートする関数を設定すれば

@function size($n) {
	@return: $n * .5;
}

デザインデータの値をそのまま入力するだけでOK。塵も積もれば工数削減になります。

.headline {
	font-size: size(36px);
}

webpackというタスクランナーが良いと教えてもらったので、さわりだけ試してみました。
挑戦はしましたが、私の中ではこのようなふんわりした認識しかないので、解説は省略！

webpack自体については、既出のしっかりした記事が検索すればたくさん見つかりますので、そちらを参考にしてください。

現状のクライアントワークは、HTML+CSSでのコンテンツ制作をベースにJavascriptでの機能実装がほとんどなので
まずはHTML+CSSの快適さが気になる。
使用頻度の高いSassのコンパイル環境を作る手順を調べてみました。

過去の苦い経験から、納品後にちょっと手を加えたいからCSSの触りかたと場所を教えて…という連絡がないこともないので
webpackを使用しますが、SassはJavascriptではなくCSSとして書き出せるようにします。

なお、私の記事は覚書と感想のようなものなので
環境構築の手順やポイントは参考記事のほうがためになります。どうもありがとうございました。

カテゴリごとのテーマカラーとアイコンを一括指定する方法です。

classとアイコンのimgファイルで命名規則を揃えておけば
このように、Sassのリストとeachを利用して短いコードでスタイリングできます。

2016年から、エディターをSublimeTextからAtomへ変えているのですが
その中でもすばらしいのが、プラグインのpigmentsです。

Atomで初期インストールするプラグインの記事をみても、軒並みエントリーされているプラグインなので
今更私がここで言うのもおこがましいのですが
とりあえず入れてみたら、これが便利でびっくり！

インストール方法や、機能説明については
既存ですばらしい紹介がたくさんあるので、割愛させていただき
クライアントワークで活用してみて、具体的にどんな場面で素晴らしいと感じたか簡単にまとめてみました。

そう、便利なんだけど、実際には全部の機能は使いこなしていないです。
Show Paletteも良さそうだけど、最初に「おー！」と開いたきりでした。

MacのOSをEl Capitan(10.11)にアップデートすると、sassをコンパイルできなくなっていました。
原因と、再インストールした手順をメモ。