img-setを生成するfunction、mixin他 (SASS)

5年前、せっかくrubySASSを覚えてmixinとかいろいろ作ったのに、It’s no longer supported, and Ruby Sass users should migrate to another implementation.とかつれない状況になってしまっていた。５年も離れていたのが悪いのであるが、こんなにトレンドが変わると今せっかく覚え始めた DartSASSもいつまでスタンダードでいられるのか不安。

と言っていても仕方がない

image-set生成

CSSのバックグラウンド画像でimage-setを使うと色々な画像ファイル形式と解像度ごとのファイルが選べるようなので、それを簡単にセットできるようにしたfunciton

@use "sass:string";

// make a image path
@function img($name) {
	@return $img_path+$name;
}

/*
 * image-set 生成
 * $name: ファイル名($extensions!=null/拡張子なし, $extensions==null/拡張子あり)
 * $extensions: (avif, webp, jpg) サイズ指定なし
 * $extensions: (avif: (1x, 2x), webp: ("", "2x"), jpg: null) サイズ指定あり
 */
@function imgset($name, $extensions:null) {
	$res: "url(\""+img("#{$name}")+"\")";

	@if $extensions {
		$res: "image-set(";

		@each $ext, $sizes in $extensions {
			@each $size in $sizes {
				@if $size and string.length("#{$size}") > 0 {
					$res: $res+"url(\""+img("#{$name}\@#{$size}.#{$ext}")+"\") type(\"image/#{$ext}\") #{$size},";
				} @else {
					$res: $res+"url(\""+img("#{$name}.#{$ext}")+"\") type(\"image/#{$ext}\"),";
				}
			}
		}

		$res: string.slice($res, 1, -2); // 最後の余分な , を取る
		$res: $res+")";
	}

	@return string.unquote($res); // 勝手にクォーテーションで囲まれるからそれを取って返却
}

テキスト代わりに背景画像を設定

テキストエリアをinline-blockにしてテキストを枠外に追い出しバックグラウンドに画像を入れるmixin

rubySASSの時は画像の縦横サイズが読めてもっといろいろ機能が付けられてたんだけど仕方がないので機能を縮小した

/*
 * テキストの代わりに背景画像を設定
 * 引数は setimg2bgに準ずる
 */
@mixin txt2img ($img, $imgw, $imgh, $vw:auto, $vh:auto) {
	@include setimg2bg($img, $imgw, $imgh, $vw, $vh);
	@include eject-text;
}

/*
 * 背景画像設定
 * $img: image file name
 * $imgw: $img の実際の幅(width pixel)
 * $imgh: $img の実際の高さ(height pixel)
 * $vw: 表示したい幅
 * $vh: 表示したい高さ
 *
 * $vw/$vh 両方とも auto(省略)の場合は 実際のサイズをセット
 * $vw/$vh いずれかが autoの場合は、オリジナル画像の縦横比から計算
 * $vw/$vh 両方ともサイズ指定の場合は、その指定値をセット（でもそれなら $imgw/$imghで指定すればいい）
 */

@mixin setimg2bg ($img, $imgw, $imgh, $vw:auto, $vh:auto) {
	background: url(img($img)) no-repeat;
	@if $vw=="auto" and $vh=="auto" {
		width: $imgw;
		height: $imgh;
	} @else {
		width:  if($vw=="auto", $imgw * math.div($vh,$imgh), $vw);
		height: if($vh=="auto", $imgh * math.div($vw,$imgw), $vh);
	}
	background-size: cover;
}

// テキストを枠外に追い出す
@mixin eject-text {
	display: inline-block;
	text-indent: 200%;
	overflow: hidden;
	white-space: nowrap;
}

rubySASSの時のやつ。一応覚書として残しておこう。

@mixin setimg2bg ($img, $w:null, $h:null, $calc: false) {
	background: url(img($img)) no-repeat;
	$iw: image-width(img($img));
	$ih: image-height(img($img));
	@if not $calc {
		@if $w { width:  if($w=="auto", $iw, $w); }
		@if $h { height: if($h=="auto", $ih, $h); }
	} @else {
		@if $w == "auto" {
			@if ($h) {
				width:  if($h!="auto", $iw * ($h / $ih), $iw);
				height: $h;
			}
		}
		@if $h == "auto" {
			@if ($w) {
				width: $w;
				height: if($w!="auto", $ih * ($w / $iw), $ih);
			}
		}
	}
	@include background-size(cover);
}