middleman-oulu 0.5.10

data/assets/stylesheets/settings/mixins/_basic-font.css.sass

@@ -0,0 +1,45 @@
+=basic-font($text-rendering: true)
+  font-family: $basic-sans-serif
+  *font-family: $basic-legacy-ie-sans-serif
+  @if $text-rendering
+    text-rendering: optimizelegibility
+
+=sans-serif($text-rendering: true)
+  font-family: $basic-sans-serif
+  *font-family: $basic-legacy-ie-sans-serif
+  @if $text-rendering
+    text-rendering: optimizelegibility
+
+=bold-ja($text-rendering: true)
+  font-family: $basic-bold-sans-serif
+  *font-family: $basic-legacy-ie-sans-serif
+  font-weight: bold
+  @if $text-rendering
+    text-rendering: optimizelegibility
+
+=serif($text-rendering: true)
+  font-family: $basic-serif
+  *font-family: $basic-legacy-ie-sans-serif
+  @if $text-rendering
+    text-rendering: optimizelegibility
+
+=is-ja
+  &.is-ja
+    @content
+
+=is-bold-ja
+  &.is-bold-ja
+    @content
+
+=webfont-ja-sans-selif
+  @if $fw == 'bold' or $fw > 500
+    +is-bold-ja
+      +basic-bold-font
+  @else
+    +is-ja
+      +basic-font
+
+=clear-type
+  +transform-origin(0, 0)
+  +scale(1, 1.01)
+  -ms-transform: scale(1, 1.02)

data/assets/stylesheets/settings/mixins/_block.css.sass

@@ -0,0 +1,30 @@
+=size($values)
+  @if equal_nth($values, 2)
+    +rem('height', nth($values, 1))
+    +rem('width', nth($values, 2))
+  @else
+    +rem('width', nth($values, 1))
+    +rem('height', nth($values, 1))
+
+=center-block($values)
+  $block-width: optional_nth($values, 1)
+  $block-height: optional_nth($values, 2)
+  $block-z-index: optional_nth($values, 3)
+  +size($block-height $block-width)
+  +fixed(left 50%, top 50%, $block-z-index)
+  +rem('margin-top', $block-height / 2 * -1)
+  +rem('margin-left', $block-width / 2 * -1)
+  +box-sizing(border-box)
+
+=square-block($values)
+  $square-block-size: optional_nth($values, 1)
+  $square-block-height: optional_nth($values, 2)
+  $square-block-line-height: optional_nth($values, 3)
+  +rem('width', $square-block-size)
+  +rem('height', if($square-block-height, $square-block-height, $square-block-size))
+  @if $square-block-line-height
+    +rem('line-height', $square-block-line-height)
+  @else if $square-block-height
+    +rem('line-height', $square-block-height)
+  @else
+    +rem('line-height', $square-block-size)

data/assets/stylesheets/settings/mixins/_border.css.sass

@@ -0,0 +1,28 @@
+=assign-border-position($border-position, $border-values)
+  #{if($border-position, border-#{$border-position}, border)}:
+    @for $i from 1 through length($border-values)
+      @if border-width(nth($border-values, $i))
+        +rem('width', nth($border-values, $i))
+      @else if border-style(nth($border-values, $i))
+        style: nth($border-values, $i)
+      @else if border-color(nth($border-values, $i))
+        color: nth($border-values, $i)
+
+// 使い方
+// +border(vertical left, solid white 4px)
+=border($value1: null, $value2: null)
+  @for $i from 1 through length($value1)
+    @if all(nth($value1, $i))
+      +assign-border-position(false, $value2)
+    @else if vertical(nth($value1, $i))
+      $border-positions: $vertical
+      @each $border-position in $border-positions
+        +assign-border-position($border-position, $value2)
+    @else if horizontal(nth($value1, $i))
+      $border-positions: $horizontal
+      @each $border-position in $border-positions
+        +assign-border-position($border-position, $value2)
+    @else if four_positions(nth($value1, $i))
+      $border-positions: nth($value1, $i)
+      @each $border-position in $border-positions
+        +assign-border-position($border-position, $value2)

data/assets/stylesheets/settings/mixins/_button-base.css.sass

