Just dipping my toes into scss and I've got a quick question.
Here's the snippet of scss code I'm working with:
.page {
max-width: 1200px;
position: relative;
width: 100%;
ul{
background-color: black;
width: 30%;
height: 100px;
@media (max-width: 900px){
background-color: red;
}
}
ul li{
color: white;
@media (max-width: 900px){
color: black;
}
}
}
This is what it looks like in the css file:
.page {
max-width: 1200px;
position: relative;
width: 100%;
}
.page ul {
background-color: black;
width: 30%;
height: 100px;
}
@media (max-width: 900px) {
.page ul {
background-color: red;
}
}
.page ul li {
color: white;
}
@media (max-width: 900px) {
.page ul li {
color: black;
}
}
The burning question on my mind: can I consolidate those two media queries somehow while keeping them nested under each respective element?