// マップ型の変数でブレイクポイントを定義する
<br>$breakpoints: (
<br>    'xs': 'screen and (min-width: 320px)',
<br>    'sm': 'screen and (min-width: 576px)',
<br>    'md': 'screen and (min-width: 768px)',
<br>    'lg': 'screen and (min-width: 1024px)',
<br>    'xsl': 'screen and (min-width: 1200px)',
<br>    'xl': 'screen and (min-width: 1366px)',
<br>    'xxl': 'screen and (min-width: 1920px)',
<br>) !default;
<br>
<br>// メディアクエリ
<br>@mixin mq($breakpoint: md) {
<br>    @media #{map-get($breakpoints, $breakpoint)} {
<br>        @content;
<br>    }
<br>}
<br>
<br>// vwの算出（四捨五入）
<br>@function getVw($elemSize: 10, $windowWidth: 375) {
<br>    $vwValue: round(calc($elemSize * calc(100 / $windowWidth))) + vw;
<br>    @return $vwValue;
<br>}
<br>
<br>// vwの算出（四捨五入）
<br>@function getVwNoRound($elemSize: 10, $windowWidth: 375) {
<br>    $vwValue: calc($elemSize * calc(100 / $windowWidth)) + vw;
<br>    @return $vwValue;
<br>}
<br>