DEV Community

JWP
JWP

Posted on

SCSS Mixins for Cell Phones

Assume this SCSS code:

@mixin appHello( $fontSize, $paragraphWidth, $colWidth, $imageWidth:auto) { app-hello { margin-left: 3vw; @include paragraph( $fontSize, $paragraphWidth ); section { @include cols($colWidth); } article { @include article($imageWidth) } } }
Enter fullscreen mode Exit fullscreen mode

The parameters $fontSize and $paragraphWidth are for paragraph HtmlElements. We have another mixin named 'paragraph' which deals only with paragraphs.

Next we see

@include cols($colWidth);
Enter fullscreen mode Exit fullscreen mode

Which is a reference to the next mixin.

@mixin cols($vw: 30vw) { display: grid; gap: 2rem; grid-template-columns: repeat( auto-fit, minmax($vw, 1fr)); justify-self: left; }
Enter fullscreen mode Exit fullscreen mode

Cell Phone Sizes

//Any desktop size down to 1669px @include appHello( 1rem, 90vw, 30vw); //Any responsive size up to 1668px @media screen and (max-width:1668px) { @include appHello( 0.9rem, auto, 40vw); } @media screen and (max-width: 1366px) { @include appHello( 0.9rem, auto, 40vw); } //iPad Pro @media screen and (max-width: 1024px) { @include appHello( 0.9rem, auto, 40vw); } //iPad, Surface Duo @media screen and (max-width: 768px) { @include appHello( 0.9rem, auto, 90vw); } //iPhone x, MotoG4, Galaxy S5 //Pixel2, Pixel2XL, iPhone 5/SE, //iPhone 6/7/8, iPhone 6/7/8 plus, //iPhone X, Galaxy Fold @media screen and (max-width: 414px) { @include appHello( 0.9rem, auto, 100vw); }
Enter fullscreen mode Exit fullscreen mode

JWP2021

Top comments (0)