DEV Community

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

Posted on

Sass Media Basic

#css #scss #sass

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)