Sassで遊んでclamp関数を楽に操れるようにしてみた

おっす。オラかわゐ。会社でのキャラが定まってねぇ内にいろいろな挨拶してやっぞ～。

さて今回は、clamp関数をSassで楽にコンパイルできる関数を自作した話をします。

clamp関数といえば、最小値と最大値の幅で大きさを変化させてくれるプロパティです。

最小値と最大値の幅で使われる引数が、推奨値。これをvwなり%なりで指定することで、大きさが可変します。

PCの幅によってサイズを変えてくれたり、レスポンシブでも威力を発揮してくれる優れモノ。

しかし、clamp関数を設定するにあたって面倒なことがありました。

「推奨値いちいち計算すんのだるないw」

ということです。

めんどくさいことは極力省きたい私。そして同じように考えている方もいるはず…。ということで、自作した関数をみていきましょう（※Scss記法です）。

では、いってみよ～

Sassで自作したclamp関数

先に結論のコードからご紹介します。今回自作したコードは…

@function clampVw($min, $size, $max, $vp: 1920) {
  $min: $min * 0.1rem;
  $max: $max * 0.1rem;
  $num: 100 / $vp * 1vw;
　$size_vw: $num * $size;
@return clamp($min, $size_vw, $max);
}

2行目と3行目にある$minと$maxは同じ値でもよさそうだなと思ったのですが、コンパイル時にエラーが出てしまったので分けました。

あとは推奨値（$size）の値を指定すると、vw に変換するようにしています。

$vp は画面幅。現行だと1920で設定しています。が、ここはいじらなくても大丈夫（後述あり）。

使い方は以下のようにします。

例）画面幅が768、font-sizeの最小値を1.4rem、画面幅が768の時に16px、最大値を1.8remにしたい場合。

font-size: clampVw(14, 16, 18, 768);
// 出力結果
font-size: clamp(1.4rem, 2.0833333333vw, 1.8rem);

なんてことでしょう。匠の手によって、めんどくさかったvwの計算は、コンパイル時に勝手に行ってくれるようになりました。

もちろんmarginやpaddingなどにも対応しています。

@include を使ってコンパイルしてもいいかなと思ったのですが、@include 指定の方がめんどくさそうに感じたのでやめました。

それではおまけとして、なぜこの関数を作成するにあたったのかをまとめます。

clamp関数をSassで自作したワケ

まずclamp関数を知ったのが、ここ2〜3ヶ月前の話でした。そのときから、vw を計算するのが手間だったことを覚えています。

そしてググってみた結果、少し楽にclamp関数を使える記事をみつけました。それがこちらです。

値を1つ入れるだけで、画面幅に合わせたclamp関数を出力してくれます。

「これは便利や！」

記事を参考にして、改良したものを使っていました。

ちなみにその時のコードはこちらです。

@function clamp_vw($num) {
  $minWidth: 800;
  $maxWidth: 1920;
  $val_max: $num * 1px;
  $val_vw: ($num / $maxWidth * 100 * 1000) / 1000;
  $val_min: ($minWidth * ($val_vw / 100)) * 1px;
  @return clamp(#{$val_min}, #{$val_vw * 1vw}, #{$val_max});
}

しかし、使っている最中にいくつかの疑問がでてきました。

「これ、画面幅限定されてるよな…」
「というか最小値と最大値も限定されてへん…？」
「ある程度ゆとりあるように使いたいなw」

関数を複数作成したらタブレットやSPでも使えますが、めんどくさすぎる。しかも重複して使うのは新次郎構文、これすなわちエンプレス構文…。

「じゃあ自作したらええかw」

ということで、今回はゆとりある使いやすそうな関数を作成しました。

clamp関数をSassでサクサク操ろう

PCやレスポンシブなど、幅広く活躍できるclamp関数。しかし、推奨値の計算が面倒だと感じていました。

ググってみても、役立ちそうな記事も案外少なかったです。じゃあ自作しようと思い、それを記事にしてみました。

画面幅に合わせたゆとりある関数なので、これからも重宝することでしょう。

自作した関数に穴があったり、よりよい方法があったときはまた報告します。「こっちの方がええんちゃうん？」というご意見があれば、シェアしていただけると嬉しいです。

【おまけ】line-heightもSassで関数にしてみた

Line-heightの計算も手間でめんどくさいと感じていたので、ついでに関数にしてみました。それがこちらの関数です。

@mixin lh($num: 16, $line: 24){
  line-height: ($line / $num); 
}

たった3行書くだけで使えてしまうこの便利さ。使い方はこんな感じです▼

@include lh(16, 24);
// 出力結果 line-height: 1.5;

16（$num）にはフォントのサイズ、24（$line）にはデザインツールの行間のサイズを記述します。

これでジェネレーターを開いて値を入力するという、めんどくさい手間が省けました。

簡単な関数でも、自作できたら嬉しいものですね。もし使えそうだったらお役に立ててください。

ということで、最後までご覧いただきましてありがとうございました！

この記事で、よりよいコーディングライフが送れたら嬉しく思います。

【参考サイト】

clamp()はSassと組み合わせると快適｜KISHIN
https://voidism.net/blog/?p=1799

clamp() – CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/clamp