Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1 class="u-margin-4 u-margin-2-lg">Dit is een tekst</h1>

SassMeister-input.scss

// ----
// Sass (v3.5.6)
// Compass (vundefined)
// ----

$color-1: #333;
$color-2: #0073BD;

$numbers: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;

$orientations: left, right, top, bottom;

$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
);

@mixin breakpoint($breakpoint) {
  $breakpoint: map-get($breakpoints, $breakpoint);
  @media (min-width: $breakpoint) {
    @content;
  }
}

@mixin breakpoints($get-numbers: false) {
  @content;
  $breakpoints: map-keys($breakpoints);
  @each $breakpoint in $breakpoints {
    @include breakpoint($breakpoint) {
      @if $get-numbers == true {
        @each $number in $numbers {
          &-#{$number}-#{$breakpoint} {
            @content;
          }
        }
      } @else {
        &-#{$breakpoint} {
          @content;
        }
      }
    }
  }
}

.u-margin {
  @include breakpoints(true) {
    content: "Test to get the $number variable";
    // How can I get the $number variable here?
    //margin: $number * 1rem;
  }
}

SassMeister-output.css

.u-margin {
  content: "Test to get the $number variable";
}
@media (min-width: 576px) {
  .u-margin-0-sm {
    content: "Test to get the $number variable";
  }
  .u-margin-1-sm {
    content: "Test to get the $number variable";
  }
  .u-margin-2-sm {
    content: "Test to get the $number variable";
  }
  .u-margin-3-sm {
    content: "Test to get the $number variable";
  }
  .u-margin-4-sm {
    content: "Test to get the $number variable";
  }
  .u-margin-5-sm {
    content: "Test to get the $number variable";
  }
  .u-margin-6-sm {
    content: "Test to get the $number variable";
  }
  .u-margin-7-sm {
    content: "Test to get the $number variable";
  }
  .u-margin-8-sm {
    content: "Test to get the $number variable";
  }
  .u-margin-9-sm {
    content: "Test to get the $number variable";
  }
  .u-margin-10-sm {
    content: "Test to get the $number variable";
  }
}
@media (min-width: 768px) {
  .u-margin-0-md {
    content: "Test to get the $number variable";
  }
  .u-margin-1-md {
    content: "Test to get the $number variable";
  }
  .u-margin-2-md {
    content: "Test to get the $number variable";
  }
  .u-margin-3-md {
    content: "Test to get the $number variable";
  }
  .u-margin-4-md {
    content: "Test to get the $number variable";
  }
  .u-margin-5-md {
    content: "Test to get the $number variable";
  }
  .u-margin-6-md {
    content: "Test to get the $number variable";
  }
  .u-margin-7-md {
    content: "Test to get the $number variable";
  }
  .u-margin-8-md {
    content: "Test to get the $number variable";
  }
  .u-margin-9-md {
    content: "Test to get the $number variable";
  }
  .u-margin-10-md {
    content: "Test to get the $number variable";
  }
}
@media (min-width: 992px) {
  .u-margin-0-lg {
    content: "Test to get the $number variable";
  }
  .u-margin-1-lg {
    content: "Test to get the $number variable";
  }
  .u-margin-2-lg {
    content: "Test to get the $number variable";
  }
  .u-margin-3-lg {
    content: "Test to get the $number variable";
  }
  .u-margin-4-lg {
    content: "Test to get the $number variable";
  }
  .u-margin-5-lg {
    content: "Test to get the $number variable";
  }
  .u-margin-6-lg {
    content: "Test to get the $number variable";
  }
  .u-margin-7-lg {
    content: "Test to get the $number variable";
  }
  .u-margin-8-lg {
    content: "Test to get the $number variable";
  }
  .u-margin-9-lg {
    content: "Test to get the $number variable";
  }
  .u-margin-10-lg {
    content: "Test to get the $number variable";
  }
}
@media (min-width: 1200px) {
  .u-margin-0-xl {
    content: "Test to get the $number variable";
  }
  .u-margin-1-xl {
    content: "Test to get the $number variable";
  }
  .u-margin-2-xl {
    content: "Test to get the $number variable";
  }
  .u-margin-3-xl {
    content: "Test to get the $number variable";
  }
  .u-margin-4-xl {
    content: "Test to get the $number variable";
  }
  .u-margin-5-xl {
    content: "Test to get the $number variable";
  }
  .u-margin-6-xl {
    content: "Test to get the $number variable";
  }
  .u-margin-7-xl {
    content: "Test to get the $number variable";
  }
  .u-margin-8-xl {
    content: "Test to get the $number variable";
  }
  .u-margin-9-xl {
    content: "Test to get the $number variable";
  }
  .u-margin-10-xl {
    content: "Test to get the $number variable";
  }
}

SassMeister-rendered.html

<h1 class="u-margin-4 u-margin-2-lg">Dit is een tekst</h1>