Gerillass
v2.1.0Type: Mixin
@include tablet();
* You can call mixins with or without the gls- namespace (e.g. @include gls-tablet();).
There will be times when you need to style elements for one particular tablet model only. The Tablet Sass mixin helps you do that.
Arguments
| Name | Type | Description |
|---|---|---|
$device | string | Accepts the name of a tablet model. Predefined values are iPadMini, iPad, iPadAir, iPadPro, Nexus7, Nexus9, Nexus10. |
$orientation | string | Accepts two values: portrait and landscape. The default value is portrait. |
String values can be passed with or without quotation marks.
Examples
First, call the mixin and pass only the $device model name. Unless you pass a value for $orientation, it will be portrait.
.element {
@include tablet(iPad) {
background-color: teal;
}
}@media only screen and (device-width: 810px) and (device-height: 1080px) 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.
.element {
@include tablet(Nexus10, landscape) {
background-color: teal;
}
}@media only screen and (device-width: 1280px) and (device-height: 800px) and (orientation: landscape) {
.element {
background-color: teal;
}
}