DEV Community

Alican Kılıç
Alican Kılıç

Posted on

Sass Media Basic

#scss #sass #css

Key Value
xs-phone 320px
phone 480px
tablet 768px
tablet-md 1024px
widescreen 1200px
widescreen-x 1440px
widescreen-xl 1920px

Min Width

 // min-width >=
  .row {
  width: 100%;
  height: 60px;
  position: relative;
  transition: all .2s ease-out;
  z-index: 8;
  @include media('>=Key') {
    margin: 0px;
    color: wheat;
  }
}
Enter fullscreen mode Exit fullscreen mode

output Css

.row {
  width: 100%;
  height: 60px;
  position: relative;
  transition: all .2s ease-out;
  z-index: 8; }
  @media (min-width: key) {
    .row {
      margin: 0px;
      color: wheat; }
       }
Enter fullscreen mode Exit fullscreen mode

Max Width

// max-width <=
  .row {
  width: 100%;
  height: 60px;
  position: relative;
  transition: all .2s ease-out;
  z-index: 8;
  @include media('<=Key') {
    margin: 0px;
    color: wheat;
  }
}
Enter fullscreen mode Exit fullscreen mode

output Css

.row {
  width: 100%;
  height: 60px;
  position: relative;
  transition: all .2s ease-out;
  z-index: 8; }
  @media (max-width: key) {
    .row {
      margin: 0px;
      color: wheat; }
       }
Enter fullscreen mode Exit fullscreen mode

Use

// Min >=
// Max <=
  @include media('>=Key or px')
Enter fullscreen mode Exit fullscreen mode

Github

include-media

Top comments (0)

Read next

ridoy_hasan profile image

Introduction to Tailwind CSS – A Utility-First Framework

Ridoy Hasan -

annavi11arrea1 profile image

Styling Choices and Why

Anna Villarreal -

shubhamjain profile image

I created a free CDN for social media icons

Shubham Jain -

yasminsardar profile image

How to Disable HTML Code without Deleting [3 Methods]

Yasmin Sardar -