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.
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.
精彩评论