Question

我正在编写有关将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;
      }
     }
    }

Answer 1

你有两个＆＃39;}＆＃39;在文件的末尾，您不需要。正确的文件是：

@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时出现错误

1 个答案: