SASS에서 Mixin과 Placeholder의 차이점
4887 단어 placeholdersassmixinscss
다음 예를 살펴보겠습니다.
우리는 mixin bananaColor와 placeholder coffeeBackground를 선언했습니다.
다음 클래스에서 사용됩니다.
.paragraph1은 bananaColor를 사용합니다.
.paragraph2는 bananaColor 및 coffeeBackground를 사용합니다.
.paragraph3은 coffeeBackground를 사용합니다.
SASS 파일:
@mixin bananaColor {
color: #f5c725;
font-weight: 600;
}
%coffeeBackground {
background-color: #b46427;
padding: 10px;
}
.paragraph1 {
font-size: 20px;
height: 100px;
@include bananaColor;
}
.paragraph2 {
font-size: 20px;
height: 100px;
@include bananaColor;
@extend %coffeeBackground
}
.paragraph3 {
font-size: 20px;
height: 100px;
@extend %coffeeBackground
}
HTML 파일:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<p class="paragraph1">paragraph 1</p>
<p class="paragraph2">paragraph 2</p>
<p class="paragraph3">paragraph 3</p>
</div>
</body>
</html>
결과는 다음과 같습니다.
SASS가 코드를 컴파일하는 방법을 비교해 보겠습니다.
Mixin의 경우 선언된 mixin 속성을 사용되는 위치에 복사합니다.
자리 표시자의 경우 선택자(.paragraph2, .paragraph3)를 선언된 자리 표시자로 복사합니다.
결론적으로 우리는 Mixin과 Placeholder가 문자 그대로 역으로 일을 하고 있음을 알 수 있습니다.
Mixin의 논리는 Placeholer보다 더 직관적이고 이해하기 쉬울 수 있습니다. 그러나 Placeholder는 선택자만 복사하는 반면 선언된 Mixin을 모든 위치에 복사하기 때문에 CSS 코드가 더 커질 수 있습니다.
그 외에도 Mixin은 함수처럼 작동할 수 있습니다. 매개변수를 Mixin에 전달할 수도 있지만 자리 표시자에는 매개변수를 사용할 수 없습니다.
Mixin과 Placeholder는 SASS 코드를 구성하고 줄이는 데 실제로 도움이 됩니다. 실제 시나리오에 따라 Mixin 또는 Placeholder를 사용하도록 선택할 수 있습니다.
Reference
이 문제에 관하여(SASS에서 Mixin과 Placeholder의 차이점), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/edindevto/difference-between-mixin-and-placeholder-in-sass-1d8m텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
