For loop in SASS to create multiple classes

There are some classes that must have the same styling, their name is the same, just a number is different.

This is the original code:

.MuiBox-root.MuiBox-root-5.product-documents-box,
.MuiBox-root.MuiBox-root-6.product-documents-box,
.MuiBox-root.MuiBox-root-7.product-documents-box,
.MuiBox-root.MuiBox-root-8.product-documents-box,
.MuiBox-root.MuiBox-root-9.product-documents-box,
.MuiBox-root.MuiBox-root-10.product-documents-box {
  padding-bottom: 16px !important;
  padding-top: 16px !important;
}

It works fine but it doesn't look nice. So I'm trying to created a for loop in order to do this:

@for $i from 5 through 10 {
  .MuiBox-root.MuiBox-root-#{i}.product-documents-box {
    padding-bottom: 16px !important;
    padding-top: 16px !important;
  }
}

Is it something wrong? Because it doesn't work.