如何使用SASS簡化此CSS？

Question

我有這個CSS，我想使用sass盡可能地縮短。 我可以在任何這些項目上使用擴展/繼承或嵌套嗎？

謝謝！

.navbar-inverse .navbar-nav>li>a {
    color: #fff;
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.open>a {
    background-color: $activehoverblue;
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover {
    background-color: $activehoverblue;
}

.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus {
    background-color: $activehoverblue;
}

.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>li>a:hover {
    background-color: $hoverblue;
}

Answer 1

試試看，這是ssss，而不是sass：

.navbar-inverse .navbar-nav {
    li a {
        color: #fff;

        &:hover {
            background-color: $hoverblue;
        }
    }

    &.active a {
        background-color: $activehoverblue;

        &:focus, &:hover {
            background-color: $activehoverblue;
        }
    }

    &.open a {
        background-color: $activehoverblue;

        &:focus {
            background-color: $activehoverblue;
        }

        &:hover {
            background-color: $hoverblue;
        }
    }
}

或者您可能想嘗試一下：

.navbar-inverse .navbar-nav {
    li a {
        color: #fff;

        &:hover {
            background-color: $hoverblue;
        }
    }

    &.active a {
        background-color: $activehoverblue;

        &:focus, &:hover {
            **background-color: currentColor;**
        }
    }

    &.open a {
        background-color: $activehoverblue;

        &:focus {
            background-color: currentColor;
        }

        &:hover {
            background-color: $hoverblue;
        }
    }
}

Answer 2

這應該可以工作，您可以使用以下方法將CSS重新格式化為SASS： http ： //css2sass.herokuapp.com/

.navbar-inverse .navbar-nav >
  li > a
    color: #fff
  .active > a, .open > a
    background-color: $activehoverblue
  .active > a
    background-color: $activehoverblue
    &:focus, &:hover
      background-color: $activehoverblue
  .open > a
    background-color: $activehoverblue
    &:focus
      background-color: $activehoverblue
    &:hover
      background-color: $hoverblue
  li > a:hover
    background-color: $hoverblue

或這樣： http : //beautifytools.com/css-to-scss-converter.php

.navbar-inverse {
    .navbar-nav {
        >li {
            >a {
                color: #fff;
                &:hover {
                    background-color: $hoverblue;
                }
            }
        }
        >.active {
            >a {
                background-color: $activehoverblue;
                background-color: $activehoverblue;
                &:focus {
                    background-color: $activehoverblue;
                }
                &:hover {
                    background-color: $activehoverblue;
                }
            }
        }
        >.open {
            >a {
                background-color: $activehoverblue;
                background-color: $activehoverblue;
                &:focus {
                    background-color: $activehoverblue;
                }
                &:hover {
                    background-color: $hoverblue;
                }
            }
        }
    }
}