在HBS文件中使用SCSS

Question

我们正在寻找一种在.hbs文件（把手）中包含SCSS内容的方法。

到目前为止，我们一直在使用以下结构：

   <div class="pricing_plans" id="nav-plans">
    <div class="encuadre_columnas">
      <div class="plan_column">
        <div class="plan_column_header">
          <h3>basic protection</h3>
          <h4>has your wordpress been hacked?</h4>
        </div>
        <div class="plan_column_price">
          <a href="">$119<sup>99</sup></a>
          <span>monthly billed or $1,200 yearly</span>
        </div>
        <ul>
          <li>automated vulnerabity scans</li>
          <li>periodict system supervision</li>
          <li>malware detection</li>
          <li>ransomware protection</li>
          <li>dedicated technical support</li>
          <li>cancelation at any time.</li>
        </ul>
        <a href="purchase_user.html" class="user_call">start membership</a>
      </div>
      <div class="plan_column">
        <div class="plan_column_header">
          <h3>Medium protection</h3>
          <h4>Recommended for middle size businesses</h4>
        </div>
        <div class="plan_column_price">
          <a href="">$299<sup>99</sup></a>
          <span>monthly billed or $3,000 yearly</span>
        </div>
        <ul>
          <li>automated vulnerabity scans</li>
          <li>periodict system supervision</li>
          <li>malware detection</li>
          <li>ransomware protection</li>
          <li>dedicated technical support</li>
          <li>cancelation at any time.</li>
        </ul>
        <a href="purchase_user.html" class="user_call">start membership</a>
      </div>
      <div class="plan_column">
        <div class="plan_column_header">
          <h3>advance protection</h3>
          <h4>a dedicated team of hackers *</h4>
        </div>
        <div class="plan_column_price">
          <a href="">$499<sup>99</sup></a>
          <span>monthly billed or $5,000 yearly</span>
        </div>
        <ul>
          <li>automated vulnerabity scans</li>
          <li>periodict system supervision</li>
          <li>malware detection</li>
          <li>ransomware protection</li>
          <li>dedicated technical support</li>
          <li>cancelation at any time.</li>
        </ul>
        <a href="purchase_user.html" class="user_call">start membership</a>
      </div>
      <br class="clear">
    </div>
  </div>

  <style media="screen">
    .pricing_plans {
      display: flex;
      background: #fff;
      border-top: 1px dashed #eee;
      margin: 20px 0;
      border-bottom: 1px dashed #eee;
      box-shadow: 0 0 30px 0 rgba(0, 0, 0, .05)
    }

    .encuadre_columnas {
      max-width: 1300px;
      margin: 50px auto;
      height: 100%;
      display: flex;
    }

    .plan_column {
      background: #ededed;
      margin: 10px;
      flex: 1;
      max-width: 380px;
      min-width: 360px;
      box-shadow: 0 0 30px 0 rgba(0, 0, 0, .05)
    }

    .plan_column ul {
      margin: 40px;
    }

    .plan_column ul li {
      list-style-image: url('media/icon_check_02.png');
      color: #676767;
      text-decoration: none;
      line-height: 26px;
      font-size: 14px;
    }

    .user_call {
      background: #ff2424;
      color: #fff;
      border: 0;
      padding: 15px 50px;
      border-radius: 5px;
      font-family: Questrial;
      margin: 24px auto;
      font-size: 15px;
      width: 120px;
      display: block;
      text-align: center;
    }

    .plan_column_header {}

    .plan_column_header h3 {
      font-size: 32px;
      text-align: center;
      padding: 18px 0;
      margin: 0;
    }

    .plan_column_header h4 {
      background: #ff3939;
      color: #fff;
      font-size: 24px;
      text-align: center;
      padding: 11px;
      font-weight: normal;
      margin: 0;
    }

    .plan_column_price {}

    .plan_column_price a {
      font-size: 110px;
      font-family: BigNoodleTitling;
      color: #414141;
      text-decoration: none;
      display: block;
      text-align: center;
    }

    .plan_column_price a sup {
      font-size: 40px;
      color: #999;
      text-decoration: underline;
      position: relative;
      top: -8px;
      left: 4px;
    }

    .plan_column_price span {
      display: block;
      margin: 0 auto;
      width: 270px;
      text-align: center;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      padding: 4px;
      font-family: BigNoodleTitling;
      font-size: 26px;
      color: #999;
    }

  </style>

如您所见，在<style>括号内，HTML首先出现，然后是常规CSS代码。我们希望保持相同的格式，因为它可以让我们快速制作原型并使用独立的/封装的代码模块。

但是似乎不可能使用SCSS代替CSS。我们相信也许可以使用一些Gulp模块来存档此结果？为了阅读，处理和编译css ...

任何建议都值得赞赏！