作成日:  (更新日: )

SCSS のスニペット集

このページは、SCSS のスニペットなどをまとめる予定のページです。

目次

注意

  • コードのライセンスは CC0 (クレジット表示不要、改変可、商用可) です。

mixin

ブレークポイントごとのクラスの一括定義

$breakpoints: (
    sp: '(max-width: 600px)', 
    pc: '(min-width: 601px)'
);
@mixin responsive($prefix, $postfix) {
    .#{$prefix}-#{$postfix} {
        @content;
    }
    @each $k, $v in $breakpoints {
        @media #{$v} {
            .#{$prefix}-#{$k}-#{$postfix} {
                @content;
            }
        }
    }
}
使い方
@include responsive(text, left) { text-align: left; }
出力例
.text-left {
  text-align: left;
}
@media (max-width: 600px) {
  .text-sp-left {
    text-align: left;
  }
}
@media (min-width: 601px) {
  .text-pc-left {
    text-align: left;
  }
}

@media

$breakpoints: (
    sp: '(max-width: 600px)', 
    pc: '(min-width: 601px)'
);
@mixin media($bp) {
    @media #{map-get($breakpoints, $bp)} {
        @content;
    }
}
使い方
@include media(pc) {
    body {
        font-size: 16px;
    }
}
出力例
@media (min-width: 601px) {
  body {
    font-size: 16px;
  }
}