px-to-vw関数を複数のpx値を受け取れるように、Sassの「可変長引数」を使って実装します。引数に複数のpx値を渡すことで、関数がそれぞれをvwに変換して返すようにします。
以下のように、Sassの@each構文を使って、複数のpx値をループ処理し、すべての値をvwに変換する関数を作成します。
// src/styles/_mixins.scss
@function px-to-vw($px-values...) {
$min-width: 375px; // 最小画面幅
$max-width: 1440px; // 最大画面幅
$viewport-width: 100vw;
$result: ();
@each $px in $px-values {
$vw-value: if(
$px < $min-width,
($px / $min-width) * $viewport-width,
if(
$px > $max-width,
($px / $max-width) * $viewport-width,
($px / $max-width) * $viewport-width
)
);
$result: append($result, $vw-value);
}
@return $result;
}
使い方
この関数を使って、複数のpx値を渡すと、各値が変換されたリストが返されます。リストの各要素を使うには、Sassのリスト要素指定を使って指定します。
// 使用例
.container {
padding: px-to-vw(20px, 40px); // [20px, 40px] がvw単位に変換
}
.header {
font-size: nth(px-to-vw(24px, 16px), 1); // 1つ目のpx値が変換されたvw
line-height: nth(px-to-vw(24px, 16px), 2); // 2つ目のpx値が変換されたvw
}
Vueコンポーネントでの例
以下のように、Vueファイルのスタイルセクションでこの関数を活用できます。
<template>
<div class="container">
<header class="header">リキッドレイアウトのサンプル</header>
</div>
</template>
<script>
export default {
name: "LiquidLayoutSample",
};
</script>
<style lang="scss" scoped>
@import "@/styles/_mixins.scss";
.container {
padding: px-to-vw(20px, 40px); // 20px と 40px がそれぞれvwに変換され適用
}
.header {
font-size: nth(px-to-vw(24px, 16px), 1); // 24pxをvwに変換
line-height: nth(px-to-vw(24px, 16px), 2); // 16pxをvwに変換
}
</style>
補足
nth(px-to-vw(24px, 16px), 1)のように、リスト内の値を指定することで、それぞれの変換後の値を使えます。- この関数により、必要に応じて複数の
px値を一度に変換することが可能です。
