How do i get the same object with a class in SCSS?

Question

I have this code:

input[type="text"] {
    color: red;
    .blue {
        color: blue;
    }
}

That gives me this

input[type="text"] {
    color: red
}
input[type="text"] .blue {
    color: blue;
}

How do I get something like this?

input[type="text"] {
    color: red
}
input[type="text"].blue {
    color: blue;
}

Answer 1

You're looking for the parent selector (&):

input[type="text"] {
    color: red;
    &.blue {
        color: blue;
    }
}