

$background-color-list: #A6206A;

// Comentarios SASS no salen
/* Comentario CSS: sí que salgo compilado */

%div {
    display: inline-flex;
    color: #fff;
    padding: 1rem;
    font-family: 'Montserrat', sans-serif;
}
// div {
//     @extend .caja;
// }

%padding-div {
    padding: 1rem 2rem;
}

div {
    @extend %padding-div;
}


.abuelo {
    background-color: $background-color-list;
    &.abuela {
        border: 10px solid #299e7b;
    }
    .padre {
        background-color: #EC1C4B;
        .hijo {
            background-color: #299e7b;
            .nieto {
                background-color: #1a6e8f;       
                // p + span {
                //     color: red;
                // }
                // span + h5 {
                //     color: rebeccapurple;
                // }
                .abuela &{
                    font-size: 36px;
                }
                .bisnieta {
                    & + .bisnieto {
                    color: red;
                    background-color: lightsalmon;
                    }
                }      
            }
        }
    }
}
.abuela {
    background-color: #A6206A;
    .madre {
        background-color: #EC1C4B;
        .hija {
            background-color: #299e7b;
            .nieta {
                background-color: #1a6e8f;                             
                + .nieta {
                    border: 2px solid pink;
                }                                
            }
        }
    }
}

@mixin btn ($color, $bg-color, $padding, $border-radius) {
    color: $color;
    background-color: $bg-color;
    padding: $padding;
    border-radius: $border-radius;
}

.boton {
    @include btn (#fff, #333, 6px 12px, 12px);
    margin: 2rem;
    font-size: 1.5rem;
}