건너뛰기

Refresher on Mixins
The Problem
Solution: Placeholder Selectors

Mixins 리프레셔

A@mixin는 다른 스타일 시트에서 액세스할 수 있는 전역 클래스에 포함된 것처럼 스타일을 정의할 수 있는 SASS/SCSS의 At 규칙 기능입니다.

기본 예제로 다음과 같이 작성합니다(일반적으로 mixins.scss 라는 스타일 시트에).

// mixins.scss
@mixin guest-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid orange;
}

다른 위치에서 액세스하려면 @mixin 스타일 시트를 가져오고 다음과 같이 @include를 사용합니다.

// about.component.scss

@import '../scss/mixins.scss';

img {
  @include guest-avatar;
}

문제

동일한 스타일 시트 내에서 @mixin를 참조할 수 없습니다

.

경우에 따라 스타일 시트의 상단에서만 스타일을 조정할 수 있도록 반복성을 원할 수 있습니다(기본$variables 이상)

솔루션: 자리 표시자 선택기

자리 표시자 선택기를 사용하면 선택기 앞에 %가 있는 동일한 종류의 의사 클래스를 정의할 수 있습니다.

// some.component.scss

%rounded-top {
  border-radius: 8px 8px 0px 0px;
  padding: 1rem;
  padding-bottom: 3rem;
}

이제 정의된 아래의 동일한 스타일 시트에서 선택기를 참조할 수 있습니다.

// some.component.scss

%rounded-top {
  border-radius: 8px 8px 0px 0px;
  padding: 1rem;
  padding-bottom: 3rem;
}

.bottom-sheet {
  @extend %rounded-top;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

그게 다야. 그게 다야.

리아