CODEWITHSUNDEEP
htmlcsssass
Maere
Maere

Reputation: 49

How do I use @media in SASS?

I'm confused on how media queries are written in SASS. I've tried this line of code, but it throws me an error:

@media screen (max-width: 1550px) 
  #server-name
    left: 80%

Upvotes: 1

Views: 683

Answers (3)

Arthur
Arthur

Reputation: 5148

This is not SASS but pure CSS problem. You have a type error because the and keyword is missing into the media query.

In pure CSS (what you'll have). You want that

#server-name {
  position: absolute;
}

@media screen and (max-width: 650px) {
  #server-name {
    left: 80%;
    color: red;
  }
}
<div id="server-name">My name</div>

So in SASS 

@media screen (max-width: 1550px) 
  #server-name
    left: 80%

Upvotes: 1

Brad
Brad

Reputation: 1691

Maere here are a few examples of use in SASS. Note I am using SASS syntax and not SCSS 1st you create your variables for widths

$mobile: 568px
$tablet: 768px
$desktop: 1024px

Then you create your mixins

=desktop
  @media screen and (min-width: $desktop)
    @content

=tablet
   @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
    @content

=mobile
  @media screen and (max-width: $tablet - 1px)
    @content

Then you can use these mixins anyplace. Use them on containers, the body element, wherever needed

.m-boxes-box
  max-width: 500px
  flex: 1 2
  min-height: 250px
  background-color: $soft-peach
  margin: 10px 0

  +tablet
    min-width: 50%
  +mobile
    min-width: 100%

Upvotes: 1

kakamg0
kakamg0

Reputation: 1096

You forgot the and keyword. You can read more about it here

@media screen and (max-width: 1550px)
    #server-name
        left: 80%

Upvotes: 3

Related Questions