编译为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错误

回答

相关问题