Skip to content

Instantly share code, notes, and snippets.

@hinok

hinok/SassMeister-input.scss

Last active April 7, 2017 10:45
Show Gist options
  • Save hinok/ccffc8c2408e3a119d75 to your computer and use it in GitHub Desktop.
Save hinok/ccffc8c2408e3a119d75 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hinok revised this gist Dec 15, 2016. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,9 @@
    //
    // I created standalone package, look here
    //
    // https://github.com/hinok/spejson
    //

    // ----
    // libsass (v3.0.2)
    // ----
  2. hinok revised this gist Dec 17, 2014. 1 changed file with 30 additions and 40 deletions.
    70 changes: 30 additions & 40 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -58,46 +58,36 @@ $screen-md-max: ($screen-lg-min - 1);
    // Mixin
    // ---------------------------------------------------------------
    @mixin responsive-margin-padding($scale) {
    .mt-xs { margin-top: round($margin-xs * $scale); }
    .mr-xs { margin-right: round($margin-xs * $scale); }
    .mb-xs { margin-bottom: round($margin-xs * $scale); }
    .ml-xs { margin-left: round($margin-xs * $scale); }
    .mt-sm { margin-top: round($margin-sm * $scale); }
    .mr-sm { margin-right: round($margin-sm * $scale); }
    .mb-sm { margin-bottom: round($margin-sm * $scale); }
    .ml-sm { margin-left: round($margin-sm * $scale); }
    .mt-md { margin-top: round($margin-md * $scale); }
    .mr-md { margin-right: round($margin-md * $scale); }
    .mb-md { margin-bottom: round($margin-md * $scale); }
    .ml-md { margin-left: round($margin-md * $scale); }
    .mt-lg { margin-top: round($margin-lg * $scale); }
    .mr-lg { margin-right: round($margin-lg * $scale); }
    .mb-lg { margin-bottom: round($margin-lg * $scale); }
    .ml-lg { margin-left: round($margin-lg * $scale); }
    .mt-xl { margin-top: round($margin-xl * $scale); }
    .mr-xl { margin-right: round($margin-xl * $scale); }
    .mb-xl { margin-bottom: round($margin-xl * $scale); }
    .ml-xl { margin-left: round($margin-xl * $scale); }
    .pt-xs { padding-top: round($margin-xs * $scale); }
    .pr-xs { padding-right: round($margin-xs * $scale); }
    .pb-xs {padding-bottom: round($margin-xs * $scale); }
    .pl-xs { padding-left: round($margin-xs * $scale); }
    .pt-sm { padding-top: round($margin-sm * $scale); }
    .pr-sm { padding-right: round($margin-sm * $scale); }
    .pb-sm {padding-bottom: round($margin-sm * $scale); }
    .pl-sm { padding-left: round($margin-sm * $scale); }
    .pt-md { padding-top: round($margin-md * $scale); }
    .pr-md { padding-right: round($margin-md * $scale); }
    .pb-md {padding-bottom: round($margin-md * $scale); }
    .pl-md { padding-left: round($margin-md * $scale); }
    .pt-lg { padding-top: round($margin-lg * $scale); }
    .pr-lg { padding-right: round($margin-lg * $scale); }
    .pb-lg {padding-bottom: round($margin-lg * $scale); }
    .pl-lg { padding-left: round($margin-lg * $scale); }
    .pt-xl { padding-top: round($margin-xl * $scale); }
    .pr-xl { padding-right: round($margin-xl * $scale); }
    .pb-xl {padding-bottom: round($margin-xl * $scale); }
    .pl-xl { padding-left: round($margin-xl * $scale); }

    $sizes: (
    xs: $margin-xs,
    sm: $margin-sm,
    md: $margin-md,
    lg: $margin-lg,
    xl: $margin-xl
    );

    $props: (
    m: margin,
    p: padding
    );

    $directions: (
    t: top,
    r: right,
    b: bottom,
    l: left
    );

    @each $prop-short, $prop in $props {
    @each $size-short, $size in $sizes {
    @each $direction-short, $direction in $directions {
    .#{$prop-short}#{$direction-short}-#{$size-short} {
    #{$prop}-#{$direction}: round($size * $scale);
    }
    }
    }
    }
    }


  3. hinok created this gist Dec 17, 2014.
    154 changes: 154 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,154 @@
    // ----
    // libsass (v3.0.2)
    // ----

    //
    // From less to sass.
    // Ported version of Responsive Margin & Padding Shortcuts
    // for Twitter Bootstrap 3.0
    //---------------------------------------------------------------
    //
    // Responsive Margin & Padding Shortcuts for Twitter Bootstrap 3.0
    // ---------------------------------------------------------------
    // This is an addition to Twitter Bootstrap that allows additional margin and padding shortcuts
    // for enhanced layout control purposes. It should be included after the bootstrap.less
    // import statement or precompiled as you see fit. It differs from bootstrap standards in
    // that for any given screen size it predetermines the margin/padding size. All you have to
    // do is specify the size you want xs,sm,md,lg, or xl. The exception is for items that you
    // want to be centered using auto left/right margins. This can be device responsive by
    // specifying mc-xs, mc-sm, mc-md, or mc-lg depending on when you want that behavior.

    // these are the base sizes
    // adjust to your preference
    // ---------------------------------------------------------------
    $margin-xs: 5px;
    $margin-sm: 10px;
    $margin-md: 15px;
    $margin-lg: 30px;
    $margin-xl: 50px;

    // these are the scale values for each device size
    // adjust to your preference
    // ---------------------------------------------------------------
    $margin-scale-xs: 0.75;
    $margin-scale-sm: 0.75;
    $margin-scale-md: 1;
    $margin-scale-lg: 1.5;

    // Defined breakpoints
    // ---------------------------------------------------------------

    $screen-xs: 480px;
    $screen-xs-min: 480px;

    $screen-sm: 768px;
    $screen-sm-min: 768px;

    $screen-md: 992px;
    $screen-md-min: 992px;

    $screen-lg: 1200px;
    $screen-lg-min: 1200px;

    // So media queries don't overlap when required, provide a maximum
    $screen-xs-max: ($screen-sm-min - 1);
    $screen-sm-max: ($screen-md-min - 1);
    $screen-md-max: ($screen-lg-min - 1);

    // Mixin
    // ---------------------------------------------------------------
    @mixin responsive-margin-padding($scale) {
    .mt-xs { margin-top: round($margin-xs * $scale); }
    .mr-xs { margin-right: round($margin-xs * $scale); }
    .mb-xs { margin-bottom: round($margin-xs * $scale); }
    .ml-xs { margin-left: round($margin-xs * $scale); }
    .mt-sm { margin-top: round($margin-sm * $scale); }
    .mr-sm { margin-right: round($margin-sm * $scale); }
    .mb-sm { margin-bottom: round($margin-sm * $scale); }
    .ml-sm { margin-left: round($margin-sm * $scale); }
    .mt-md { margin-top: round($margin-md * $scale); }
    .mr-md { margin-right: round($margin-md * $scale); }
    .mb-md { margin-bottom: round($margin-md * $scale); }
    .ml-md { margin-left: round($margin-md * $scale); }
    .mt-lg { margin-top: round($margin-lg * $scale); }
    .mr-lg { margin-right: round($margin-lg * $scale); }
    .mb-lg { margin-bottom: round($margin-lg * $scale); }
    .ml-lg { margin-left: round($margin-lg * $scale); }
    .mt-xl { margin-top: round($margin-xl * $scale); }
    .mr-xl { margin-right: round($margin-xl * $scale); }
    .mb-xl { margin-bottom: round($margin-xl * $scale); }
    .ml-xl { margin-left: round($margin-xl * $scale); }
    .pt-xs { padding-top: round($margin-xs * $scale); }
    .pr-xs { padding-right: round($margin-xs * $scale); }
    .pb-xs {padding-bottom: round($margin-xs * $scale); }
    .pl-xs { padding-left: round($margin-xs * $scale); }
    .pt-sm { padding-top: round($margin-sm * $scale); }
    .pr-sm { padding-right: round($margin-sm * $scale); }
    .pb-sm {padding-bottom: round($margin-sm * $scale); }
    .pl-sm { padding-left: round($margin-sm * $scale); }
    .pt-md { padding-top: round($margin-md * $scale); }
    .pr-md { padding-right: round($margin-md * $scale); }
    .pb-md {padding-bottom: round($margin-md * $scale); }
    .pl-md { padding-left: round($margin-md * $scale); }
    .pt-lg { padding-top: round($margin-lg * $scale); }
    .pr-lg { padding-right: round($margin-lg * $scale); }
    .pb-lg {padding-bottom: round($margin-lg * $scale); }
    .pl-lg { padding-left: round($margin-lg * $scale); }
    .pt-xl { padding-top: round($margin-xl * $scale); }
    .pr-xl { padding-right: round($margin-xl * $scale); }
    .pb-xl {padding-bottom: round($margin-xl * $scale); }
    .pl-xl { padding-left: round($margin-xl * $scale); }
    }


    // ** you shouldnt need to change anything below this point **
    // ---------------------------------------------------------------

    // these are the device-agnostic resets and centering
    .mc { margin-left: auto;
    margin-right: auto; }
    .mt-0 { margin-top: 0; }
    .mr-0 { margin-right: 0; }
    .mb-0 { margin-bottom: 0; }
    .ml-0 { margin-left: 0; }
    .pt-0 { padding-top: 0; }
    .pr-0 { padding-right: 0; }
    .pb-0 {padding-bottom: 0; }
    .pl-0 { padding-left: 0; }

    // what follows are all the different device size adjustments
    @media (max-width: #{$screen-xs-max}) {
    .mc-sm {
    margin-right: auto;
    margin-left: auto;
    }

    @include responsive-margin-padding($margin-scale-xs);
    }

    @media (min-width: #{$screen-sm}) and (max-width: #{$screen-sm-max}) {
    .mc-md {
    margin-right: auto;
    margin-left: auto;
    }

    @include responsive-margin-padding($margin-scale-sm);
    }

    @media (min-width: #{$screen-md}) and (max-width: #{$screen-md-max}) {
    .mc-lg {
    margin-right: auto;
    margin-left: auto;
    }

    @include responsive-margin-padding($margin-scale-md);
    }

    @media (min-width: #{$screen-lg}) {
    .mc-xl {
    margin-right: auto;
    margin-left: auto;
    }

    @include responsive-margin-padding($margin-scale-lg);
    }
    531 changes: 531 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,531 @@
    .mc {
    margin-left: auto;
    margin-right: auto; }

    .mt-0 {
    margin-top: 0; }

    .mr-0 {
    margin-right: 0; }

    .mb-0 {
    margin-bottom: 0; }

    .ml-0 {
    margin-left: 0; }

    .pt-0 {
    padding-top: 0; }

    .pr-0 {
    padding-right: 0; }

    .pb-0 {
    padding-bottom: 0; }

    .pl-0 {
    padding-left: 0; }

    @media (max-width: 767px) {
    .mc-sm {
    margin-right: auto;
    margin-left: auto; }

    .mt-xs {
    margin-top: 4px; }

    .mr-xs {
    margin-right: 4px; }

    .mb-xs {
    margin-bottom: 4px; }

    .ml-xs {
    margin-left: 4px; }

    .mt-sm {
    margin-top: 8px; }

    .mr-sm {
    margin-right: 8px; }

    .mb-sm {
    margin-bottom: 8px; }

    .ml-sm {
    margin-left: 8px; }

    .mt-md {
    margin-top: 11px; }

    .mr-md {
    margin-right: 11px; }

    .mb-md {
    margin-bottom: 11px; }

    .ml-md {
    margin-left: 11px; }

    .mt-lg {
    margin-top: 23px; }

    .mr-lg {
    margin-right: 23px; }

    .mb-lg {
    margin-bottom: 23px; }

    .ml-lg {
    margin-left: 23px; }

    .mt-xl {
    margin-top: 38px; }

    .mr-xl {
    margin-right: 38px; }

    .mb-xl {
    margin-bottom: 38px; }

    .ml-xl {
    margin-left: 38px; }

    .pt-xs {
    padding-top: 4px; }

    .pr-xs {
    padding-right: 4px; }

    .pb-xs {
    padding-bottom: 4px; }

    .pl-xs {
    padding-left: 4px; }

    .pt-sm {
    padding-top: 8px; }

    .pr-sm {
    padding-right: 8px; }

    .pb-sm {
    padding-bottom: 8px; }

    .pl-sm {
    padding-left: 8px; }

    .pt-md {
    padding-top: 11px; }

    .pr-md {
    padding-right: 11px; }

    .pb-md {
    padding-bottom: 11px; }

    .pl-md {
    padding-left: 11px; }

    .pt-lg {
    padding-top: 23px; }

    .pr-lg {
    padding-right: 23px; }

    .pb-lg {
    padding-bottom: 23px; }

    .pl-lg {
    padding-left: 23px; }

    .pt-xl {
    padding-top: 38px; }

    .pr-xl {
    padding-right: 38px; }

    .pb-xl {
    padding-bottom: 38px; }

    .pl-xl {
    padding-left: 38px; }
    }

    @media (min-width: 768px) and (max-width: 991px) {
    .mc-md {
    margin-right: auto;
    margin-left: auto; }

    .mt-xs {
    margin-top: 4px; }

    .mr-xs {
    margin-right: 4px; }

    .mb-xs {
    margin-bottom: 4px; }

    .ml-xs {
    margin-left: 4px; }

    .mt-sm {
    margin-top: 8px; }

    .mr-sm {
    margin-right: 8px; }

    .mb-sm {
    margin-bottom: 8px; }

    .ml-sm {
    margin-left: 8px; }

    .mt-md {
    margin-top: 11px; }

    .mr-md {
    margin-right: 11px; }

    .mb-md {
    margin-bottom: 11px; }

    .ml-md {
    margin-left: 11px; }

    .mt-lg {
    margin-top: 23px; }

    .mr-lg {
    margin-right: 23px; }

    .mb-lg {
    margin-bottom: 23px; }

    .ml-lg {
    margin-left: 23px; }

    .mt-xl {
    margin-top: 38px; }

    .mr-xl {
    margin-right: 38px; }

    .mb-xl {
    margin-bottom: 38px; }

    .ml-xl {
    margin-left: 38px; }

    .pt-xs {
    padding-top: 4px; }

    .pr-xs {
    padding-right: 4px; }

    .pb-xs {
    padding-bottom: 4px; }

    .pl-xs {
    padding-left: 4px; }

    .pt-sm {
    padding-top: 8px; }

    .pr-sm {
    padding-right: 8px; }

    .pb-sm {
    padding-bottom: 8px; }

    .pl-sm {
    padding-left: 8px; }

    .pt-md {
    padding-top: 11px; }

    .pr-md {
    padding-right: 11px; }

    .pb-md {
    padding-bottom: 11px; }

    .pl-md {
    padding-left: 11px; }

    .pt-lg {
    padding-top: 23px; }

    .pr-lg {
    padding-right: 23px; }

    .pb-lg {
    padding-bottom: 23px; }

    .pl-lg {
    padding-left: 23px; }

    .pt-xl {
    padding-top: 38px; }

    .pr-xl {
    padding-right: 38px; }

    .pb-xl {
    padding-bottom: 38px; }

    .pl-xl {
    padding-left: 38px; }
    }

    @media (min-width: 992px) and (max-width: 1199px) {
    .mc-lg {
    margin-right: auto;
    margin-left: auto; }

    .mt-xs {
    margin-top: 5px; }

    .mr-xs {
    margin-right: 5px; }

    .mb-xs {
    margin-bottom: 5px; }

    .ml-xs {
    margin-left: 5px; }

    .mt-sm {
    margin-top: 10px; }

    .mr-sm {
    margin-right: 10px; }

    .mb-sm {
    margin-bottom: 10px; }

    .ml-sm {
    margin-left: 10px; }

    .mt-md {
    margin-top: 15px; }

    .mr-md {
    margin-right: 15px; }

    .mb-md {
    margin-bottom: 15px; }

    .ml-md {
    margin-left: 15px; }

    .mt-lg {
    margin-top: 30px; }

    .mr-lg {
    margin-right: 30px; }

    .mb-lg {
    margin-bottom: 30px; }

    .ml-lg {
    margin-left: 30px; }

    .mt-xl {
    margin-top: 50px; }

    .mr-xl {
    margin-right: 50px; }

    .mb-xl {
    margin-bottom: 50px; }

    .ml-xl {
    margin-left: 50px; }

    .pt-xs {
    padding-top: 5px; }

    .pr-xs {
    padding-right: 5px; }

    .pb-xs {
    padding-bottom: 5px; }

    .pl-xs {
    padding-left: 5px; }

    .pt-sm {
    padding-top: 10px; }

    .pr-sm {
    padding-right: 10px; }

    .pb-sm {
    padding-bottom: 10px; }

    .pl-sm {
    padding-left: 10px; }

    .pt-md {
    padding-top: 15px; }

    .pr-md {
    padding-right: 15px; }

    .pb-md {
    padding-bottom: 15px; }

    .pl-md {
    padding-left: 15px; }

    .pt-lg {
    padding-top: 30px; }

    .pr-lg {
    padding-right: 30px; }

    .pb-lg {
    padding-bottom: 30px; }

    .pl-lg {
    padding-left: 30px; }

    .pt-xl {
    padding-top: 50px; }

    .pr-xl {
    padding-right: 50px; }

    .pb-xl {
    padding-bottom: 50px; }

    .pl-xl {
    padding-left: 50px; }
    }

    @media (min-width: 1200px) {
    .mc-xl {
    margin-right: auto;
    margin-left: auto; }

    .mt-xs {
    margin-top: 8px; }

    .mr-xs {
    margin-right: 8px; }

    .mb-xs {
    margin-bottom: 8px; }

    .ml-xs {
    margin-left: 8px; }

    .mt-sm {
    margin-top: 15px; }

    .mr-sm {
    margin-right: 15px; }

    .mb-sm {
    margin-bottom: 15px; }

    .ml-sm {
    margin-left: 15px; }

    .mt-md {
    margin-top: 23px; }

    .mr-md {
    margin-right: 23px; }

    .mb-md {
    margin-bottom: 23px; }

    .ml-md {
    margin-left: 23px; }

    .mt-lg {
    margin-top: 45px; }

    .mr-lg {
    margin-right: 45px; }

    .mb-lg {
    margin-bottom: 45px; }

    .ml-lg {
    margin-left: 45px; }

    .mt-xl {
    margin-top: 75px; }

    .mr-xl {
    margin-right: 75px; }

    .mb-xl {
    margin-bottom: 75px; }

    .ml-xl {
    margin-left: 75px; }

    .pt-xs {
    padding-top: 8px; }

    .pr-xs {
    padding-right: 8px; }

    .pb-xs {
    padding-bottom: 8px; }

    .pl-xs {
    padding-left: 8px; }

    .pt-sm {
    padding-top: 15px; }

    .pr-sm {
    padding-right: 15px; }

    .pb-sm {
    padding-bottom: 15px; }

    .pl-sm {
    padding-left: 15px; }

    .pt-md {
    padding-top: 23px; }

    .pr-md {
    padding-right: 23px; }

    .pb-md {
    padding-bottom: 23px; }

    .pl-md {
    padding-left: 23px; }

    .pt-lg {
    padding-top: 45px; }

    .pr-lg {
    padding-right: 45px; }

    .pb-lg {
    padding-bottom: 45px; }

    .pl-lg {
    padding-left: 45px; }

    .pt-xl {
    padding-top: 75px; }

    .pr-xl {
    padding-right: 75px; }

    .pb-xl {
    padding-bottom: 75px; }

    .pl-xl {
    padding-left: 75px; }
    }