문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

======Sass @extend and Inheritance======
<WRAP left notice 80%>
  * description : Sass @extend and Inheritance
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-08
</WRAP>
<WRAP clear></WRAP>
\\
====Ref====
[[https://www.w3schools.com/sass/sass_extend.php|Sass @extend and Inheritance]]\\

=====Sass @extend Directive=====
''@extend'' 지시문을 사용하면 한 셀렉터에서 다른 셀렉터로 CSS 속성 집합을 공유할 수 있습니다.\\
\\
''@extend'' 지시문은 약간의 세부 사항만 다른 거의 동일한 스타일의 요소가 있는 경우 유용합니다.\\
\\
다음 %%Sass%% 예제는 먼저 버튼의 기본 스타일을 만듭니다.(이 스타일은 대부분의 버튼에 사용됨).\\ 
그런 다음 "Report"버튼용 스타일과 "Submit"버튼용 스타일을 하나씩 만듭니다.\\ 
"Report"및 "Submit"버튼은 모두 ''@extend'' 지시문을 통해 %%.button-basic%% 클래스의 모든 CSS 속성을 상속합니다.\\ 
또한 정의된 고유한 색상을 가지고 있습니다.\\

====SCSS Syntax:====
<code sass>
.button-basic {
    border: none;
    padding: 15px 30px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}

.button-report {
    @extend .button-basic;
    background-color: red;
}

.button-submit {
    @extend .button-basic;
    background-color: green;
    color: white;
}
</code>
\\
컴파일 후, CSS는 하기와 같습니다.\\

====CSS Output====
<code css>
.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report {
  background-color: red;
}

.button-submit {
  background-color: green;
  color: white;
}
</code>
\\
''@extend'' 지시문을 사용하면, 다음과 같이 HTML 코드의 요소에 대해 여러 클래스를 지정할 필요가 없습니다.\\ 
:%%<button class = "button-basic button-report">Report this</ button>.%%\\ 
두 스타일 세트를 모두 가져 오려면 %%.button-report%%를 지정하기만 하면 됩니다.\\
\\
''@extend'' 지시문은 %%Sass%% 코드를 매우 DRY하게 유지하는 데 도움이 됩니다.\\
\\
\\
{{tag>오션, Sass @extend and Inheritance}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구