@extendと@mixin

以下記事を参照。引数使わないし、この場合は@extendでいいのかな…

https://j-online.ne.jp/blog/web%E5%88%B6%E4%BD%9C/sass%E3%82%92%E8%80%83%E3%81%88%E3%82%8B%EF%BD%9Eextend%E3%81%A8mixin%EF%BD%9E

これ作る。前回のつづき

ボーダーあり＆右下配置を作るにあたり、使いまわせるように、基準とボーダーver.と右下配置ver.を想定したコーディングをしていく。

HTML

<li class="card">
    <figure class="card__img-wrapper_square"><img src="image/img05.jpeg" alt="" class="card__img"></figure>
    <div class="card__main">
        <a href="#" class="label__link"><span>Instagram</span></a>
        <p class="card__title">テキストが入ります〇テキストが入ります〇</p>
        <a href="#" class="label__link label__link_border label__link_bottom-right"><span>ai・1h</span></a>
    </div>
</li>

SCSS-@extend

.label__link{
    color: $grey;
    font-size: 12px;
    margin-bottom: .5rem;
    &_border{
        @extend .label__link;
        border: 1px solid $grey;
        border-radius: 3px;
        padding: 0 .5rem;
        line-height: 1.5;
    }
    &_bottom-right{
        @extend .label__link;
        position: absolute;
        right: 20px;
        display: inline-block;
    }
}

CSSはこうなる

.label__link, .label__link_bottom-right, .label__link_border {
  color: #b2b2b2;
  font-size: 12px;
  margin-bottom: 0.5rem;
}
.label__link_border {
  border: 1px solid #b2b2b2;
  border-radius: 3px;
  padding: 0 0.5rem;
  line-height: 1.5;
}
.label__link_bottom-right {
  position: absolute;
  right: 20px;
  display: inline-block;
}

CSS-@mixinだと…

@mixin label{
    color: $grey;
    font-size: 12px;
    margin-bottom: .5rem;
}

.label{
    &__link{
        @include label();
    }
    &__link_border{
        @include label();
        border: 1px solid $grey;
        border-radius: 3px;
        padding: 0 .5rem;
        line-height: 1.5;
    }
    &__link_bottom-right{
        @include label();
        position: absolute;
        right: 20px;
        display: inline-block;
    }
}

となり、CSSは

.label__link {
  color: #b2b2b2;
  font-size: 12px;
  margin-bottom: 0.5rem;
}
.label__link_border {
  color: #b2b2b2;
  font-size: 12px;
  margin-bottom: 0.5rem;
  border: 1px solid #b2b2b2;
  border-radius: 3px;
  padding: 0 0.5rem;
  line-height: 1.5;
}
.label__link_bottom-right {
  color: #b2b2b2;
  font-size: 12px;
  margin-bottom: 0.5rem;
  position: absolute;
  right: 20px;
  display: inline-block;
}

となる。コード量が増えるから、このくらいシンプルなときは@extendでいいのかな。

こういう時に使うのか？

@mixin card__img($aspect){
    width: 100%;
    object-fit: cover;
    aspect-ratio: $aspect;
}

.card__img{
    &_square{
        @include card__img(1)
    }
    &_tall{
        @include card__img(2 / 3)
    }
    &_wide{
        @include card__img(16 / 9)
    }
}

画像を横長（縦長）にしたかったらアスペクト比が変わる。コンテナクエリとかと組み合わせてレスポンシブに使えそう。今度やってみる