Context

index.html

<div class="box" data-device-medium>
...
</div>

<div class="box" data-device-large>
...
</div>

output.css

.box[data-device-medium] {
  margin-left: 10px;
  width: 100%;
  border-radius: 10px;
}

.box[data-device-large] {
  margin-left: 20px;
  width: 100%;
  border-radius: 15px;
}

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

$unit: 1px;
$item-context: ''; // Set here to make it available in entire scope - NOTE not sure if using global vars like this is good practice
$context: (
  device-large: (
    gutter-width: 20
  ),
  device-medium: (
    gutter-width: 10
  ),
  device-small: (
    gutter-width: 5
  )
);

@mixin context($item-context: '') {
  $item-context: $item-context;
};

@mixin gutter($gutter-width: 0){
  margin-left: map-get(map-get($context, $item-context), gutter-width) * $unit;
};

@mixin extent($extent: 1){
  width: $extent * 100%;
};

@mixin radius($radius: 0){
  border-radius: $radius * $unit;
};

.box[data-device-medium] {
  $item-context: 'device-medium';
  @include gutter(20);
  @include extent(1);
  @include radius(10);
  // Include media query in here
}

.box[data-device-large] {
  $item-context: 'device-large';
  @include gutter(20);
  @include extent(1);
  @include radius(15);
  // Include media query in here
}