SCSS mixin isn't working for child selector

38 views Asked by At

I want to add a @media query mixin to the child selector using @include. However, it isn't compiling in CSS. I'm using VSCode and it isn't throwing any errors, it just simply isn't working. Below is the .grid parent style sheet with the relevant children

@use "../util" as u;

.grid 
{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 40px;
  padding-left: 7%;
  padding-right: 7%;
  max-width: 1000px;
  margin-inline: auto;


  
  @include u.breakpoints-up(large) {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    padding-left: 0%;
    padding-right: 0%;
  }

  &__main,
  &__sidebar {
    padding: 40px;
  }

  &__main {
    background-color: hsl(301, 36%, 69%);
  }

  &__sidebar {
    //Controls the alignment for mobile view
    background-color: hsl(223, 39%, 23%);
    @include u.breakpoints-down(medium) {
      text-align: center;
    }
  }
}

The page has two columns, __main and __sidebar. I want __sidebar to center text when it reaches a certain width-max. I've inspected the code and checked for overlap/cascading issues, but everything looks fine. The mixins are working, as I've used them for the default desktop view. It seems the problem is with the child selectors. Below is my _breakpoint sheet.

$breakpoints-up: (
  "medium": 43.75em,
  "large": 56.25em,
  "xlarge": 90em,
);

$breakpoints-down: (
  "small": 43.7485em,
  "medium": 56.24875em,
  "large": 89.99875em,
);



@mixin breakpoints-up($size) {
  @media (min-width: map-get($breakpoints-up, $size)) {
    @content;
  }
}

@mixin breakpoints-down($size) {
  @media (max-width: map-get($breakpoints-down, $size)) {
    @content;
  }
}

Edited to add: I moved the mixin from the UTIL folder into the _breakpoint file and the mixin is working. Are child selectors unable to locate external mixins because they are nested? Is there any way around this? Unless I'm using the mixin multiple times within the same file, the mixin is useless in this scenario.

Edit to add: After removing the mixin from the child selector and troubleshooting with the above steps, I moved the UTIL mixin BACK into the child selector and it's working now? I've been troubleshooting for a few days and nothing has worked until now. Leaving this up in case someone else runs into the same issue unless instructed otherwise.

0

There are 0 answers