SCSS 구조 개선
나쁜 예
다음과 같이 구성된 예제 SCSS:
.widget {
background-color: red;
.widget-body {
background-color: black;
.widget-link-block {
background-color: yellow;
.widget-link-block-menu {
background-color: green;
}
}
}
}
CSS로 컴파일:
.widget {
background-color: red;
}
.widget .widget-body {
background-color: black;
}
.widget .widget-body .widget-link-block {
background-color: yellow;
}
.widget .widget-body .widget-link-block .widget-link-block-menu {
background-color: green;
}
2가지 단점이 있습니다.
.widget {
background-color: red;
.widget-body {
background-color: black;
.widget-link-block {
background-color: yellow;
.widget-link-block-menu {
background-color: green;
}
}
}
}
.widget {
background-color: red;
}
.widget .widget-body {
background-color: black;
}
.widget .widget-body .widget-link-block {
background-color: yellow;
}
.widget .widget-body .widget-link-block .widget-link-block-menu {
background-color: green;
}
<div class='widget'>
<div class='widget-body'>
<div class='widget-link-block'>
<div class='widget-link-block-menu'>
</div>
</div>
</div>
</div>
계층 구조를 위반하면 작동이 중지됩니다.
<div class='widget-body'>
<div>
작동하지 않습니다
<div class='widget'>
<div class='widget-body'>
<div class='widget-link-block-menu'>
<div class='widget-link-block'>
</div>
</div>
</div>
</div>
작동하지 않습니다
제안된 방법
SCSS를 올바르게 사용하고 팔로우BEM
위의 SCSS 예는 다음과 같이 수정할 수 있습니다.
.widget {
background-color: red;
&-body {
background-color: black;
}
&__link {
&__block {
background-color: yellow;
&__menu {
background-color: green;
}
}
}
}
CSS로 컴파일됩니다.
.widget {
background-color: red;
}
.widget-body {
background-color: black;
}
.widget__link__block {
background-color: yellow;
}
.widget__link__block__menu {
background-color: green;
}
보시다시피 컴파일된 CSS는 더 간결하고 덜 복잡합니다. SCSS를 작성할 때 더 이상 '.widget' 작성을 반복하지 않습니다. 더 중요한 것은 컴파일된 CSS가 더 이상 HTML 구조에 의존하지 않고 다음과 같이 사용할 수 있다는 것입니다.
<div class='widget'>
<div class='widget-body'>
<div class='widget__link__block'>
<div class='widget__link__block__menu'>
</div>
</div>
</div>
</div>
또는 다른 순서로:
<div class='widget'>
<div class='widget-body'>
<div class='widget__link__block__menu'>
<div class='widget__link__block'>
</div>
</div>
</div>
</div>
또는 개별적으로:
<div class='widget-body'>
</div>
Reference
이 문제에 관하여(SCSS 구조 개선), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/xiaohan_du/improve-scss-structure-49of
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
.widget {
background-color: red;
&-body {
background-color: black;
}
&__link {
&__block {
background-color: yellow;
&__menu {
background-color: green;
}
}
}
}
.widget {
background-color: red;
}
.widget-body {
background-color: black;
}
.widget__link__block {
background-color: yellow;
}
.widget__link__block__menu {
background-color: green;
}
<div class='widget'>
<div class='widget-body'>
<div class='widget__link__block'>
<div class='widget__link__block__menu'>
</div>
</div>
</div>
</div>
<div class='widget'>
<div class='widget-body'>
<div class='widget__link__block__menu'>
<div class='widget__link__block'>
</div>
</div>
</div>
</div>
<div class='widget-body'>
</div>
Reference
이 문제에 관하여(SCSS 구조 개선), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/xiaohan_du/improve-scss-structure-49of텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)