Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

/* Red * /
$bgDefault      : #e74c3c;
$bgHighlight    : #c0392b;
$colDefault     : #ecf0f1;
$colHover       : #ffbbbc; 
/* Green */
$bgDefault      : #2ecc71;
$bgHighlight    : #27ae60;
$colDefault     : #ecf0f1;
$colHover       : #d1ffed; /*/
/* Purple * /
$bgDefault      : #9b59b6;
$bgHighlight    : #8e44ad;
$colDefault     : #ecf0f1;
$colHover       : #ecdbff; /*/
/* Orange * /
$bgDefault      : #e67e22;
$bgHighlight    : #d35400;
$colDefault     : #ecf0f1;
$colHover       : #ffe6d1; /*/


/* --- Style --- */
.navbar-default {
    background-color: $bgDefault;
    border-color: $bgHighlight;
    .navbar-brand {
        color: $colDefault;
        &:hover, &:focus {
            color: $colHover; }}
    .navbar-nav {
        > li {
            > a {
                color: $colDefault;
                &:hover, &:focus {
                    color: $colHover;   }}}
        .active {
            > a, > a:hover, > a:focus {
                color: $colHover;
                background-color: $bgHighlight; }}
        .open {
            > a, > a:hover, > a:focus {
                color: $colHover;
                background-color: $bgHighlight;
                .caret {
                    border-top-color: $colHover;
                    border-bottom-color: $colHover; }}}
        > .dropdown {
            > a {
                .caret {
                    border-top-color: $colDefault;
                    border-bottom-color: $colDefault; }
                &:hover, &:focus {
                    .caret {
                        border-top-color: $colHover;
                        border-bottom-color: $colHover; }}}}}
    .navbar-toggle {
        border-color: $bgHighlight;
        &:hover, &:focus {
            background-color: $bgHighlight; }
        .icon-bar {
            background-color: $colDefault; }}}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: $colDefault;
        &:hover, &:focus {
            color: $colHover;
            background-color: $bgHighlight; }}
}

SassMeister-output.css

/* Red * /
$bgDefault      : #e74c3c;
$bgHighlight    : #c0392b;
$colDefault     : #ecf0f1;
$colHover       : #ffbbbc; 
/* Green */
                           /*/
/* Purple * /
$bgDefault      : #9b59b6;
$bgHighlight    : #8e44ad;
$colDefault     : #ecf0f1;
$colHover       : #ecdbff; /*/
/* Orange * /
$bgDefault      : #e67e22;
$bgHighlight    : #d35400;
$colDefault     : #ecf0f1;
$colHover       : #ffe6d1; /*/
/* --- Style --- */
.navbar-default {
  background-color: #2ecc71;
  border-color: #27ae60;
}
.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  color: #d1ffed;
}
.navbar-default .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #d1ffed;
}
.navbar-default .navbar-nav .active > a, .navbar-default .navbar-nav .active > a:hover, .navbar-default .navbar-nav .active > a:focus {
  color: #d1ffed;
  background-color: #27ae60;
}
.navbar-default .navbar-nav .open > a, .navbar-default .navbar-nav .open > a:hover, .navbar-default .navbar-nav .open > a:focus {
  color: #d1ffed;
  background-color: #27ae60;
}
.navbar-default .navbar-nav .open > a .caret, .navbar-default .navbar-nav .open > a:hover .caret, .navbar-default .navbar-nav .open > a:focus .caret {
  border-top-color: #d1ffed;
  border-bottom-color: #d1ffed;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
  border-top-color: #ecf0f1;
  border-bottom-color: #ecf0f1;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #d1ffed;
  border-bottom-color: #d1ffed;
}
.navbar-default .navbar-toggle {
  border-color: #27ae60;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #27ae60;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #d1ffed;
    background-color: #27ae60;
  }
}