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

试试这个，这是scss，而不是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;
                }
            }
        }
    }
}

如何使用SASS简化此CSS？

2 个答案: