編譯爲CSS時發生sass錯誤

-1

我正在編寫有關將CSS編譯爲Sass的ROR教程，但我無法解決問題，這非常神祕，我已經做了一些研究，但都沒有關係。非常感謝你。編譯爲CSS時發生sass錯誤

Invalid CSS after " }": expected selector or at-rule, was "}" 
    (in `/Users/snailwalker/rails_projects/sample_app/app/assets/stylesheets/custom.css.scss:82)` 

Extracted source (around line #5): 
2 
3 
4 
5 
6 
7 
8 

    <html> 
    <head> 
     <title><%= full_title(yield(:title)) %></title> 
     <%= stylesheet_link_tag "application", media: "all", 
              "data-turbolinks-track" => true %> 
     <%= javascript_include_tag "application", "data-turbolinks-track" => true %> 
     <%= csrf_meta_tags %>

Css文件。

@import "bootstrap"; 
    /* universal */ 
    html { 
     overflow-y: scroll; 
    } 
    body { 
     padding-top: 60px; 
    } 
    section { 
     overflow: auto; 
    } 
    textarea { 
     resize: vertical; 
    } 
    .center { 
     text-align: center; 
    h1 { 
     margin-bottom: 10px; 
    } 
    } 
    /* typography */ 
    h1, h2, h3, h4, h5, h6 { 
     line-height: 1; 
    } 
    h1 { 
     font-size: 3em; 
     letter-spacing: -2px; 
     margin-bottom: 30px; 
     text-align: center; 
     } 
    h2 { 
     font-size: 1.2em; 
     letter-spacing: -1px; 
     margin-bottom: 30px; 
     text-align: center; 
     font-weight: normal; 
     color: #999; 
    } 
    p{ 
    font-size: 1.1em; line-height: 1.7em; 
    } 
    /* header */ 
    #logo { 
     float: left; 
     margin-right: 10px; 
     font-size: 1.7em; 
     color: #fff; 
     text-transform: uppercase; 
     letter-spacing: -1px; 
     padding-top: 9px; 
     font-weight: bold; 
     line-height: 1; 
    &:hover { 
     color: #fff; 
     text-decoration: none; 
    } 
    } 
    /* footer */ 
    footer { 
     margin-top: 45px; 
     padding-top: 5px; 
     border-top: 1px solid #eaeaea; 
     color: #999; 
    } 
    footer a { 
     color: #555; 
    &:hover { 
     color: #222; 
    } 
    } 
    footer small { 
     float: left; 
    } 
    footer ul { 
     float: right; 
     list-style: none; 
    } 
    footer ul li { 
    float: left; 
    margin-left: 10px; 
     } 
    } 
    }

來源

2014-08-29 Snailwalker

刪除最後兩行'}'。 – 2014-08-29 10:20:46

非常感謝，它工作，但爲什麼？教程中有兩行。我很困惑。 – Snailwalker 2014-08-29 10:29:12

使用propper文本縮進來查看選擇器的深度。也許這是教程中的錯誤，或者一部分錯過了。 – 2014-08-29 10:30:49

你有兩個'}'在文件的末尾，你不需要。正確的文件是：

@import "bootstrap"; 
/* universal */ 
html { 
    overflow-y: scroll; 
} 

body { 
    padding-top: 60px; 
} 

section { 
    overflow: auto; 
} 

textarea { 
    resize: vertical; 
} 

.center { 
    text-align: center; 
    h1 { 
    margin-bottom: 10px; 
    } 
} 

/* typography */ 
h1, h2, h3, h4, h5, h6 { 
    line-height: 1; 
} 

h1 { 
    font-size: 3em; 
    letter-spacing: -2px; 
    margin-bottom: 30px; 
    text-align: center; 
} 

h2 { 
    font-size: 1.2em; 
    letter-spacing: -1px; 
    margin-bottom: 30px; 
    text-align: center; 
    font-weight: normal; 
    color: #999; 
} 

p{ 
    font-size: 1.1em; line-height: 1.7em; 
} 

/* header */ 
#logo { 
    float: left; 
    margin-right: 10px; 
    font-size: 1.7em; 
    color: #fff; 
    text-transform: uppercase; 
    letter-spacing: -1px; 
    padding-top: 9px; 
    font-weight: bold; 
    line-height: 1; 
    &:hover { 
    color: #fff; 
    text-decoration: none; 
    } 
} 

/* footer */ 
footer { 
    margin-top: 45px; 
    padding-top: 5px; 
    border-top: 1px solid #eaeaea; 
    color: #999; 
} 

footer a { 
    color: #555; 
    &:hover { 
    color: #222; 
    } 
} 

footer small { 
    float: left; 
} 

footer ul { 
    float: right; 
    list-style: none; 
} 

footer ul li { 
    float: left; 
    margin-left: 10px; 
}

來源

2014-08-29 10:28:51 epergo

非常感謝，這是在兩行的教程上，我如何避免這種問題？還是有任何工具可以檢測到錯誤？ – Snailwalker 2014-08-29 10:34:16

只要你'關閉'一個括號，對自己說：這個括號關閉這一個（知道你的代碼），即使你正在跟隨一個教程，複製但自己寫代碼（而不是ctrl + c和ctrl + v）。如果您使用Sublime Text，則可以安裝BracketHighlighter插件，這種方式更容易檢查代碼中的這種類型的問題。並正確縮進！ – epergo 2014-08-29 10:46:22

真棒，非常感謝你！ – Snailwalker 2014-08-29 11:10:38

編譯爲CSS時發生sass錯誤

回答

相關問題