Skip to content

Instantly share code, notes, and snippets.

@KittyGiraudel
Created July 8, 2014 14:56
Show Gist options
  • Select an option

  • Save KittyGiraudel/89ae20d8d1928dfe7f06 to your computer and use it in GitHub Desktop.

Select an option

Save KittyGiraudel/89ae20d8d1928dfe7f06 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----
/**
* Base font size
*
* @type Number
*/
$base-font-size: 16px !default;
/**
* Base spacing unit
*
* @type Number
*/
$base-spacing-unit: 1rem !default;
/**
* Shortcut for half the base spacing unit
*
* @requires {variable} base-spacing-unit
*
* @type Number
*/
$half-spacing-unit: $base-spacing-unit / 2;
/**
* Defines whether rem values should have a px fallback.
*
* @type Bool
*/
$rem-fallback: true !default;
/**
* Spacing mixin
*
* @access private
*
* @requires {variable} rem-fallback
* @requires {variable} base-font-size
*
* @type Number
*/
@mixin spacing($spacing-type, $args) {
@if $rem-fallback {
$fallback: ();
$regular: ();
@each $value in $args {
@if type-of($value) == "number" and unit($value) == "px" {
$fallback: append($fallback, $value);
$regular: append($regular, $value / $base-font-size * 1rem);
}
@else if type-of($value) == "number" and unit($value) == "rem" {
$fallback: append($fallback, $value / 1rem * $base-font-size);
$regular: append($regular, $value);
}
@else {
$fallback: append($fallback, $value);
$regular: append($regular, $value);
}
}
#{$spacing-type}: $fallback;
#{$spacing-type}: $regular;
}
@else {
#{$spacing-type}: $args;
}
}
/**
* Short cut for `spacing(padding, ...)`
*
* @requires {mixin} spacing
*/
@mixin padding($args) {
@include spacing(padding, $args);
}
/**
* Short cut for `spacing(margin, ...)`
*
* @requires {mixin} spacing
*/
@mixin margin($args) {
@include spacing(margin, $args);
}
// Demo
el {
@include padding(0 $half-spacing-unit auto);
}
/**
* Base font size
*
* @type Number
*/
/**
* Base spacing unit
*
* @type Number
*/
/**
* Shortcut for half the base spacing unit
*
* @requires {variable} base-spacing-unit
*
* @type Number
*/
/**
* Defines whether rem values should have a px fallback.
*
* @type Bool
*/
/**
* Spacing mixin
*
* @access private
*
* @requires {variable} rem-fallback
* @requires {variable} base-font-size
*
* @type Number
*/
/**
* Short cut for `spacing(padding, ...)`
*
* @requires {mixin} spacing
*/
/**
* Short cut for `spacing(margin, ...)`
*
* @requires {mixin} spacing
*/
el {
padding: 0 8px auto;
padding: 0 0.5rem auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment