sass to css in Magento 1.9

I am using Magento 1.9 and I am trying to edit the background color of the megamenu.

I navigated all the way to the .scss file but found a $menu-background at the place of the color hex..

 .main-menu {
    position: relative;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 99;
    background-color: $menu-background;

    &.isStuck {
      z-index: 9990;

      .nav .grid-full > li > a > span{
        margin: 10px 30px;
      }
      .nav .grid-full > .parent > a > span:after{
        top: 80%;
      }
    }
    }

at the beginning of the same scss file there was

@import “../includes”;

so I searched for that file and found:

@import “var”;

in that last file I found:

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

I edited the accent color 2 as follows : (blue instead of black)

$accent-color-2: #00427A;

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.

I then realized that the files i edited were scss files and not css (I have very low knowledge about scss files).

The big issue now is to convert edited scss files into css files.
I tried:
-scout
-koala
-npm sass

and in all cases the @import is failing and the css is messing up.

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?