Skip to content

Instantly share code, notes, and snippets.

@DLavin23
Created June 16, 2015 19:31
Show Gist options
  • Save DLavin23/41adee0e831a9b6b66da to your computer and use it in GitHub Desktop.
Save DLavin23/41adee0e831a9b6b66da to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
$gutter: 30px
$gutter-half: $gutter / 2
$baseline-step: 6px
$baseline-x-small: $baseline-step * 2 // 12px
$baseline-small: $baseline-step * 3 // 18px
$baseline-base: $baseline-step * 4 // 24px
$baseline-large: $baseline-step * 5 // 30px
$baseline-x-large: $baseline-step * 6 // 36px
$baseline-xx-large: $baseline-step * 7 // 42px
$font-size-base: 14px
@function remove-unit($num)
@return $num / ($num * 0 + 1)
// Mixin
=rem($property, $values)
$root: remove-unit($font-size-base)
$px-values: ()
$rem-values: ()
@each $value in $values
@if $value == 0 or type-of($value) != "number"
$px-values: append($px-values, $value)
$rem-values: append($rem-values, $value)
@else
$unit: unit($value)
$val: remove-unit($value)
@if $unit == "px"
$px-values: append($px-values, ($val + px))
$rem-values: append($rem-values, ($val / $root + rem))
@if $unit == "rem"
$px-values: append($px-values, ($val * $root + px))
$rem-values: append($rem-values, ($val + rem))
@if $rem-values == $px-values
#{$property}: $rem-values
@else
#{$property}: $px-values
#{$property}: $rem-values
=background-svg($file-name, $size...)
background-image: image-url("#{$file-name}.png")
background-image: image-url("#{$file-name}.svg")
@if length($size) > 0
+rem(background-size, $size)
.i-video-story-play
+background-svg("circle-play-btn-blue", 100% 100%)
background-repeat: no-repeat
+rem(height, $baseline-large)
+rem(margin, $baseline-small auto)
+rem(width, $gutter)
.i-video-story-play {
background-image: image-url("circle-play-btn-blue.png");
background-image: image-url("circle-play-btn-blue.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 30px;
height: 2.14286rem;
margin: 18px auto;
margin: 1.28571rem auto;
width: 30px;
width: 2.14286rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment