Hvor Trenger Du Hekker Din Sass Stoppunkter?

0
42

Jeg elsker hekkende min @media query stoppunkter. Det er kanskje den viktigste funksjonen av Sass til meg. Kanskje jeg velge en metode og gjøre det som dette:

.element {
visning: rutenett;
grid-mal-kolonner: 100px 1fr;
@inkluderer stoppunkt(baby-bjørn) {
display: block;
}
}

Det er grei nok. Men hva hvis elementet har flere sub-elementer og stoppunkt påvirker dem så godt? Det finnes forskjellige tilnærminger, og jeg er aldri helt sikker på hvilken jeg burde gjøre.

Jeg kunne duplisere stoppunkt for hvert barn:

.foreldre {

@inkluderer stoppunkt(desktop) {
}

.barnet {
@inkluderer stoppunkt(desktop) {
}
}

.barn-2 {
@inkluderer stoppunkt(desktop) {
}
}

}

Den kompilerte CSS kommer ut til noe som dette:

@media-skjerm, og (min-width: 700px) {
.foreldre {
}
}
@media-skjerm, og (min-width: 700px) {
.forelder .barnet {
}
}
@media-skjerm, og (min-width: 700px) {
.forelder .barn-2 {
}
}

Eller, jeg kunne duplisere barn under første nestede stoppunkt:

.foreldre {

@inkluderer stoppunkt(desktop) {

.barnet {
}

.barn-2 {
}

}

.barnet {
}

.barn-2 {
}

}

Som resulterer i:

@media-skjerm, og (min-width: 700px) {
.forelder .barnet {
}
.forelder .barn-2 {
}
}
.forelder .barnet {
}
.forelder .barn-2 {
}

Eller jeg kunne gjøre en kombinasjon av de to. Ingen av dem føles spesielt stor på grunn av duplisering, men jeg er ikke sikker på at det er et perfekt svar her. Jeg feile litt mer på å duplisere media query, som det synes mindre utsatt for feil enn å duplisere velgere.