title: sass to css in Magento 1.9
body: <p>I am using Magento 1.9 and I am trying to edit the background color of the megamenu.</p>
  
  <p>I navigated all the way to the .scss file but found a $menu-background at the place of the color hex.. </p>
  
  <pre><code> .main-menu {
      position: relative;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 99;
      background-color: $menu-background;
  
      &amp;.isStuck {
        z-index: 9990;
  
        .nav .grid-full &gt; li &gt; a &gt; span{
          margin: 10px 30px;
        }
        .nav .grid-full &gt; .parent &gt; a &gt; span:after{
          top: 80%;
        }
      }
      }
  </code></pre>
  
  <p>at the beginning of the same scss file there was </p>
  
  <blockquote>
    <p>@import "../includes";</p>
  </blockquote>
  
  <p>so I searched for that file and found:</p>
  
  <blockquote>
    <p>@import "var";</p>
  </blockquote>
  
  <p>in that last file I found:</p>
  
  <pre><code>// Accent Colors
  $accent-color-1: #ee372a;
  $accent-color-2: #000;
  $accent-color-3: #fff;
  
  //Menu
  $menu-background: $accent-color-2;
  $menu-item-color: #888888;
  $menu-item-color-act: #ffffff;
  $menu-item-bg-act: #232323;
  </code></pre>
  
  <p>I edited the accent color 2 as follows : (blue instead of black)</p>
  
  <blockquote>
    <p>$accent-color-2: #00427A;</p>
  </blockquote>
  
  <p>However now no matter how much I refresh the page , press CTRL + F5, flush the cache from magento -> System Cache Management. I cannot see the color changing to blue. I searched a lot but couldn't find a solution.</p>
  
  <p>I then realized that the files i edited were scss files and not css (I have very low knowledge about scss files).</p>
  
  <p>The big issue now is to convert edited scss files into css files.
  I tried:
  -scout
  -koala
  -npm sass</p>
  
  <p>and in all cases the @import is failing and the css is messing up.</p>
  
  <p>Is there a button to easily compile sass to css in magento or another way to do it that would not mess the css when it finds an @import?</p>