Sass :: SyntaxError in Static_pages # home - Invalid CSS After error "": when trying to add code to a CSS file
Anytime I add code to my CSS file. I am getting this error when working with 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>
I previously could add code to it without any error, but at some point I must have made a change somewhere that created this problem.
Here is the original CSS that I worked with that did not cause errors
@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;
}
This is what code I was trying to add what caused the error.
* {
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;
}
This code is not the only one causing the error. Any additional CSS makes me get the error.
What am I doing wrong? I can post the html code I am working with if needed.
source to share
I faced the same problem when using Middleman. The build process seems to be trying to apply a specific layout to all files in the source folder. A little search made me assume that the layout was applied even to complete the HTML test files present in bower components. As a result, tags from test files were tagged, nested within tags from my layout. I solved the problem by specifying a regex in config.rb that the layout will only apply to certain HTML files.
source to share