Question

无论何时我将代码添加到我的CSS文件中，在使用Bootstrap时都会出现此错误。

    Invalid CSS after "": expected selector or at-rule, was "<!DOCTYPE html>" (in /users/app_project/app/assests/stylesheets/custom.css.scss)

    Extracted source (around line #4):

    1: <!DOCTYPE html>
    2: <html>
    3:     <head>
    4:      <%= stylesheet_link_tag    "application", :media => "all" %>
    5:      <%= javascript_include_tag "application" %>
    6:      <%= csrf_meta_tags %>
    7:     </head>

我以前能够在没有任何错误的情况下为其添加代码，但在某些时候我必须在创建此问题的地方进行了更改。

以下是我正在使用的原始CSS，没有导致任何错误

     @import "bootstrap";

     /*universal*/

     html {
    overflow-y: scroll;
     }

    body {
    padding-top: 60px;
    }

    section {
    overflow: auto;
    }

    textarea {
    resize: vertical;
    }

    .center {
    text-align: center;
    }

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

    .container-fluid {
    background-color: #eee;
    }

    /* 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.7em;
    letter-spacing: -1px;
    margin-bottom: 30px;
    text-align: left;
    font-weight: normal;
    color: black;
    }

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

    #logo {
    float: left;
    margin-right: 10px;
    font-size: 1.7em;
    color: #d81010;
    text-transform: uppercase;
    letter-spacing: -1px;
    padding-top: 9px;
    font-weight: bold;
    line-height: 1;
    }

    #logo:hover {
    color: black;
    text-decoration: none;
    }

    li {
    text-align: left;
    }

    h1#class {
    color:#ff5a28;
    }

    .nav-center {
    color: blue;
    }

以下是我尝试添加的一些导致错误的代码。

    * {
    margin: 0;
    }

    html, bodY {
    height: 100%;
    }

    .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    }

    .footer, .push {
    height: 4em;
    }

    footer {
    background-color: #70ff00;
    }

上述代码不仅会导致错误。任何其他CSS都会导致我收到错误。

我做错了什么？如果需要，我也可以发布我正在使用的html代码。

Answer 1

我在使用Middleman时遇到了同样的问题。似乎构建过程试图将特定布局应用于源文件夹中的所有文件。一点点搜索让我推断出布局甚至被应用于完成凉亭组件中的HTML测试文件。因此，测试文件中的标签嵌套在我的布局的标签中。我通过在config.rb中指定一个正则表达式解决了这个问题，即布局只应用于特定的HTML文件。

Answer 2

检查您的代码。

html, bodY {
height: 100%;
}

在sass文件中。将此代码转换为

html, body {
height: 100%;
}

css的身体标签错误。这导致错误。

Static_pages中的Sass :: SyntaxError #home - 无效的CSS在“”之后：尝试将代码添加到CSS文件时出错

2 个答案: