Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
$screen-small-min: 480px;
$screen-medium-min: 768px;
$screen-large-min: 992px;
$screen-xlarge-min: 1200px;
$form-element-height: 42px;
/* be consistent with spacing to avoid random pixel adding. */
$scale: 8, 16, 32, 48;
$mx-rules: 'margin-left', 'margin-right';
$my-rules: 'margin-top', 'margin-bottom';
$ml-rules: 'margin-left';
$mr-rules: 'margin-right';
$mb-rules: 'margin-bottom';
$mt-rules: 'margin-top';
$px-rules: 'padding-left', 'padding-right';
$py-rules: 'padding-top', 'padding-bottom';
$pl-rules: 'padding-left';
$pr-rules: 'padding-right';
$pb-rules: 'padding-bottom';
$pt-rules: 'padding-top';
@mixin add-space-rule($rules, $space) {
@each $rule in $rules {
#{$rule}: #{nth($scale, $space)}px !important;
@mixin m($space) {
margin: #{nth($scale, $space)}px !important;
@mixin p($space) {
padding: #{nth($scale, $space)}px !important;
@mixin mx($space) {
@include add-space-rule($mx-rules, $space);
@mixin my($space) {
@include add-space-rule($my-rules, $space);
@mixin ml($space) {
@include add-space-rule($ml-rules, $space);
@mixin mr($space) {
@include add-space-rule($mr-rules, $space);
@mixin mt($space) {
@include add-space-rule($mt-rules, $space);
@mixin mb($space) {
@include add-space-rule($mb-rules, $space);
@mixin px($space) {
@include add-space-rule($px-rules, $space);
@mixin py($space) {
@include add-space-rule($py-rules, $space);
@mixin pt($space) {
@include add-space-rule($pt-rules, $space);
@mixin pt($space) {
@include add-space-rule($pt-rules, $space);
@mixin pl($space) {
@include add-space-rule($pl-rules, $space);
@mixin pr($space) {
@include add-space-rule($pr-rules, $space);
@mixin pb($space) {
@include add-space-rule($pb-rules, $space);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.