SASS（.sass）爲什麼這個變量混淆了一切？

我對sass很陌生，在我的生活中，我不知道爲什麼這個特定的變量實例搞亂了我的.css輸出。我使用Atom.io作爲我的文本編輯器，插件sass-autocompile作爲我的sass編譯器。SASS（.sass）爲什麼這個變量混淆了一切？

這裏是我的代碼

薩斯：

$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

後，它編譯我得到這個：

.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; 
 
}

它基本上增加了「顏色」的一切。我在這裏做錯了什麼？

來源

2016-09-25 John Garcia

較少的代碼轉儲和更多的「變量」隔離示例，包括顯示預期的情況和/或沒有「變量」的情況。 – user2864740

如果在Atom中啓用可見空白，會發生什麼情況？ – user2864740

謝謝，有應該有標籤的空間 –

解決方案：有空間應該有標籤。一旦我刪除了空格並用製表符替換它們，一切正常編譯。

來源

2016-09-25 04:30:51

SASS（.sass）爲什麼這個變量混淆了一切？

回答

相關問題