【Sass保存版】便利なmixin4選

Sass使用するなかでも便利で、転用する場面が多そうなmixinを4つ集めました！

linkのcolor指定

mixin

@mixin links ($link, $visited, $hover, $active) {
    & {
        color: $link;
        &:visited {
            color: $visited;
        }
        &:hover {
            color: $hover;
        }
        &:active, &:focus {
            color: $active;
        }
    }
}

使用例

a {
    @include links(#000000, #ff7f50, #000000, #ff7f50);
}

before要素(afterにも変更可能)

mixin

@mixin p-before(
    $which: before,
    $top: 0,
    $left: 0,
    $content: "",
    $position: absolute,
    $width: 100%,
    $height: 100%,
    $display: block) {
      &::#{$which} {
      display: $display;
      content: $content;
      position: $position;
      top: $top;
      left: $left;
      width: $width;
      height: $height;
      @content;
  }
}

使用例

//そのままの適用で良いとき
a {
    @include p-before;
}

//調整が必要なとき
a {
    @include p-before($top: 50px, $left: 50px);
}

アニメーション

mixin

@mixin animation(
  $name,
  $duration: 1s,
  $timing-function: ease,
  $delay: 0s,
  $iteration-count: 1,
  $direction: normal,
  $fill-mode: forwards
) {
  animation: {
    name: $name;
    duration: $duration;
    timing-function: $timing-function;
    delay: $delay;
    iteration-count: $iteration-count;
    direction: $direction;
    fill-mode: $fill-mode;
  }
}

使用例

a {
    @include animation($name: xxxxxx, $duration: 2s, $delay: 1s);
}

メディアクエリ

mixin

@mixin media-sp {
  @media screen and (max-width: xxxpx) {
    @content;
  }
}

@mixin media-tab {
  @media screen and (max-width: xxxpx) {
    @content;
  }
}

使用例

//例1
a {
    display: none;

    @include media-sp{
      display: block;
    }
}

//例2
@include media-sp{
    a {
      .....
    }
}