DRY Sass codes that only value changes - sass

Question

Using sass with rails. In the design, there is a pattern that the space shrink to half from desktop to mobile. Now it ends up like:
.my-page {
.class-a {
margin-top: 20px;
margin-bottom: 20px;
}
.class-b {
padding-top: 30px;
padding-bottom: 30px;
}
}
#media(min-width: 768px) {
.my-page {
.class-a {
margin-top: 40px;
margin-bottom: 40px;
}
.class-b {
padding-top: 60px;
padding-bottom: 60px;
}
}
}
Wondering is there a good way to DRY these? Don't wanna repeat writing same classes twice.

Answer 1

A nice way to DRY up your sass is using mixins.
#mixin page-spaces($margin, $padding) {
.my-page {
.class-a {
margin-top: $margin;
margin-bottom: $margin;
}
.class-b {
padding-top: $padding;
padding-bottom: $padding;
}
}
}
#include page-spaces(20px, 30px);
#media(min-width: 768px) {
#include page-spaces(40px, 60px);
}
SASS Reference on Mixins
Edit: In order to clarify the intended use of mixins, here's an extended version with multiple arguments (even a default):
#mixin awesome-page-stuff($stylish-margin, $cute-padding, $some-left-margin, $ugly-background: red) {
.my-page {
background: $ugly-background;
.class-a {
margin-top: $stylish-margin;
margin-bottom: $stylish-margin;
}
.class-b {
padding-top: $cute-padding;
padding-bottom: $cute-padding;
margin-left: $some-left-margin;
}
}
}
#include awesome-page-stuff(20px, 30px, 50px);
#media(min-width: 768px) {
#include awesome-page-stuff(40px, 60px, 200px, green);
}

Answer 2

you can create variables, something like this:
$primary-margin: 20px;
$primary-padding: 30px;
.my-page {
.class-a {
margin-top: $primary-margin;
margin-bottom: $primary-margin;
}
.class-b {
padding-top: $primary-padding;
padding-bottom: $primary-padding;
}
}
#media(min-width: 768px) {
.my-page {
.class-a {
margin-top: $primary-margin*2;
margin-bottom: $primary-margin*2;
}
.class-b {
padding-top: $primary-padding*2;
padding-bottom: $primary-padding*2;
}
}
}