2024/04/16

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

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

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

image-set生成

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@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の時は画像の縦横サイズが読めてもっといろいろ機能が付けられてたんだけど仕方がないので機能を縮小した

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/*
 * テキストの代わりに背景画像を設定
 * 引数は 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の時のやつ。一応覚書として残しておこう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@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);
}

0 件のコメント:

色々な画像ファイル形式をhtmlに埋め込む(PHP)

画像をhtmlに埋め込む際、単一の場合は img/src、複数の拡張子を指定すると img/source/srcsetに展開してくれる便利関数。また、単一拡張子のみが指定されている場合は、ブラウザのサポート状況に応じ、avifやwebpの拡張子を持つ同名のファイルがある場合は[a...