Sass (SCSS) - How to Add to Individual Values in a Class - sass

Question

I want to add 2px to the padding all around an element. So
padding: 10px 14px;
will become
padding: 14px 18px;. How can I achieve this?
Hopefully there is a more elegant solution than (psuedo-code):
$horizontal-padding: 10;
$vertical-padding: 14;
.normal-padding {
padding-top: $vertical-padding;
padding-right: $horizontal-padding;
padding-bottom: $vertical-padding;
padding-left: $horizontal-padding;
}
.extra-padding {
($horizontal-padding + 2 + px), ($vertical-padding + 2 + px);
}
Surely there must be a better way?

Answer 1

Actually, you can write that in a lot of ways. A solution similar to your code could be:
$vertical-padding: 14px;
$horizontal-padding: 10px;
.normal-padding {
padding: $vertical-padding $horizontal-padding;
}
.normal-padding {
$extra: 2px;
padding: #{$vertical-padding + $extra} #{$horizontal-padding + $extra};
}
A more dynamical way (not really useful if you only have these two variations though):
#mixin padding($extra : 0) {
padding: #{14 + $extra}px #{10 + $extra}px;
}
.normal-padding {
#include padding;
}
.extra-padding {
#include padding(2);
}
You can even change the code above to keep the $vertical-padding and $horizontal-padding variables. As I said, there are many ways to do it.

Answer 2

Just for fun. You can use css custom properties:
div {
border: 1px solid;
}
:root {
/* declare global variables */
--padding-x: 10px;
--padding-y: 10px;
}
.padded {
padding: var(--padding-y) var(--padding-x);
}
.extra {
/* redefine variables for `extra` elements */
--padding-x: 30px;
--padding-y: 30px;
}
<div class="padded"></div>
<div class="padded extra"></div>