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;
}


    // [class$="_md"] {
    //     width: 50%;
    //     background: green;
    // }
    
    // [class$="_lg"] {
    //     width: 75%;
    //     background: yellow;
    // }
    
    // [class$="_xl"] {
    //     width: 100%;
    //     background: orange;
    // }
    
$flexConfig: '_sm' 25%, '_md' 50%, '_lg' 75%, '_xl' 100%;

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

.container {
    >.input_md {
        border: 1px solid red;
    }
    
    @each $tuple in $flexConfig {
        >[class$="#{nth($tuple, 1)}"] {
            width: nth($tuple, 2);
            @include random-bgr();
        }
    } 
}

// :host {
//     @each $tuple in $flexConfig {
//     >[class$="#{nth($tuple, 1)}"] {
//         width: 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(80vh - #{$page-header-height} - #{$header-height} - #{$shadow-height});
    background: red;
  }
  
  div[class^="attribute-"]>.title {
      color: red;
  }

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="select select_lg">SELECT</div>
    <div class="datepicker_xl">DATEPICKER</div>
</div>

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

<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>

output.css

container_0 {
  background: #c48c4b;
}

container_1 {
  background: #5c2d7b;
}

container_2 {
  background: #a053fe;
}

container_3 {
  background: #63b3cb;
}

container_4 {
  background: #3febd7;
}

container_5 {
  background: #466e4e;
}

container_6 {
  background: #bcd75f;
}

container_7 {
  background: #c6f34b;
}

container_8 {
  background: #8af999;
}

container_9 {
  background: #b118ac;
}

container_10 {
  background: #5e4340;
}

container_11 {
  background: #7e79fd;
}

container_12 {
  background: #b3c0e3;
}

container_13 {
  background: #e44330;
}

container_14 {
  background: #e723f3;
}

container_15 {
  background: #1d02bc;
}

container_16 {
  background: #592b0b;
}

container_17 {
  background: #a87e67;
}

container_18 {
  background: #e92780;
}

container_19 {
  background: #ef085a;
}

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

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

.container > .input_md {
  border: 1px solid red;
}

.container > [class$="_sm"] {
  width: 25%;
  background: #4c1921;
}

.container > [class$="_md"] {
  width: 50%;
  background: #a7dff2;
}

.container > [class$="_lg"] {
  width: 75%;
  background: #e6add6;
}

.container > [class$="_xl"] {
  width: 100%;
  background: #da5d5c;
}

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

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

div[class^="attribute-"] > .title {
  color: red;
}

settings.json

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