• ..

NextJS

    共通ブロックの使い回し

    Mixin

    ブロック(スニペット)が定義できて、@mixinを使います。

    @mixin reset {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    ul {
      @include reset();
    }

    Mixin は@include mixin-name()のような形で、そのセレクタに取り込めます。

    /* 変換後 */
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    プレースホルダーセレクター

    単純なブロックの時には、Mixin よりプレースホルダーセレクターがいいかもです。これは定義済セレクタを取り込めます。

    %reset {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    ul {
      @extend %reset;
    }

    @extendはセレクタをまとめる

    @mixin foo {
      color: orange;
    }
    ul {
      @include foo();
    }
    ol {
      @include foo();
    }
    
    %foo {
      color: orange;
    }
    ul {
      @extend %foo;
    }
    ol {
      @extend %foo;
    }

    セレクタが、ul, olになってますね。

    // @include
    ul {
      color: orange;
    }
    ol {
      color: orange;
    }
    // @extend
    ol,
    ul {
      color: orange;
    }

    注意点

    例えば1行のプレースホルダーセレクター 5 つを 100 個のセレクターで使うとどうなるか。これは 100 個のセレクタが 5 回再定義され、かな〜り長いセレクタになります。
    3 行以上のものに制限したり、1,2 行なら汎用セレクターを HTML で使いましょう。

    Mixin と引数

    こっちにしかない機能です。その場で渡した値から、異なるかもしれないブロックを受け取ることができます。
    例でget-gutterを定義しました。

    $gutter: (
      sp: 0 0.3em,
      pc: 0 1em
    );
    
    @mixin get-gutter($type) {
      @if $type != 'sp' and $type != 'pc' {
        @error '`sp` か `pc` を指定してください';
      }
    
      padding: map-get($gutter, $type);
    }
    
    div {
      @include get-gutter('sp');
    }
    
    @media screen and (min-width: 768px) {
      div {
        @include get-gutter('pc');
      }
    }

    これには$typeという値を渡すことできます。(sppcに制限)正常なら$gutterから値を取得し、paddingで返します。

    /* 変換後 */
    div {
      padding: 0 0.3em;
    }
    
    @media screen and (min-width: 768px) {
      div {
        padding: 0 1em;
      }
    }