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

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

値を1/2に変換

レティーナディスプレイ対策もすっかり定番となり
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);
}

“Sassの関数でサイズ指定を簡単に” の続きを読む

webpackでSassのコンパイル

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

  • 環境構築がシンプル
  • WebAppを作るのに向いているらしい
  • モジュールごとに分かれているJavascriptを1このファイルにまとめられる

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

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

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

参考記事:
Webpackで Browsersync + Sassコンパイルを試す
webpackを使ってsassをコンパイルできるようにしよう!

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

“webpackでSassのコンパイル” の続きを読む

カラーコードの色を表示してくれるAtomのpigmentsが便利

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

pigments

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

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

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

“カラーコードの色を表示してくれるAtomのpigmentsが便利” の続きを読む