So i have the following styling code:

.header{
   height: 60px;
   @include larger-than($breakpoint-md){
       height: 80px;
   }
   @include larger-than($breakpoint-xl){
       height: 120px;
   }
}
.content{
   height: calc(100vh - 60px);
   @include larger-than($breakpoint-md){
       height: calc(100vh - 80px);
   }
   @include larger-than($breakpoint-xl){
       height: calc(100vh - 120px);
   }
}
.spacer {
   padding-top: 60px;
   @include larger-than($breakpoint-md){
       padding-top: 80px;
   }
   @include larger-than($breakpoint-xl){
       padding-top: 120px;
   }
}

is there a way in SCSS so that i can achieve it with some minimal code and guaranteed sync between the value? maybe i am thinking on something like this:

function header-height(){
   return 60px;
   @include larger-than($breakpoint-md){
       return 80px;
   }
   @include larger-than($breakpoint-xl){
       return 120px;
   }
    
}

.header {
   height: header-height();
}
.content {
   height: calc(100vh - header-height());
}
.spacer {
   padding-top: header-height();
}