Generated by SassMeister.com.

input.scss

@mixin random-bgr(){
  background: rgb(random(255), random(255), random(255));
}
$num_colors: 20;
@for $i from 0 to $num-colors {
  container_#{$i} {
    @include random-bgr();
  }
}

[class^="pin_"] {
    background: red;
}
    
[class$="_btn_select"] {
    background: blue;
}

$flexConfig: '_sm' 24%, '_md' 49%, '_lg' 74%, '_xl' 99%;

.container {
    
    @each $tuple in $flexConfig {
        >[class$="#{nth($tuple, 1)}"] {
            // max-width: nth($tuple, 2);
            min-width: nth($tuple, 2);
            flex: 1 0 nth($tuple, 2);
            @include random-bgr();
        }
    } 
}

a {
    &:link, &:visited {
      color: rgba(0, 0, 0, 0.6);
      text-decoration: none;
    }
}

$page-header-height: 96px;
$header-height: 64px;
$shadow-height: 3px;


.mat-drawer-container {
height: calc(20vh - #{$page-header-height} - #{$header-height} - #{$shadow-height});
background: red;
    &--bordered {
        @extend .mat-drawer-container;
        border: 2px solid black;
    }
}
  
div[class^="attribute-"]>.title {
  color: red;
  background: rgba(45,45,45,.5);
}

.container {
    display: flex;
    flex-wrap: wrap;
    // gap: 6px 8px;
    gap: 12px 6px;
    margin: 8px;
    // justify-content: space-around;
    > div {
        box-sizing: border-box;
    }
}

markup.html

<div class="pin_md">PIN Medium</div>

<div class="md_btn_select">Medium BTN Select</div>

<div class="container">
    <div class="input_md">INPUT</div>
    <div class="input_md">INPUT</div>
    <div class="select select_lg">SELECT</div>
    <div class="input_sm">INPUT</div>
    <div class="datepicker_xl">DATEPICKER</div>
</div>

<div class="mat-drawer-container">mat container</div>

<div class="mat-drawer-container--bordered">mat container</div>



<div class="container">
    <div class="attribute-test1"><span class="title">Attribute Title 1</span></div>
    <div class="attribute-test2"><span class="title">Attribute Title 2</span></div>
    <div class="attribute-test3"><span class="title">Attribute Title 3</span></div>
</div>

output.css

container_0 {
  background: #7b8959;
}

container_1 {
  background: #c41b4d;
}

container_2 {
  background: #280dc1;
}

container_3 {
  background: #3a4898;
}

container_4 {
  background: #90ac2d;
}

container_5 {
  background: #21a8fc;
}

container_6 {
  background: #395706;
}

container_7 {
  background: #79488f;
}

container_8 {
  background: #40e3a6;
}

container_9 {
  background: #2b2084;
}

container_10 {
  background: #10bfcf;
}

container_11 {
  background: #4a20d4;
}

container_12 {
  background: #d8a6a3;
}

container_13 {
  background: #108dab;
}

container_14 {
  background: #eacfc3;
}

container_15 {
  background: #69265d;
}

container_16 {
  background: #3177cf;
}

container_17 {
  background: #46442f;
}

container_18 {
  background: #b855f3;
}

container_19 {
  background: #10b323;
}

[class^="pin_"] {
  background: red;
}

[class$="_btn_select"] {
  background: blue;
}

.container > [class$="_sm"] {
  min-width: 24%;
  flex: 1 0 24%;
  background: #388757;
}

.container > [class$="_md"] {
  min-width: 49%;
  flex: 1 0 49%;
  background: #746dbb;
}

.container > [class$="_lg"] {
  min-width: 74%;
  flex: 1 0 74%;
  background: #380efb;
}

.container > [class$="_xl"] {
  min-width: 99%;
  flex: 1 0 99%;
  background: #f6afe6;
}

a:link, a:visited {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

.mat-drawer-container, .mat-drawer-container--bordered {
  height: calc(20vh - 96px - 64px - 3px);
  background: red;
}

.mat-drawer-container--bordered {
  border: 2px solid black;
}

div[class^="attribute-"] > .title {
  color: red;
  background: rgba(45, 45, 45, 0.5);
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 6px;
  margin: 8px;
}

.container > div {
  box-sizing: border-box;
}

settings.json

{
  "sass": {
    "compiler": "libsass/3.5.5",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}