Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.2.18)
// Compass (v0.12.4)
// Sass List-Maps (v0.9.7)
// ----

@import "sass-list-maps";

$baseline: 22px;
$category-font-size: 21px;
$sub-category-font-size: 19px;
$product-font-size: 13px;
$ingredient-list-font-size: 9.5px;

$formats: (
  format-a5 (
    page  (
      position relative,
      width 420px,
      height 595px,
      margin 0 auto
    ),

    content (
      position relative,
      top 60px,
      width 309px,
      height 482px,
      margin 0 auto
    ),

    content--cover (
      width 100%,
      height 100%
    ),

    content--backcover (
      width 100%,
      height 100%
    ),

    cover__bar-logo (
      position relative,
      top 102px,
      width 269px,
      height 119px,
      margin 0 auto
    ),

    cover__brand-logo (
      width 60px,
      height 60px,
      margin 342px auto 0
    ),

    cover__title (
      width 100%,
      height 40px,
      padding 0 18px,
      margin-top 18px,
      font-size 32px,
      text-align center
    ),

    custom-logo (
      position absolute,
      bottom 25px,
      left 179px,
      width 64px,
      height 28px
    ),

    big-headline (
      width 100%,
      height 40px,
      margin-top 28px,
      font-size $sub-category-font-size,
      line-height $baseline,
      text-transform none
    ),

    textbox (
      width 100%,
      height 105px,
      margin-top 40px,
      font-size $ingredient-list-font-size,
      line-height 12px
    ),

    photobox (
      width 100%,
      height 170px,
      margin-top 40px
    ),

    featured-special (
      position absolute,
      bottom 0,
      width 100%
    ),

    special-product (
      position relative,
      width 100%,
      padding 12px 12px 12px 140px,
      margin-top 90px,
      text-align right,
      z-index 0
    ),

    special-name (
      display block,
      font-size 18px,
      line-height $baseline
    ),

    special-ingredients (
      display block,
      height 36px,
      font-size 10px,
      line-height 12px,
      overflow hidden
    ),

    special-price (
      display block,
      font-size 13px,
      line-height $baseline
    ),

    special-image (
      position relative,
      width 157px,
      height 220px,
      float left,
      overflow hidden,
      z-index 1
    ),

    imprint (
      position absolute,
      top 383px,
      width 100%,
      text-align center
    ),

    disclaimer (
      position absolute,
      top 554px,
      width 100%,
      font-size 8px,
      line-height $ingredient-list-font-size,
      text-align center
    ),

    backcover__bar-logo (
      position absolute,
      top 296px,
      left 171px,
      width 72px,
      height 34px
    ),

    backcover__brand-logo (
      position absolute,
      top 447px,
      left 180px,
      width 60px,
      height 60px
    ),

    category (
      font-size $category-font-size,
      line-height $baseline,
      text-transform uppercase
    ),

    sub-category (
      font-size $sub-category-font-size,
      line-height $baseline,
      vertical-align -2px
    ),

    product (
    ),

    product-name (
      font-size $product-font-size,
      line-height $baseline,
      display inline-block
    ),

    product-price (
      float right,
      font-size $product-font-size,
      line-height $baseline
    ),

    product-ingredients (
      display block,
      height $baseline,
      padding-right 43px,
      font-size $ingredient-list-font-size,
      line-height $baseline / 2,
      vertical-align -1px
    )
  )
);

$scale: 1.27;

@each $binding_type in map-keys($formats) {
  .#{$binding_type} {
    $binding-type-settings: map-get($formats, $binding_type);

    @each $selector in map-keys($binding-type-settings) {
      $selector-settings: map-get($binding-type-settings, $selector);
      .#{$selector} {
        @each $property in map-keys($selector-settings) {
          $value: map-get-z($binding-type-settings, $selector, $property);

          @if type-of($value) != "number" {
            #{$property}: $value;
          }
          @else {
            $scaledValue: round($value * $scale);
            @if unit($value) == '%' { $scaledValue: $value; }
            #{$property}: $scaledValue;
          }
        }
      }
    }
  }
}

SassMeister-output.css

.format-a5 .page {
  position: relative;
  width: 533px;
  height: 756px;
  margin: 0;
}
.format-a5 .content {
  position: relative;
  top: 76px;
  width: 392px;
  height: 612px;
  margin: 0;
}
.format-a5 .content--cover {
  width: 100%;
  height: 100%;
}
.format-a5 .content--backcover {
  width: 100%;
  height: 100%;
}
.format-a5 .cover__bar-logo {
  position: relative;
  top: 130px;
  width: 342px;
  height: 151px;
  margin: 0;
}
.format-a5 .cover__brand-logo {
  width: 76px;
  height: 76px;
  margin: 434px;
}
.format-a5 .cover__title {
  width: 100%;
  height: 51px;
  padding: 0;
  margin-top: 23px;
  font-size: 41px;
  text-align: center;
}
.format-a5 .custom-logo {
  position: absolute;
  bottom: 32px;
  left: 227px;
  width: 81px;
  height: 36px;
}
.format-a5 .big-headline {
  width: 100%;
  height: 51px;
  margin-top: 36px;
  font-size: 24px;
  line-height: 28px;
  text-transform: none;
}
.format-a5 .textbox {
  width: 100%;
  height: 133px;
  margin-top: 51px;
  font-size: 12px;
  line-height: 15px;
}
.format-a5 .photobox {
  width: 100%;
  height: 216px;
  margin-top: 51px;
}
.format-a5 .featured-special {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.format-a5 .special-product {
  position: relative;
  width: 100%;
  padding: 15px;
  margin-top: 114px;
  text-align: right;
  z-index: 0;
}
.format-a5 .special-name {
  display: block;
  font-size: 23px;
  line-height: 28px;
}
.format-a5 .special-ingredients {
  display: block;
  height: 46px;
  font-size: 13px;
  line-height: 15px;
  overflow: hidden;
}
.format-a5 .special-price {
  display: block;
  font-size: 17px;
  line-height: 28px;
}
.format-a5 .special-image {
  position: relative;
  width: 199px;
  height: 279px;
  float: left;
  overflow: hidden;
  z-index: 1;
}
.format-a5 .imprint {
  position: absolute;
  top: 486px;
  width: 100%;
  text-align: center;
}
.format-a5 .disclaimer {
  position: absolute;
  top: 704px;
  width: 100%;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
}
.format-a5 .backcover__bar-logo {
  position: absolute;
  top: 376px;
  left: 217px;
  width: 91px;
  height: 43px;
}
.format-a5 .backcover__brand-logo {
  position: absolute;
  top: 568px;
  left: 229px;
  width: 76px;
  height: 76px;
}
.format-a5 .category {
  font-size: 27px;
  line-height: 28px;
  text-transform: uppercase;
}
.format-a5 .sub-category {
  font-size: 24px;
  line-height: 28px;
  vertical-align: -3px;
}
.format-a5 .product-name {
  font-size: 17px;
  line-height: 28px;
  display: inline-block;
}
.format-a5 .product-price {
  float: right;
  font-size: 17px;
  line-height: 28px;
}
.format-a5 .product-ingredients {
  display: block;
  height: 28px;
  padding-right: 55px;
  font-size: 12px;
  line-height: 14px;
  vertical-align: -1px;
}