말대꾸 내 선택기를 재구성하고는

Question

여기 컴파일 된 코드의 기능을 깨고 :

이

/* line 5, ../scss/_layout.scss */ 
.tile::after, .tile::before { 
    content: ''; 
    display: block; 
    position: absolute; 
    z-index: -1; 
} 

/* line 16, ../scss/_layout.scss */ 
.tile { 
    width: 40px; 
    width: 2.5rem; 
    height: 40px; 
    height: 2.5rem; 
    margin-top: 8px; 
    margin-top: 0.5rem; 
    margin-left: 4px; 
    margin-left: 0.25rem; 
    position: relative; 
} 

/* line 23, ../scss/_layout.scss */ 
.tile::after { 
    width: 40px; 
    width: 2.5rem; 
    height: 40px; 
    height: 2.5rem; 
    top: 4px; 
    top: 0.25rem; 
} 

/* line 30, ../scss/_layout.scss */ 
.tile::before { 
    width: 48px; 
    width: 3rem; 
    height: 44px; 
    height: 2.75rem; 
    top: 4px; 
    top: 0.25rem; 
    left: -4px; 
    left: -0.25rem; 
} 

/* line 40, ../scss/_layout.scss */ 
.large { 
    width: 248px; 
    width: 15.5rem; 
    height: 248px; 
    height: 15.5rem; 
} 

/* line 46, ../scss/_layout.scss */ 
.large::after { 
    width: 248px; 
    width: 15.5rem; 
    height: 248px; 
    height: 15.5rem; 
} 

/* line 51, ../scss/_layout.scss */ 
.large::before { 
    width: 256px; 
    width: 16rem; 
    height: 252px; 
    height: 15.75rem; 
} 

/* line 5, ../scss/_style.scss */ 
.tile { 
    border-radius: 4px; 
    border-radius: 0.25rem; 
    background: gray; 
} 

/* line 11, ../scss/_style.scss */ 
.tile::after { 
    border-radius: 4px; 
    border-radius: 0.25rem; 
    background: red; 
} 

/* line 17, ../scss/_style.scss */ 
.tile::before { 
    border-radius: 8px; 
    border-radius: 0.5rem; 
    background: black; 
} 

/* line 23, ../scss/_style.scss */ 
.tile:hover { 
    background: cyan; 
} 

/* line 26, ../scss/_style.scss */ 
.tile:hover::after { 
    background: orange; 
} 

/* line 29, ../scss/_style.scss */ 
.tile:hover::before { 
    background: blue; 
} 

SCS들이 타일." 이 방법으로 컴파일하는 것을 막을 수있는 방법이 있습니까? 나는 그것을 다르게 중첩 시키려고했지만 아무 것도 시도하지 않았다. do not do 완전히 다른 divs를 만들지 만, 나는이 문제를 해결할 수 없다면 내가해야 할 것 같아. 나는 이것을 훨씬 더 복잡하게 만들 계획이다. 난 그냥 클래스를 추가하여 기존 div 수정 싶어요.

Answer 1

아무 것도 주문하지 않는 것처럼 보입니다. 컴파일 된 CSS에 따르면 선택자 .tile에 대해 두 개의 서로 다른 파일, 즉 _layout.scss와 _style.scss의 두 가지 스타일이 실제로 있다는 점이 문제입니다. 첫 번째 .tile 및 .large 스타일이 포함 된 _layout.scss의 정의가 먼저 배치 된 다음 _style.scss (두 번째 세트 인 .tile 스타일 포함)의 정의가 적용됩니다.