CODEWITHSUNDEEP
ruby-on-railscsssass
kidcapital
kidcapital

Reputation: 5174

How to += in SCSS?

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.

Upvotes: 10

Views: 821

Answers (1)

Daniel Vandersluis
Daniel Vandersluis

Reputation: 94153

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.

Upvotes: 17

Related Questions