StylusでヘルパーCSSを作成する際に便利な関数、mixin（margin、padding編）

node.js製のCSSプリプロセッサstylusは変数を使用でき、またmixinという決まった処理を自動的に展開させることができる機能があるのでヘルパースタイルを効率的に作成することができます。

先発のCSSプリプロセッサsassでも同様のことができますがsassの記述をそのまま持ってきても当然動かないのでstylusでの書き方を最近sassから乗り換えた人や stylusを使い始めた人に紹介します。

stylusのコンパイル環境は各自調べるか下記記事をご参考に

用意するファイル

_vars.stylとstyle.stylを用意します。

_vars.stylの頭のアンダースコアを忘れないでください。アンダースコアをつけると「このファイルは内部でしか使用しない（ファイルを生成しない）」という事になります。

style.stylファイルが元となりcssにコンパイルされます。

mixinを追加する

_vars.stylに以下のコードを追加します。

spaces($max = 100, $step = 1, $unit = 'px')
  $props = {
    m: 'margin',
    p: 'padding'
  }

  $spaces = {
    t: 'top',
    r: 'right',
    b: 'bottom',
    l: 'left'
  }

  for $pKey, $pVal in $props
    for $i in 0 .. ($max / $step)
      $num = $i * $step
      $value = $i == 0 ? $num : unit($num, $unit)

      .hp_{$pKey}{$num}
        {$pVal} $value !important

      for $key, $val in $spaces
        .hp_{$pKey}{$key}{$num}
          {$pVal}-{$val} $value !important

上記の処理はこんな流れです。

①$props、$spacesという変数を作成しプロパティ省略名とそのプロパティ名を設定します。（tはtop。後で「mtはmargin-top」だよと伝えるために設定）

②各スペース（top,right,bottom,left）ごとに$maxで設定した値までクラスを生成します。

$stepを設定すると数字が飛び飛びで設定されます。$stepを5に設定するとmt0、mt5、mt10と5ずつ生成されます。

$unitには単位を設定します。昔はpxの一択でしたが今はremも使用することもあるかもしれません。remを使用する場合は$stepは少数点まで設定するとよいと思います。

※変数の頭に$（ドル）をつけていますがこれはstylusでは必須ではありません。なくても良いのですが変数だと一目でわかるように設定しています。

※クラス名ですが個人的にPRECSSというCSS設計が好きなのでヘルパーcssのprefix「hp_」をつけています。これは好みなのでわかりやすいように変更してください。

▼PRECSS公式サイト
https://precss.io/ja/

次にstyle.stylで_vars.stylに書いたmixinを呼び出します。

spaces($max = 100, $step = 5, $unit = 'px')

これでstyle.cssにmarginとpaddingのヘルパースタイルが生成されます。