SASS 믹스인 튜토리얼

믹스인은 Sass의 매우 강력한 기능입니다. 프로젝트 전체에서 재사용할 수 있도록 여러 CSS 선언을 함께 그룹화하는 데 사용합니다.

변환 속성에 대한 공급업체 접두사를 보유하기 위해 믹스인을 만들고 싶다고 가정해 보겠습니다.

SASS에서는 다음과 같이 코딩합니다.

@mixin transform {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

믹스인을 코드에 추가하기 위해 다음과 같이 @include 지시문을 사용합니다.

.navbar {
  background-color: red;
  padding: 1rem;
  ul {
    list-style: none;
  }
  li {
    text-align: center;
    margin: 1rem;
    @include transform;
  }
}

이제 변환 혼합의 모든 코드가 li 요소에 적용됩니다. 믹스인에 값을 전달하여 더욱 유연하게 만들 수도 있습니다.

지정된 값을 추가하는 대신 property 와 같은 변수를 사용하여 이름을 추가하여 다음과 같이 값을 나타냅니다.

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

이제 mixin을 호출할 때마다 원하는 값을 전달할 수 있습니다.

@include transform (rotate(20deg));

결론

이 블로그 게시물이 마음에 드셨다면 제가 매일 기술 관련 게시물을 게시하는 곳을 팔로우하세요!
이 기사가 마음에 들었고 팁을 남기고 싶다면 — 클릭 here

🌎 연결하자

Portfolio

Hashnode

Medium

Github

Codepen