[Saas]mixinを使って簡潔にコードを記述する

4040 ワード
CSS SaaS HTML HTML テキストリンク

はじめに

変数を使って同じカラーを簡潔に記述の仕方は前回学びました。

↓↓↓

今度はmixinというものを使ってより簡潔なコードを記述したいと思います。

mixinとは

@mixinディレクティブは、ミックスインとも呼ばれており、スタイル定義を再利用するための仕組みです。@mixinディレクティブでスタイルを定義して、@includeディレクティブで使う場所に埋め込みます。

Pikawaka 引用

試しに使ってみた

body {
  .content {
    width: 100%;
    height: 100px;
    margin-top: 10px;
  }

  .content-1 {
    width: 100%;
    height: 100px;
    margin-top: 10px;
  }

  .content-2 {
    width: 100%;
    height: 100px;
    margin-top: 10px;
  }
}

ざっくりですがこのような記述があったとします。
同じ記述がたくさんあり簡潔にしたいなーと思った時、mixinを使います。

@mixin hoge {
   width: 100%;
   height: 100px;
   margin-top: 10px;
}

@mixin mixin名 { コード }このように定義する事ができます。
あとは@include mixin名と記述すればOKです。

@mixin hoge {
   width: 100%;
   height: 100px;
   margin-top: 10px;
}

body {
  .content {
    @include hoge;
  }

  .content-1 {
    @include hoge;
  }

  .content-2 {
    @include hoge;
  }
}
SpringBootパラメータチェック
php微信共有の迅速な実現