[scss]mixin実はよくわかってなかった件。わかると便利。使い方は？ 初心者

6528 ワード
scss CSS include mixin Ruby Ruby テキストリンク

Mixinとは？

ざっくりお伝えすると、書き方の注意は２つ
①
＠mixinで定義を決める
「＠mixin　panda（好きな名前）{color:red;みたいな定義}」で書く

＠mixinのscss当てる
「当てたいクラス名{＠include　panda(mixinと同じ名前じゃ無いとダメ)；}」
これで＠mixinで書いた定義がまるまるこのクラスに反映されます。

②
Mixinをかくときはあちこちに＠mixinを書くのではなく「_mixin.scss」を作り
その中にまとめてapplicationに＠importをされた方が管理しやすいかと思います。

ちなみにですがmixinを当てたいページより上にmixinのファイルを＠importするだけで下のscssファイルでは＠includeが当たるようになります

例文

こちらはわかりやすいように同じページに「mixin」と「include」を記述しますね

_mixin.scss(例)
// items/new.html
// 商品出品ページ
@mixin dropzone{
  background-color:#f5f5f5;
  border: dashed 1px #ccc;
  color:#333;
  vertical-align: middle;
  padding: 20px;
  cursor: pointer;
  padding: 40px;
  position: relative;
  text-align: center;
  width: 100%;
  margin: 0 10px 0 auto;
  }
// 画像詳細ページ
@mixin item{
  width: 60px;
  height: 60px;
  img{
    width: 60px;
    height: 60px;
    }
}
_item-up-to.scss(例)
.dropzone-area{
  @include dropzone;
//必ず末尾にセミコロン『；』を忘れないように気をつけてください
  p{
    cursor: pointer;
  }
}
//中略
.box-photo{
      box-sizing: border-box;
      width: 300px;
      height: 420px;
      margin-right: 20px;
      &__photo{
        width: 300px;
        height: 420px;
        font-size: 0;
        img:nth-child(1){
          width: 300px;
          height: 300px;
        }
        img{
        @include item;
        }
      }
    }

＠include終わりの
セミコロン(;)こんなやつすごい大事！！

参照ぺージ

クリエイターボックス
Sassで@mixinを作る時に知っておきたい基礎知識

アンパサンド＆もわかると便利よね

終わりに

本当の初心者が真似っこでできるのを目指して書きました。
参照ページ載せますが、記述方法プラスOverwriteしたりと
もっともっと便利なサイトはございますので、慣れましたらぜひご活用ください。
mixin以外の定義方法が参照ページには載ってますが
定義となる部分範囲が異なっていたり、ケースバイケースで
より効率の良い使い方の実例となっておりますので
一緒に学んでいけたらと存じます。

わたくし自身初学者のため
、不備やアドバイス等がございましたらご指摘いただけますと、これ喜びわっしょいでございますので、どうぞよろしくお願いいたします。
最後までご覧いただき

ありがとうございます。