title: SASS variables not working
body: <p>I am new to SASS and I just simply follow the steps given on SASS guide website to install SASS but it is not working at all and does not convert my SASS into CSS, like i have taken a variable for colors but it did not work.I think I am missing some major part in this please anyone guide me so i can do my assignment further.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;SASS1&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="sass1.scss"/&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;div class="sub_container"&gt;
                  &lt;div class="first_box"&gt;
                      &lt;div class="inner_box"&gt;&lt;/div&gt;
                      &lt;div class="inner_box"&gt;&lt;/div&gt;
                      &lt;div class="inner_box"&gt;&lt;/div&gt;
                      &lt;div class="inner_box"&gt;&lt;/div&gt;
                      &lt;div class="inner_box"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="second_box"&gt;
                      &lt;div class="inner_box"&gt;&lt;/div&gt;
                      &lt;div class="inner_box"&gt;&lt;/div&gt;
                      &lt;div class="inner_box"&gt;&lt;/div&gt;
                      &lt;div class="inner_box"&gt;&lt;/div&gt;
                      &lt;div class="inner_box"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>SASS:</p>
  
  <pre><code>$black_color : #000;
  $voilet_color : #2A2E54;
  .container
  {
      width: 602px;
      height: 501px;
      border: 3px solid $black_color;
      background-color: $voilet_color;
      margin: auto;
      box-sizing: border-box;
  }
  .sub_container
  {
      width: 442px;
      height: 321px;
      border: 10px solid #C1F1FD;
      position: relative;
      top: 76px;
      left: 76px;
      -webkit-box-shadow: 0 0 1px #000, inset 0 0 1px #000;
      -moz-box-shadow: 0 0 1px #000, inset 0 0 1px #000;
      box-shadow: 0 0 1px #000, inset 0 0 1px #000;
  }
  .first_box, .second_box
  {
      width: 386px;
      height: 114px;
      border: 10px solid #FFF189;
      margin-top: 18px;
      margin-left: 18px;
  }
  .inner_box
  {
      width: 30px;
      height: 56px;
      border: 10px solid #FFB286;
      display: inline-block;
      margin-left: 19px;
      margin-top: 18px;
  }
  </code></pre>