Mixins not working in Codepen

HTML-CSS
1

So, this is for a project I’m making on CodePen.

I’m trying to make mixins, but for some reason, they are not working.

Here’s the particular code where the mixins are applied.

@mixin center-section($vert-margin){
  margin: $vert-margin auto;
}

header{
  #page-title{
    width: max(100vw, var(--navboard-min-width));
  }
  #nav-board{
    @include center-section(10px);
    border: 5px solid black;
    border-radius: 10%;
    width: max(85vw, var(--navboard-min-width));
    ul{
      display: flex;
      justify-content: space-around;
    }
    ul > li {
      font-size: 3em;
      list-style: none;
      margin-left: -15px;
    }
  }
}

#cart-section{
  width: 75vw;
  @include center-section(10px);
  border: 3px solid black;
  background-color: white;
}

#card-section{
    @include center-section(20px);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    
    min-width: 200px;
    
  background-color: white;
}

Here’s also the link to my codepen.
https://codepen.io/CasualWanderer20XX/pen/emmGVVL

2

To clarify, I already added SASS, and nesting css tags (with their descendants) works.

3

Nvm, y’all. I found the solution.

I just found out about the css pre processor. :stuck_out_tongue: