CODEWITHSUNDEEP
csssass
kwolf
kwolf

Reputation: 1

How can I simplify this CSS with SASS?

I have this CSS that I want to shorten as much as possible using sass. Can I use extend/inheritance or nesting on any of these items?

Thanks!

.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;
}

Upvotes: 0

Views: 84

Answers (2)

Radu Dascălu
Radu Dascălu

Reputation: 318

Try this, tho is scss, not 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;
        }
    }
}

Or you might want to give this a try:

.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;
        }
    }
}

Upvotes: 1

Kanstantsin Arlouski
Kanstantsin Arlouski

Reputation: 740

This should work, you can reformat your CSS into SASS using this: 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

Or this: 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;
                }
            }
        }
    }
}

Upvotes: 0

Related Questions