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)
}
}
}
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);
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;
}
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);
}
JWP2021
Top comments (0)