2016-09-25 3 views
0

나는 새까맣다. 내 인생에서 왜이 특정한 변수 인스턴스가 내 .css 출력을 엉망으로 만들고 있는지 알 수 없다. Atom.io를 내 텍스트 편집기로 사용하고 sass-autocompile을 sass 컴파일러로 사용하고 있습니다.SASS (.sass) 왜이 변수가 모든 것을 망칠까요?

.dark-btn { 
 
    color: #fdfcfc; 
 
    color-display: block; 
 
    color-font-weight: bold; 
 
    color-margin: auto; 
 
    color-background: #040A14; 
 
    color-padding: 10px; 
 
    color-width: 200px; 
 
    color-text-align: center; 
 
} 
 

 
.dark-btn:hover { 
 
    background: #333; 
 
    animation-name: popUp; 
 
    animation-fill-mode: forwards; 
 
    animation-duration: 200ms; 
 
}
0 : 그것이 내가이 얻을 컴파일 후

$white: #fdfcfc 
 
$black: #040A14 
 

 
.dark-btn 
 
    color: $white 
 
    display: block 
 
    font-weight: bold 
 
    margin: auto 
 
    background: $black 
 
    padding: 10px 
 
    width: 200px 
 
    text-align: center 
 
    &:hover 
 
    background: $gray 
 
    animation-name: popUp 
 
    animation-fill-mode: forwards 
 
    animation-duration: 200ms

:

여기

말대꾸 내 코드입니다

기본적으로 모든 것에 "색상"이 추가됩니다. 여기서 내가 뭘 잘못하고 있니?

+0

더 적은 코드 덤프 및 '변수'가없는 예상 사례 및/또는 사례를 보여주는 것을 포함하여 '변수'의 사례를 더 많이 분리합니다. – user2864740

+0

Atom에서 보이는 공백을 활성화하면 어떻게됩니까? – user2864740

+0

감사합니다. 탭이 있어야하는 공간이있었습니다. –

답변

1

해결책 : 탭이 있어야하는 공간이있었습니다. 공백을 제거하고 탭으로 바꾸면 모든 것이 올바르게 컴파일됩니다.