How to use brand header html in my WordPress site

Support
3

I get the HTML.

<header class="b-header clearfix"><div class="wrap"><div class="contents clearfix"><div class="title"><a href="http://www.example.com"><h2 id="brand-text-logo" class="text-logo">Site</h2></a></div><nav class="links"><ul class="nav nav-pills"><li><a class="widget-link" href="https://www.example.com" title="Link1"><span class="d-label">Link1</span></a></li></ul></nav><div class="panel clearfix"><ul class="icons clearfix"><li><a class="widget-link" href="https://twitter.com" title=""><i class="fa fa-twitter d-icon d-icon-twitter" aria-hidden="true"></i> <span class="d-label"></span></a></li></ul></div></div></div></header>

But how i compile SCSS? I tried compile that on Codepen but i think @import “theme_variables” line causes error.

@import "theme_variables";
.b-header {
  width: 100%;
  background-color: $tertiary;
  height: 48px;
  margin-bottom: 0; }

I want to create pure HTML CSS JS codes that component.