[scss]mixin 실은 잘 알지 못한 건. 알면 편리. 사용법은? 초보자

Mixin이란?

썼다고 말하면, 쓰는 방법의 주의는 2개
①
@ 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 이외의 정의 방법이 참조 페이지에는 실려 있습니다만
정의되는 부분 범위가 다르거나 사례별로
보다 효율적인 사용법의 실례가 되고 있기 때문에
함께 배우고 가면 알겠습니다.

나 자신의 초학자를 위해
,미비나 어드바이스등이 있으시면 지적 받을 수 있으면,이것 기쁨 와세이므로, 아무쪼록 잘 부탁드리겠습니다．
끝까지 보아라.

감사합니다.