My Sass compiler generated an overly large file for me, but it could be much smaller!! I checked the compiler settings and didn't find anything wrong! The issue might be with the compiler itself. It's also possible that there is a problem with my code.
Here is my SCSS file:
@mixin flex {
display: flex;
dynamic- { flex: 1 1 }
shrink- { flex: 0 1 }
fixed- { flex: 0 0 }
grow- { flex: 0 1 }
}
column- {
@include flex;
flex-direction: column;
}
row- {
@include flex;
flex-direction: row;
}
The compiled CSS output is as follows:
column- {
display: flex;
flex-direction: column;
}
column- dynamic- {
flex: 1 1;
}
column- shrink- {
flex: 0 1;
}
column- fixed- {
flex: 0 0;
}
column- grow- {
flex: 0 1;
}
row- {
display: flex;
flex-direction: row;
}
row- dynamic- {
flex: 1 1;
}
row- shrink- {
flex: 0 1;
}
row- fixed- {
flex: 0 0;
}
row- grow- {
flex: 0 1;
}
I've optimized my CSS to reduce redundancies:
column-, row- {
display: flex;
flex-direction: column;
}
column- dynamic-, row- dynamic- {
flex: 1 1;
}
column- shrink-, row- shrink- {
flex: 0 1;
}
column- fixed-, row- fixed- {
flex: 0 0;
}
column- grow-, row- grow- {
flex: 0 1;
}
I am using VSCode with the Linux Sass Live Compiler extension. Can anyone suggest a solution to this issue?