I am having a bit of trouble figuring out a mixin media query in my code. I created a scss rule for my hero section and included a mixin containing a grid. I created a _breakpoints.scss file which contains my media queries. I included my media query for xs small screens and instead of the media queries being compiled in correspondence to the screen size, it seemingly overrides my previous scss mixin. So the media query mixin is what gets stylized rather than the mixin for the grid layout. I have no idea why this is happening. Here is my code.
Portfolio page(where most of the page styling is made):
@use '../abstracts' as a;
.portfolio_heroSection{
@include a.gridHeader;
width:100%;
margin:0 auto;
background-color: a.$background-color6;
@include xs{
grid-template-column:1fr;
}
.portfolio_heroSection_left{
margin:0 auto;
h3{
@include a.fontHeader;
font-weight:550;
}
h1{
@include a.fontHeader;
font-size:3rem;
font-weight:550;
}
h2{
@include a.fontHeader;
font-weight:550;
}
}
.portfolio_heroSection_right{
margin:0 auto;
img{
border-radius:1rem;
}
}
}
My _breakpoint.scss file where my media queries are contained:
$breakpoints: (
"xs":0,
"sm":30rem,
"md":45rem,
"lg":60rem,
"xlg":75rem,
);
@mixin xs(){
@media (min-width: map-get($breakpoints,"xs")){
@content;
}
}
@mixin sm(){
@media (min-width: map-get($breakpoints,"sm")){
@content;
}
}
@mixin md(){
@media (min-width: map-get($breakpoints,"md")){
@content;
}
}
@mixin lg(){
@media (min-width: map-get($breakpoints,"lg")){
@content;
}
}
@mixin xlg(){
@media (min-width: map-get($breakpoints,"xlg")){
@content;
}
}
@mixin breakpoint($bp:0){
@media (min-width: $bp){
@content;
}
}
I tried different media query rules and watched multiple youtube videos and tutorials on how to structure your rules, and nothing has changed. I deleted the files and redid everything and nothing happened. Any help would be appreciated. Thank you.