How to += in SCSS?

Question

Does anyone know how to += with SCSS?

Example:

.example {
    padding: 2px;
    &:hover {
        padding: current_padding + 3px; // OR
        padding+= 3px                   //... something like this
    }
}

I'm trying to get .example:hover to have 5px padding.

Answer 1

I don't think there's a way to do exactly what you want to in SCSS, but you could achieve the same effect by using variables:

SCSS

.example {
    $padding: 2px;
    padding: $padding;
    &:hover {
        padding: $padding + 3px;
    }
}

Compiles to

.example { padding: 2px; }
.example:hover { padding: 5px; }

See the documentation on variables and number operations.