compilation errors in sass with 2 instances of @media (max width / min)

Question

When writing the below under just as is, one in-between width media call on top of another in SASS I get a compilation error - error says 'Invalid CSS after "TCY": expected selector, was "@media <max-wid..."> - I don't understand what this means and have used the below in the past; I don't see anything wrong below, any advice?

@media (max-width:950px) and (min-width:800px) {
    .clickFacet  {
      width: 93%;
      position: absolute;
      left: 0;
      top: 40px;
      max-width: 600px;
      border: 1px solid red;
    }
}​

@media (max-width:1200px) and (min-width:1000px) {
    .clickFacet  {
      width: 100%;
      position: absolute;
      left: -1%;
      top: 40px;
      max-width: 600px;
      border: 1px solid red;
    }
}​

Note: // one will work perfect; if I comment out either one -- they are read, for some reason two isn't liked?

The error points me to the start of the second @media which ever is below.

Code before per request:

body{
    font-size: 18px;
}

Answer 1

I got an error when inserting it into a text editor, it seems that your closing bracket on your first media query was not right, maybe copied code. Anyways, copy, paste this into your css and it should solve the problem.

@media (max-width:950px) and (min-width:800px) {
    .clickFacet  {
      width: 93%;
      position: absolute;
      left: 0;
      top: 40px;
      max-width: 600px;
      border: 1px solid red;
    }
}