Currently if I write this:
/* How I would like to structure my scss file */
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"a b"
"c d";
// Placing media query close to the other .grid code
@media (min-width: 600px){
grid-template-areas:
"a b c d";
grid-template-columns: repeat(4, 1fr);
}
&__cell {
&--a {
grid-area: a;
}
&--d {
grid-area: d;
}
}
}auto-prefixer outputs this:
/* How Autoprefixer outputs that code */
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr);
grid-template-areas: "a b"
"c d";
}
@media (min-width: 600px) {
.grid {
grid-template-areas: "a b c d";
-ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr);
}
.grid__cell--a {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.grid__cell--d {
-ms-grid-row: 1;
-ms-grid-column: 4;
}
}
.grid__cell--a {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: a;
}
.grid__cell--d {
-ms-grid-row: 2;
-ms-grid-column: 2;
grid-area: d;
}The issue is that the media query code is being overwritten by the default styles so the media query ends up having no effect in IE.
You can write the input code like this instead which fixes the issue:
/* How I have to structure my code to not cause the issue */
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"a b"
"c d";
&__cell {
&--a {
grid-area: a;
}
&--d {
grid-area: d;
}
}
// Placing media query AFTER the cell styles
@media (min-width: 600px){
grid-template-areas:
"a b c d";
grid-template-columns: repeat(4, 1fr);
}
}However it means you have to write half of your .grid styles at the top of the scss file and write the other half of the styles at the bottom. It is much nicer having them all centralised in one location.
I'd prefer to have the autoprefixer output for the first example to be this:
/* How I would like Autoprefixer to output the code from the 1st example */
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr);
grid-template-areas: "a b"
"c d";
}
@media (min-width: 600px) {
.grid {
grid-template-areas: "a b c d";
-ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr);
}
}
.grid__cell--a {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: a;
}
.grid__cell--d {
-ms-grid-row: 2;
-ms-grid-column: 2;
grid-area: d;
}
@media (min-width: 600px) {
.grid__cell--a {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.grid__cell--d {
-ms-grid-row: 1;
-ms-grid-column: 4;
}
}
Currently if I write this:
auto-prefixer outputs this:
The issue is that the media query code is being overwritten by the default styles so the media query ends up having no effect in IE.
You can write the input code like this instead which fixes the issue:
However it means you have to write half of your
.gridstyles at the top of the scss file and write the other half of the styles at the bottom. It is much nicer having them all centralised in one location.I'd prefer to have the autoprefixer output for the first example to be this: