advantages of nesting with SASS

Question

I use SASS for each project and I work modularly. I nest almost everything as I find a great advantage its organisation to style it in your scss file. I follow the rule in which I should not have more than 3 brackets in my nested elements.

But I find that maybe I'm overdoing it and I lost the grip of which is its real advantage. Here below I add an example in which I create a class which overrules the original CSS rules to change it's properties once clicked a button, that would be login-dropdown-open at the end of the code.

For my own organisation I would like to nest it this inside the login-dropdown, but I would get the following CSS output: login-dropdown.login-dropdown-open. This works but I don't think its correct.

Could somebody explain me some guidelines regarding this matter?

.login-dropdown{
    background: $grey-light-light;
    border: 0;
    @include box-sizing(border-box);
    display: block;
    height: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    position: relative;
    @include transition(all, 0.25s, ease);
    z-index: 1;

    label, input, a{
        display: block;
    }

    label{
        font-size: 2rem;
        line-height: 3rem;
    }

    input:not([type=submit]){
        border: 1px solid $mint-dark;
        @include box-sizing(border-box);
        font-size: 1.4rem;
        height: 3.5rem;
        margin: 0 0 2rem 0;
        padding: 0 1rem;
        width: 100%;
    }

    input[type=submit]{
        background: $mint-dark;
        width: 100%;
        border: 0;
        border-radius: 5px;
        color: $white-main;
        font-size: 1.6rem;
        margin: 0 0 2rem 0;
        height: 4rem;
    }
}

.login-dropdown-open{
    border: 1px solid $mint-dark;
    height: auto;
    opacity: 1;
    overflow: auto;
    padding: 1rem;
}

Fabrizio Calderan Fabrizio Calderan · Accepted Answer · 2014-04-07T12:36:26

I think you should insert the last rule like so:

.login-dropdown {

   ...

   &-open{
      border: 1px solid $mint-dark;
      height: auto;
      opacity: 1;
      overflow: auto;
      padding: 1rem;
   }
}

with the & parent reference

advantages of nesting with SASS

1 Answers