SASS/Compassで共通ライブラリにしとくと便利なもの

対象

デザインする人なので、そういうニーズが中心です。
タイポグラフィや色彩を実装する上で便利な変数値や関数をまとめます。

タイポグラフィ

フォント単体での変数化

これくらい決めておけば、iOSでもOSXのどのブラウザでも指定した書体になってくれるはず!

$font-hiragino-kakugo: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN';
$font-hiragino-mincho: 'Hiragino Mincho ProN', 'ヒラギノ明朝 ProN';
$font-meiryo: Meiryo, 'メイリオ';
$font-yu-gothic: '游ゴシック体', 'YuGothic', '游ゴシック', 'Yu Gothic';
$font-yu-mincho: '游明朝体', '游明朝', YuMincho, 'Yu Mincho';
$font-ms-mincho: 'ＭＳ Ｐ明朝', 'MS PMincho';

NeueHelvetica系の細かいウエイト

CondensedBoldなのかCondensed-Boldなのかで悩む時間がもったいないので、これも変数化!

$font-helvetica-neue-ultra-light: 'HelveticaNeue-UltraLight';
$font-helvetica-neue-condensed-bold: 'HelveticaNeue-CondensedBold';
$font-helvetica-neue-bold-italic: 'HelveticaNeue-BoldItalic';
$font-helvetica-neue-light-italic: 'HelveticaNeue-LightItalic';

日本語系ゴシックセット／明朝セット

上述の変数を前提とするので注意

$fonts-sans-jp: #{$font-hiragino-kakugo}, #{font-meiryo}, sans-serif;
$fonts-serif-jp: #{$font-hiragino-mincho}, #{$font-yu-mincho}, serif;

色彩

任意のカラー値を元に、明度が1%刻みで異なるカラー値を生成して簡単に呼び出せる仕組み

IllustratorやInDesignのスウォッチ濃度みたいに、無彩色を直感的に1%刻みで使いたいという思いがあったので、以下のような関数を組み合わせてみた。
map型に対応した、割と新しいバージョンじゃないとサポートしてない

// 明るさの違うカラー値を1%刻みで生成(徐々に明度が上昇)
//
// ### [function] gen-brightness-map($color, $step: 100)
//
// * $color - 100%のベースカラー(color)<br />
// * $step - ステップ数。デフォルトは100(number)
// * 返り値 - map型。 get-map($map, 95); などの形で使用
//

@function gen-brightness-map($color) {
  // $colorは、入力値が最も暗い色になる
  $step: 100;
  $map: (0: $color);
  @for $i from 1 through $step {
    $p: percentage($i * 0.01);
    $c: lighten($color, $p);
    $m: (#{$i}: $c);
    $map: map-merge($map, $m);
  }
  @return $map;
}

// 任意のグレー値を生成
//
// ### [function] get-gray($percent)
//
// 引数(パーセント)で受け取った値の明さで無彩色を返す
// * $percent - 0から100までの整数(number)
// * 返り値 - 無彩色(color)
//

$gray-map: gen-brightness-map(#000) !default;

@function get-gray($percent) {
  $gray: map-get($gray-map, #{$percent});
  @return $gray;
}

上記を読み込んでおく。使い方は以下の通り

.hoge {
  border-color: get-gray(98); // HSBで言うと H:0, S:0, B:98% のグレー
}

//変数に入れるとより直感的
$gray-bkg: get-gray(98);
$gray-border: get-gray(96);

.hage {
  border-color: $gray-border;
  background-color: $gray-bkg;
}

これを応用して、InDesignの濃度スウォッチみたいなことがCSSでできるととても便利なのだが…。