Gerillass: Smartphone Sass Mixin

Smartphone

Type: Mixin

@include smartphone();

* You can call mixins with or without the gls- namespace (e.g. @include gls-smartphone();).

There will be times when you need to style elements for one particular smartphone model only. The Smartphone Sass mixin helps you do that.

Name	Type	Description
`$device`	string	Accepts the name of a smartphone model. Predefined values are `iPhone4`, `iPhone-SE`, `iPhone5-SE`, `iPhone6`, `iPhone6-Plus`, `iPhone7`, `iPhone7-Plus`, `iPhone8`, `iPhone8-Plus`, `iPhone11`, `iPhone11-Pro`, `iPhone11-Pro-Max`, `iPhoneX`, `Galaxy-S7`, `Galaxy-S8`, `Galaxy-S8-Plus`, `Galaxy-S10`.
`$orientation`	string	Accepts two values: `portrait` and `landscape`. The default value is `portrait`.

String values can be passed with or without quotation marks.

First, call the mixin and pass only the $device model name. Unless you pass a value for $orientation, it will be portrait.

Sass

.element {
  @include smartphone(iPhone8) {
    background-color: teal;
  }
}

CSS

@media only screen and (device-width: 375px) and (device-height: 667px) and (orientation: portrait) {
  .element {
    background-color: teal;
  }
}

Now let's pass two arguments: one for the $device model name, and the other for the $orientation.

Sass

.element{
  @include smartphone(iPhone8-Plus, landscape){
    background-color: teal;
  }
}

CSS

@media only screen and (device-width: 736px) and (device-height: 414px) and (orientation: landscape) {
  .element {
    background-color: teal;
  }
}