@@ -0,0 +1,27 @@
+=button-base($font-size: 12px, $height: 30px, $font-weight: bold, $width: auto, $is-block: null, $is-center: null, $icon-font-size: 14px, $icon-position: null)
+  +rem('font-size', $font-size)
+  +rem('height', $height)
+  +rem('line-height', $height)
+  font-weight: $font-weight
+  +rem('width', $width)
+  text-decoration: none
+  +relative(1)
+  text-align: center
+  @if $is-block == "true"
+    display: block
+  @else
+    +inline-block
+  @if $is-center == "true"
+    +margin(horizontal, auto)
+  @if $icon-font-size
+    i
+      +text-block($icon-font-size, $height)
+      +rem('width', $height)
+      display: block
+      text-align: center
+    @if $icon-position == "left"
+      i
+        +absolute(left, 0, top, 0)
+    @else if $icon-position == "right"
+      i
+        +absolute(right, 0, top, 0)

data/assets/stylesheets/settings/mixins/_color.css.sass

@@ -0,0 +1,9 @@
+=rgba($foreground, $backdrop: white, $property: "background-color")
+  #{$property}: mix(fade-in($foreground, 1), $backdrop, percentage(opacity($foreground)))
+  // Browsers without color opacity
+  #{$property}: $foreground
+  // Decent browsers
+  #{$property}: mix(fade-in($foreground, 1), $backdrop, percentage(opacity($foreground)))\9
+  // IE8
+  @if $property == "background-color"
+    +rgba-background($foreground)

data/assets/stylesheets/settings/mixins/_filters.css.sass

@@ -0,0 +1,5 @@
+// https://gist.github.com/chriseppstein/2884618
+// 例 +filter(sepia(100%) hue-rotate(33deg) contrast(69%) unquote("saturate(2)"))
+
+=filter($var)
+	+experimental('filter', $var)

data/assets/stylesheets/settings/mixins/_form.css.sass

@@ -0,0 +1,7 @@
+=placeholder
+  &::-webkit-input-placeholder
+    @content
+  &:-moz-placeholder
+    @content
+  &.placeholder
+    @content

data/assets/stylesheets/settings/mixins/_grids.css.sass

