CODEWITHSUNDEEP
sassmedia-queries
Sathya R
Sathya R

Reputation: 415

Adding media queries in SASS file

I've been using Bootstrap and SASS together for the first time in my new project.

I've just added the following lines in my SASS file and compiled with Prespos,

@media (min-width: $screen-sm-min){
#myemail
  padding-top: 20px
}

Surprisingly, it showed the following error,

Failed to compile style.sass | Error: Invalid CSS after "}": expected 1 selector or at-rule, was "{}"

13 |       padding-top: 20px

14 |   }

I've tried several workarounds and luckily got that compile successfully with the following code with a very minor change ( just moved the closing brace to previous line ),

@media (min-width: $screen-sm-min){
#myemail
  padding-top: 20px}

I wonder is that the way SASS work. Can you explain the specific reason behind this behaviour?

Upvotes: 1

Views: 429

Answers (1)

3rdthemagical
3rdthemagical

Reputation: 5350

You forget braces around #myemail selector.

@media (min-width: $screen-sm-min) {
  #myemail {
    padding-top: 20px;
  }
}

There are may be some expressions under one media query:

@media (min-width: $screen-sm-min) {
  .one {
    ...
  }

  .two {
    ...
  }

  .three {
    ...
  }
}

What's more you can white media query inside rule:

#myemail {
  padding-top: ...

  @media (min-width: $screen-sm-min) {
    padding-top: 20px;
  }
}

Upvotes: 1

Related Questions