DEV Community

John Peters
John Peters

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

Discussion (0)