sass mixin のあれこれ

Sass用　mixin

mixinに追加する内容は増えてきたので、よく使う部分を覚え書き

media screenの設定

//---------------------------------------
// 使い方：@include 変数名(予約語)
// 例：
// @include bp-down(lg) {
// display: block;
// }
// 展開後：
// @media screen and (max-width: 940px) {
// display: block;
// }
// ---------------------------------------

// min-width 
$breakpoints-up: (
    "md": "screen and (min-width: 671px)",
    "lg": "screen and (min-width: 941px)",
) !default;
// max-width
$breakpoints-down: (
    "md": "screen and (max-width: 670px)",
    "lg": "screen and (max-width: 940px)",
    "xl": "screen and (max-width: 1240px)",
) !default;

@mixin bp-up($breakpoint) {
  @media #{map-get($breakpoints-up, $breakpoint)} {
      @content;
  }
}
@mixin bp-down($breakpoint) {
  @media #{map-get($breakpoints-down, $breakpoint)} {
      @content;
  }
}

背景画像にSVGをしてした際に、任意のカラーに変更

// ---------------------------------------
// 使い方：
// @include svg-line(re-color(色コード),SVGのviewBoxの値,SVGのパスの値);
//
// 展開後：
// background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='SVGのviewBoxの値'%3E%3Cpath fill='色コード' d='SVGのパスの値'/%3E%3C/svg%3E");
// background-repeat: no-repeat;
// ---------------------------------------

@function re-color($code) {
  @return str-slice("#{$code}", 2);
}

@mixin svg-line($color,$img-point,$img-pass) {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='#{$img-point}'%3E%3Cpath fill='%23#{$color}' d='#{$img-pass}'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

フォントを自動リサイズする設定

// ---------------------------------------
// font リサイズ設定
// 使い方：
// @include rsfontsize(最小値, 最大値);
// 展開後：
// font-size: clamp( 最小値px, ( 最小値px + (( 100vw - 670px ) * (( 最大値 - 最小値 ) / ( 1200 - 670 )))), 最大値px );
// ---------------------------------------

$breakpoints: (
  'mobile' : 670px,
  'desktop' : 1200px,
) !default;

@mixin rsfontsize($fontsize, $fontsize-l) {
    font-size: clamp( #{$fontsize * 1px}, ( #{$fontsize * 1px} + (( 100vw - #{map.get($breakpoints, mobile)} ) * (( #{$fontsize-l} - #{$fontsize} ) / ( #{num(map.get($breakpoints, desktop))} - #{num(map.get($breakpoints, mobile))} )))), #{$fontsize-l * 1px} );
}

@function num($input){
  @return math.div( $input, ($input * 0 + 1) );
}