I'm using Prepros to compile my SCSS files to CSS, but it gives me an error when i try to use media queries. I tried Coala and Scout as well. If i just copy this code into output CSS it works. What am i doing wrong?
@media only screen and (max-width: 320px) {
body {
width: 320px;
}
.wrapper {
width: 320px;
margin: 0 auto;
}
.works-wrap {
width: 320px;
}
}
@media only screen and (min-width: 320px) and (max-width: 610px) {
.wrapper {
width: 320px;
margin: 0 auto;
}
.works-wrap {
width: 320px;
}
}
@media only screen and (min-width: 610px) and (max-width: 950px) {
.wrapper {
width: 650px;
margin: 4% auto;
}
.name {
width: 100%;
}
.works-wrap {
width: 650px;
margin-left: 10px;
}
}
@media only screen and (min-width: 950px) and (max-width: 1024px) {
.wrapper {
width: 950px;
margin: 4% auto;
}
.name {
width: 100%;
}
.works-wrap {
width: 950px;
}
}
Error code:
Error: Invalid CSS after "": expected selector, was "@media only scr..."
on line 169 of style.scss
164: width: 650px;
165: margin-left: 10px;
166: }
167: }
168:
169: @media only screen and (min-width: 950px) and (max-width: 1024px) {
170: .wrapper {
171: width: 950px;
172: margin: 4% auto;
173: }
174: .name {
Backtrace:
style.scss:169
c:/Program Files (x86)/Prepros/resources/app/ruby/ruby_gems/gems/sass-3.4.9/lib/sass/scss/parser.rb:1165:in `expected'
Try this it is a copy/paste mistake
@media only screen and (max-width: 320px) {
body {
width: 320px;
}
.wrapper {
width: 320px;
margin: 0 auto;
}
.works-wrap {
width: 320px;
}
}
@media only screen and (min-width: 320px) and (max-width: 610px) {
.wrapper {
width: 320px;
margin: 0 auto;
}
.works-wrap {
width: 320px;
}
}
@media only screen and (min-width: 610px) and (max-width: 950px) {
.wrapper {
width: 650px;
margin: 4% auto;
}
.name {
width: 100%;
}
.works-wrap {
width: 650px;
margin-left: 10px;
}
}
@media only screen and (min-width: 950px) and (max-width: 1024px) {
.wrapper {
width: 950px;
margin: 4% auto;
}
.name {
width: 100%;
}
.works-wrap {
width: 950px;
}
}
There is a hidden char just after the closing bracket of @media only screen and (min-width: 610px) and (max-width: 950px)
just delete it