@@ -0,0 +1,149 @@
+// Extra small screen / phone
+//** Deprecated `$screen-xs-min` as of v3.2.0
+$screen-xs-min: $screen-xs !default
+//** Deprecated `$screen-phone` as of v3.0.1
+$screen-phone: $screen-xs-min !default
+
+// Small screen / tablet
+$screen-sm-min: $screen-sm !default
+//** Deprecated `$screen-tablet` as of v3.0.1
+$screen-tablet: $screen-sm-min !default
+
+// Medium screen / desktop
+$screen-md-min: $screen-md !default
+//** Deprecated `$screen-desktop` as of v3.0.1
+$screen-desktop: $screen-md-min !default
+
+// Large screen / wide desktop
+$screen-lg-min: $screen-lg !default
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+$screen-lg-desktop: $screen-lg-min !default
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max: ($screen-sm-min - 1) !default
+$screen-sm-max: ($screen-md-min - 1) !default
+$screen-md-max: ($screen-lg-min - 1) !default
+
+// devise
+=screen-xs
+  @media only screen and (max-width: $screen-xs)
+    @content
+=screen-sm
+  @media only screen and (max-width: $screen-sm)
+    @content
+=screen-md
+  @media only screen and (max-width: $screen-md)
+    @content
+=screen-lg
+  @media only screen and (max-width: $screen-lg)
+    @content
+
+
+// カラムのラッパーのクラス名
+$row-class-name: '.row' !default
+// カラムのネームスペース ※classの".（カンマ）"もネームスペースの一部
+$column-namespace: '.col-' !default
+// オフセットカラムのネームスペース
+$column-offset-namespace: 'offset-' !default
+// ブレイクポイントごとのカラムのプレフィックスのネームスペース
+$break-point-xs-namespace: 'xs-' !default
+$break-point-sm-namespace: 'sm-' !default
+$break-point-md-namespace: 'md-' !default
+$break-point-lg-namespace: 'lg-' !default
+
+// ブレイクポイントを配列にする
+$break-points: $break-point-xs-namespace, $break-point-sm-namespace, $break-point-md-namespace, $break-point-lg-namespace
+
+// デバイスごとの media query を作る
+=break-points($break-point: $break-point-xs-namespace)
+  @if $screen-xs and $break-point == $break-point-xs-namespace
+    @content
+  @else if $screen-sm and $break-point == $break-point-sm-namespace
+    @media only screen and (min-width: $screen-xs)
+      @content
+  @else if $screen-md and $break-point == $break-point-md-namespace
+    @media only screen and (min-width: $screen-sm)
+      @content
+  @else if $screen-lg and $break-point == $break-point-lg-namespace
+    @media only screen and (min-width: $screen-md)
+      @content
+  @else if $screen-xl and $break-point == $break-point-xl-namespace
+    @media only screen and (min-width: $screen-lg)
+      @content
+
+// カラムのラッパーの設定
+#{$row-class-name}
+  // カラムのマージン分だけ両サイドにネガティブマージンを取る
+  +margin(horizontal, ($gutter-width / 2) * -1)
+  // clearfix
+  +rem('min-height', 1px)
+  &:before,
+  &:after
+    display: table
+    content: " "
+  &:after
+    clear: both
+
+// カラムの基本設定
+=column($number, $columns-gutter-width: $gutter-width)
+  +rem('width', 100 / $columns-count * $number * 1%)
+  +rem('min-height', 1px)
+  +padding(horizontal, $columns-gutter-width / 2)
+  float: left
+  +box-sizing(border-box)
+
+// カラムをサイズごとに作る
+@each $break-point in $break-points
+  +break-points(#{$break-point})
+    @for $i from 1 through $columns-count
+      #{$column-namespace}#{$break-point}#{$i}
+        +column($i)
+
+// オフセットカラムの基本設定
+=column-offset($number)
+  +rem('margin-left', 100 / $columns-count * $number * 1%)
+
+// オフセットカラムをサイズごとに作る
+@each $break-point in $break-points
+  +break-points(#{$break-point})
+    @for $i from 1 through $columns-count
+      #{$column-namespace}#{$break-point}#{$column-offset-namespace}#{$i}
+        +column-offset($i)
+
+=grid-columns($columns-gutter-width: $gutter-width, $grid-columns-row-class-name: '.row')
+  #{$grid-columns-row-class-name}
+    // カラムのマージン分だけ両サイドにネガティブマージンを取る
+    +margin(horizontal, ($columns-gutter-width / 2) * -1)
+    // clearfix
+    +rem('min-height', 1px)
+    &:before,
+    &:after
+      display: table
+      content: " "
+    &:after
+      clear: both
+  // カラムをサイズごとに作る
+  @each $break-point in $break-points
+    +break-points(#{$break-point})
+      @for $i from 1 through $columns-count
+        #{$column-namespace}#{$break-point}#{$i}
+          +column($i, $columns-gutter-width)
+
+=grid-column-offsets($columns-gutter-width: $gutter-width, $grid-columns-row-class-name: '.row')
+  #{$grid-columns-row-class-name}
+    // カラムのマージン分だけ両サイドにネガティブマージンを取る
+    +margin(horizontal, ($columns-gutter-width / 2) * -1)
+    // clearfix
+    +rem('min-height', 1px)
+    &:before,
+    &:after
+      display: table
+      content: " "
+    &:after
+      clear: both
+  // オフセットカラムをサイズごとに作る
+  @each $break-point in $break-points
+    +break-points(#{$break-point})
+      @for $i from 1 through $columns-count
+        #{$column-namespace}#{$break-point}#{$column-offset-namespace}#{$i}
+          +column-offset($i)

data/assets/stylesheets/settings/mixins/_html5-input-types.scss

@@ -0,0 +1,118 @@
+// https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_assign.scss
+
+@function assign-inputs($inputs, $pseudo: null) {
+  $list : ();
+
+  @each $input in $inputs {
+    $input: unquote($input);
+    $input: if($pseudo, $input + ":" + $pseudo, $input);
+    $list: append($list, $input, comma);
+  }
+
+  @return $list;
+}
+
+//************************************************************************//
+// Generate a variable ($all-text-inputs) with a list of all html5
+// input types that have a text-based input, excluding textarea.
+// http://diveintohtml5.org/forms.html
+//************************************************************************//
+$inputs-list: 'input[type="email"]',
+              'input[type="number"]',
+              'input[type="password"]',
+              'input[type="search"]',
+              'input[type="tel"]',
+              'input[type="text"]',
+              'input[type="url"]',
+
+              // Webkit & Gecko may change the display of these in the future
+              'input[type="color"]',
+              'input[type="date"]',
+              'input[type="datetime"]',
+              'input[type="datetime-local"]',
+              'input[type="month"]',
+              'input[type="time"]',
+              'input[type="week"]';
+
+$inputs-en-list: 'input[type="email"]',
+                 'input[type="number"]',
+                 'input[type="search"]',
+                 'input[type="tel"]',
+                 'input[type="url"]',
+
+                 // Webkit & Gecko may change the display of these in the future
+                 'input[type="color"]',
+                 'input[type="date"]',
+                 'input[type="datetime"]',
+                 'input[type="datetime-local"]',
+                 'input[type="time"]';
+
+
+// Bare inputs
+//************************************************************************//
+$all-text-inputs: assign-inputs($inputs-list);
+
+// English inputs
+//************************************************************************//
+$all-en-text-inputs: assign-inputs($inputs-en-list);
+
+// Hover Pseudo-class
+//************************************************************************//
+$all-text-inputs-hover: assign-inputs($inputs-list, hover);
+
+// Focus Pseudo-class
+//************************************************************************//
+$all-text-inputs-focus: assign-inputs($inputs-list, focus);
+
+
+
+// You must use interpolation on the variable:
+// #{$all-text-inputs}
+// #{$all-text-inputs-hover}
+// #{$all-text-inputs-focus}
+
+// Example
+//************************************************************************//
+//   #{$all-text-inputs}, textarea {
+//     border: 1px solid red;
+//   }
+
+
+
+//************************************************************************//
+// Generate a variable ($all-button-inputs) with a list of all html5
+// input types that have a button-based input, excluding button.
+//************************************************************************//
+$inputs-button-list: 'input[type="button"]',
+                     'input[type="reset"]',
+                     'input[type="submit"]';
+
+// Bare inputs
+//************************************************************************//
+$all-button-inputs: assign-inputs($inputs-button-list);
+
+// Hover Pseudo-class
+//************************************************************************//
+$all-button-inputs-hover: assign-inputs($inputs-button-list, hover);
+
+// Focus Pseudo-class
+//************************************************************************//
+$all-button-inputs-focus: assign-inputs($inputs-button-list, focus);
+
+// Active Pseudo-class
+//************************************************************************//
+$all-button-inputs-active: assign-inputs($inputs-button-list, active);
+
+
+
+// You must use interpolation on the variable:
+// #{$all-button-inputs}
+// #{$all-button-inputs-hover}
+// #{$all-button-inputs-focus}
+// #{$all-button-inputs-active}
+
+// Example
+//************************************************************************//
+//   #{$all-button-inputs}, button {
+//     border: 1px solid red;
+//   }

data/assets/stylesheets/settings/mixins/_ie-hacks.css.sass

@@ -0,0 +1,8 @@
++ie($versions: all)
+  @if $versions == 'all'
+    &.is-ie
+      @content
+  @else
+    @each $version in $versions
+      &.is-ie#{$version}
+        @content

data/assets/stylesheets/settings/mixins/_lines.css.sass

@@ -0,0 +1,18 @@
+=dotted-line($color: rgba(#000, 1.0), $stripe: null)
+  $stripe-width: if(length($stripe) >= 1, nth($stripe, 1), 1px)
+  $gatter-width: if(length($stripe) >= 2, nth($stripe, 2), 4px)
+  $size: if(length($stripe) >= 3, nth($stripe, 3), 1px)
+  +background-image(linear-gradient(left, color-stops($color, $color (strip_unit($stripe-width)/(strip_unit($stripe-width) + strip_unit($gatter-width)))*100%, transparent (strip_unit($stripe-width)/(strip_unit($stripe-width) + strip_unit($gatter-width)))*100%, transparent 100%)))
+  +background-size(($stripe-width + $gatter-width) ($stripe-width + $gatter-width))
+  +rem('height', $size)
+
+// http://codepen.io/anon/pen/tGhLp を改造
+=striped-line($stripe-color: #000000, $size: 20px)
+  @if length($stripe-color) == 1
+    +background-image(linear-gradient(-45deg, $stripe-color 25%, transparent 25%, transparent 50%, $stripe-color 50%, $stripe-color 75%, transparent 75%, transparent))
+  @else
+    $mix-stripe-color: darken(nth($stripe-color, 1), nth($stripe-color, 2))
+    +background-image(linear-gradient(-45deg, $mix-stripe-color 25%, transparent 25%, transparent 50%, $mix-stripe-color 50%, $mix-stripe-color 75%, transparent 75%, transparent))
+    background-color: $background-color
+  +background-size($size $size)
+  +rem('height', $size)

data/assets/stylesheets/settings/mixins/_link.css.sass

@@ -0,0 +1,11 @@
+=block-link
+  display: block
+  text-decoration: none
+  
+=hover-link-reverse($modifire-class: null)
+  text-decoration: underline
+  &:hover,
+  &:active
+    text-decoration: none
+  @if $modifire-class
+    #{$modifire-class}: none

data/assets/stylesheets/settings/mixins/_list.css.sass

@@ -0,0 +1,21 @@
+// +list(12px 24px, fa '\f192', 12px 3px 8px)
+=list($margins: null, $list-style: null, $icon-position: null)
+  +rem('margin-left', optional_nth($margins, 1))
+  +rem('margin-bottom', optional_nth($margins, 2))
+  content: nth($list-style, 1) == "fa"
+  @for $i from 1 through length($list-style)
+    @if list_style_type(nth($list-style, $i))
+      list-style-type: nth($list-style, $i)
+    @else if list_style_position(nth($list-style, $i))
+      list-style-position: nth($list-style, $i)
+    @else if nth($list-style, $i) == "fa"
+      list-style-type: none
+      >li
+        +relative
+        display: block
+        +rem('padding-left', optional_nth($icon-position, 1) + optional_nth($icon-position, 3))
+        &:before
+          +fa
+          +text-block(optional_nth($icon-position, 1) optional_nth($icon-position, 1))
+          content: '#{optional_nth($list-style, $i + 1)}'
+          +absolute(left 0, top optional_nth($icon-position, 2))

data/assets/stylesheets/settings/mixins/_margin-padding.css.sass

@@ -0,0 +1,69 @@
+=margin($value1, $value2: null)
+  @if number(nth($value1, 1)) or nth($value1, 1) == 'auto'
+    @if equal_nth($value1, 1)
+      +rem('margin', $value1)
+    @else if equal_nth($value1, 2)
+      +rem('margin-top', nth($value1, 1))
+      +rem('margin-bottom', nth($value1, 2))
+    @else if equal_nth($value1, 3)
+      +rem('margin-top', nth($value1, 1))
+      +rem('margin-bottom', nth($value1, 3))
+      +margin(horizontal, nth($value1, 2))
+    @else if equal_nth($value1, 4)
+      +rem('margin-top', nth($value1, 1))
+      +rem('margin-right', nth($value1, 2))
+      +rem('margin-bottom', nth($value1, 3))
+      +rem('margin-left', nth($value1, 4))
+  @else if length($value1) == 1 and nth($value1, 1) == 'vertical'
+    +rem('margin-top', if(list($value2), nth($value2, 1), $value2))
+    +rem('margin-bottom', if(list($value2),nth($value2, 2), $value2))
+  @else if length($value1) == 1 and nth($value1, 1) == 'horizontal'
+    +rem('margin-left', if(list($value2), nth($value2, 1), $value2))
+    +rem('margin-right', if(list($value2),nth($value2, 2), $value2))
+  @else
+    @each $position in $value1
+      @if $position == 'all'
+        +rem('margin', $value2)
+      @else if $position == 'vertical'
+        +rem('margin-top', $value2)
+        +rem('margin-bottom', $value2)
+      @else if $position == 'horizontal'
+        +rem('margin-left', $value2)
+        +rem('margin-right', $value2)
+      @else
+        +rem('margin-#{$position}', $value2)
+
+=padding($value1: null, $value2: null)
+  @if number(nth($value1, 1)) or nth($value1, 1) == 'auto'
+    @if equal_nth($value1, 1)
+      +rem('padding', $value1)
+    @else if equal_nth($value1, 2)
+      +rem('padding-top', nth($value1, 1))
+      +rem('padding-bottom', nth($value1, 2))
+    @else if equal_nth($value1, 3)
+      +rem('padding-top', nth($value1, 1))
+      +rem('padding-bottom', nth($value1, 3))
+      +padding(horizontal, nth($value1, 2))
+    @else if equal_nth($value1, 4)
+      +rem('padding-top', nth($value1, 1))
+      +rem('padding-right', nth($value1, 2))
+      +rem('padding-bottom', nth($value1, 3))
+      +rem('padding-left', nth($value1, 4))
+  @else if length($value1) == 1 and nth($value1, 1) == 'vertical'
+    +rem('padding-top', if(list($value2), nth($value2, 1), $value2))
+    +rem('padding-bottom', if(list($value2),nth($value2, 2), $value2))
+  @else if length($value1) == 1 and nth($value1, 1) == 'horizontal'
+    +rem('padding-left', if(list($value2), nth($value2, 1), $value2))
+    +rem('padding-right', if(list($value2),nth($value2, 2), $value2))
+  @else
+    @each $position in $value1
+      @if $position == 'all'
+        +rem('padding', $value2)
+      @else if $position == 'vertical'
+        +rem('padding-top', $value2)
+        +rem('padding-bottom', $value2)
+      @else if $position == 'horizontal'
+        +rem('padding-left', $value2)
+        +rem('padding-right', $value2)
+      @else
+        +rem('padding-#{$position}', $value2)

data/assets/stylesheets/settings/mixins/_overlay.css.sass

@@ -0,0 +1,5 @@
+=overlay($overlay-color: rgba(0, 0, 0, .4), $overlay-z-index: 10)
+  +absolute(left 0, top 0, $overlay-z-index)
+  width: 100%
+  height: 100%
+  +rgba-background($overlay-color)

data/assets/stylesheets/settings/mixins/_positions.css.sass

@@ -0,0 +1,28 @@
+=position-list($value1, $value2, $value3, $value4, $value5)
+  $values: $value1 $value2 $value3 $value4 $value5
+  @each $value in $values
+    @if optional_nth($value, 2)
+      +rem(nth($value, 1), nth($value, 2))
+    @else
+      z-index: nth($value, 1)
+
+=absolute($value1: null, $value2: null, $value3: null, $value4: null, $value5: null)
+  position: absolute
+  +position-list($value1, $value2, $value3, $value4, $value5)
+
+=fixed($value1: null, $value2: null, $value3: null, $value4: null, $value5: null)
+  position: fixed
+  +position-list($value1, $value2, $value3, $value4, $value5)
+
+=relative($value1: null, $value2: null, $value3: null, $value4: null, $value5: null)
+  position: relative
+  +position-list($value1, $value2, $value3, $value4, $value5)
+
+=top($position-value, $z-index: null)
+  +relative(top $position-value, $z-index)
+=bottom($position-value, $z-index: null)
+  +relative(bottom $position-value, $z-index)
+=left($position-value, $z-index: null)
+  +relative(left $position-value, $z-index)
+=right($position-value, $z-index: null)
+  +relative(right $position-value, $z-index)

data/assets/stylesheets/settings/mixins/_rem.css.sass

@@ -0,0 +1,56 @@
+// Baseline, measured in pixels
+// The value should be the same as the font-size value for the html element
+// If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px),
+// then the variable below would be 10px.
+// original https://github.com/bitmanic/rem
+// customize by machida
+
+$baseline-px: 10px !default
+
+=base-font-size
+  font-size: $baseline-px
+  font-size: strip_unit($baseline-px / 10) * 1rem
+
+=rem($property, $px-values, $important: null)
+  @if px($px-values) or list($px-values)
+    @if $property == "font-size" and $px-values < 10px
+      // 9px以下のfont-sizeを使う設定（IE8不可）
+      +base-font-size
+      +scale3d(strip_unit($px-values / strip_unit($baseline-px)), strip_unit($px-values/ strip_unit($baseline-px)), 1)
+      +transform-origin(0, 0)
+    @else
+      // Convert the baseline into rems
+      $baseline-rem: $baseline-px / 1rem
+      // remが使えないブラウザ用にpx版を出力
+      @if $important
+        #{$property}: $px-values !important
+      @else
+        #{$property}: $px-values
+      // remで出力
+      @if px($px-values) and $px-values >= 1
+        @if $important
+          #{$property}: $px-values / $baseline-rem !important
+        @else
+          #{$property}: $px-values / $baseline-rem
+      @else
+        // Create an empty list that we can dump values into
+        $rem-values: ()
+        @each $value in $px-values
+          @if px($value)
+            // If the value is zero or not a number, return it
+            @if strip_unit($value) == 0 or type-of( $value ) != "number"
+              $rem-values: append($rem-values, $value)
+            @else
+              $rem-values: append($rem-values, $value / $baseline-rem)
+          @else
+            $rem-values: append($rem-values, $value)
+        // Return the property and its list of converted values
+        @if $important
+          #{$property}: $rem-values !important
+        @else
+          #{$property}: $rem-values
+  @else
+    @if $important
+      #{$property}: $px-values !important
+    @else
+      #{$property}: $px-values