* SASS中的選擇器不起作用？

Question

有我的問題。我試圖編譯SASS爲CSS在咕嘟咕嘟的，這是我得到的錯誤：

Message: 
    styles\main.sass 
Error: 
    Invalid CSS after "* {": expected "}", was "{" 
>> * { { 
    ---^ 

這是一塊SASS文件的咕嘟咕嘟有問題：

//resets 
* { 
    margin: 0; 
    padding: 0; 
    user-select: none; 
} 

不SASS不接受*選擇器或其他東西？

//編輯

發佈全SASS文件：

//colors 
$red: #ff6347; 

//fonts 
$font-stack: ‘Times New Roman’, Times, serif; 

//resets 
* { 
    margin: 0; 
    padding: 0; 
    user-select: none; 
} 

//placeholders 
%upperAndLowerButtonsDivs { 
    display: inline-block; 
    cursor: pointer; 
    width: 150px; 
    padding: 6px 10px; 
    border: 2px solid white; 
    border-radius: 3px; 
    text-align: center; 
    font-size: 1.5rem; 
    margin: 10px; 
    letter-spacing: 0.1rem; 
    transition: all 0.35s linear; 
} 

html, body { 
    background-color: $red; 
    max-height: 100%; 
    max-width: 100%; 
} 

body { 
    position: absolute; 
    font-family: $font-stack; 
    font-size: 3em; 
    color: white; 
    width: 1000px; 
    height: 525px; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    overflow-x: hidden; 
} 

#upperButtons { 
    text-align: center; 
    div { 
     @extend %upperAndLowerButtonsDivs; 
     &:hover { 
      color: $red; 
      background-color: white; 
     } 
    } 
} 

#timer { 
    text-align: center; 
    border: 2px solid white; 
    border-radius: 50%; 
    width: 276px; 
    height: 226px; 
    margin: 5% auto; 
    padding-top: 50px; 
    div { 
     display: inline-block; 
     cursor: pointer; 
    } 
} 

#lowerButtons { 
    text-align: center; 
    div { 
     @extend %upperAndLowerButtonsDivs; 
     &:hover { 
      color: $red; 
      background-color: white; 
     } 
    } 
} 

#mode { 
    display: block !important; 
    cursor: auto !important; 
} 

#time { 
    cursor: auto !important; 
    vertical-align: middle; 
    font-size: 1.5em; 
} 

#addTime, #reduceTime { 
    vertical-align: middle; 
    font-size: 0.6em; 
} 

#resume { 
    display: none !important; 
} 

@media only screen and(max-width: 590px) { 
    //placeholders 
    %upperAndLowerButtonsDivsMobile { 
     width: 80px; 
     line-height: 50px; 
     height: 50px; 
     padding: 3px 5px; 
     border: 2px solid #fff; 
     border-radius: 3px; 
     text-align: center; 
     vertical-align: middle; 
     font-size: 1.25rem; 
     margin: 0px; 
     letter-spacing: 0.1rem; 
     transition: all 0.35s linear; 
     margin-top: 25px; 
    } 

    #upperButtons { 
     margin-bottom: 40px !important; 
     div { 
      @extend %upperAndLowerButtonsDivsMobile; 
     } 
    } 

    #lowerButtons { 
     margin-top: 8px; 
     div { 
      @extend %upperAndLowerButtonsDivsMobile; 
     } 
    } 

    #timer { 
     margin-bottom: 0; 
     margin-top: 0 !important; 
    } 

    #longBreak { 
     line-height: 25px !important; 
    } 
} 

Answer 1

我認爲問題是分號。正如你所說的你使用SASS而不是SCSS，你應該檢查SASS/SCSS語法。 SASS不需要分號終止，但SCSS可以。刪除分號將解決您的問題。

您可以通過只編譯前4行沒有分號

//colors 
$red: #ff6347 

//fonts 
$font-stack: ‘Times New Roman’, Times, serif 

對其進行測試，你可以在這個pen看到，你所提供的代碼是完全正常SCSS。

Answer 2

正如this answer被提及，並沒有什麼特別之處SASS的Universal Selector (*);這是一個完全有效的SASS選擇器。

您的語法錯誤來自其他地方。

Answer 3

它應該正常工作，檢查你的代碼，其他地方一定有錯誤。