编译为 CSS 时出现 sass 错误 [关闭]答案

【问题标题】：sass errors while compiling to CSS [closed]编译为 CSS 时出现 sass 错误 [关闭]
【发布时间】：2014-10-23 07:58:40
【问题描述】：

我正在阅读关于将 CSS 编译到 Sass 的 ROR 教程，但我无法解决这个问题，这很神秘，我做了一些研究，这一切都无关紧要。非常感谢。

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

【问题讨论】：

去掉}的最后两行。
非常感谢，它成功了，但是为什么呢？教程书上有两行。我很困惑。
使用适当的文本缩进来查看选择器的深度。可能是教程中的错误或缺少某个部分。
请注意，通过 CSS 验证器运行它会为您发现错误。

标签： css ruby-on-rails sass

【解决方案1】：

文件末尾有两个不需要的“}”。正确的文件是：

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

【讨论】：

非常感谢，教程上有两行，我怎样才能避免这种问题？或者有什么工具可以检测到错误？
每次你'关闭'一个括号，对自己说：这个括号关闭这个（知道你的代码），即使你正在学习教程，也不要复制不必要的内容，复制但写自己编写代码（不是 ctrl +c 和 ctrl + v）。如果你使用 Sublime Text，你可以安装 BracketHighlighter 插件，这样更容易在你的代码中检查这类问题。并正确缩进！
太棒了，非常感谢！
我们更喜欢用简单的印刷错误（例如不匹配的括号/大括号）来结束问题，因为它们通常不会帮助未来的访问者。
我应该删除问题吗？