Skip to content

Instantly share code, notes, and snippets.

@zomars

zomars/SassMeister-input.scss

Created May 25, 2015 15:35
Download ZIP

Revisions

  1. zomars created this gist May 25, 2015.
    59 changes: 59 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    // ----
    // Sass (v3.4.12)
    // Compass (v1.0.3)
    // ----

    $spacing-unit: 24px;

    $spacing-unit-tiny: round(0.25 * $spacing-unit);
    $spacing-unit-small: round(0.5 * $spacing-unit);
    $spacing-unit-large: round(2 * $spacing-unit);
    $spacing-unit-huge: round(4 * $spacing-unit);

    @mixin sizes($properties...) {

    &--tiny {
    @each $property in $properties {
    #{$property}: $spacing-unit-tiny;
    }
    }

    &--small {
    @each $property in $properties {
    #{$property}: $spacing-unit-small;
    }
    }

    &--large {
    @each $property in $properties {
    #{$property}: $spacing-unit-large;
    }
    }

    &--huge {
    @each $property in $properties {
    #{$property}: $spacing-unit-huge;
    }
    }

    }

    .btn {
    display: block;
    color: white;
    background-color: green;
    padding-top: $spacing-unit-small;
    padding-bottom: $spacing-unit-small;
    @include sizes(padding-right, padding-left);
    }

    .box {
    display: block;
    padding: $spacing-unit;
    @include sizes(padding);
    }

    .page-title {
    line-height: $spacing-unit;
    @include sizes(line-height);
    }
    56 changes: 56 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    .btn {
    display: block;
    color: white;
    background-color: green;
    padding-top: 12px;
    padding-bottom: 12px;
    }
    .btn--tiny {
    padding-right: 6px;
    padding-left: 6px;
    }
    .btn--small {
    padding-right: 12px;
    padding-left: 12px;
    }
    .btn--large {
    padding-right: 48px;
    padding-left: 48px;
    }
    .btn--huge {
    padding-right: 96px;
    padding-left: 96px;
    }

    .box {
    display: block;
    padding: 24px;
    }
    .box--tiny {
    padding: 6px;
    }
    .box--small {
    padding: 12px;
    }
    .box--large {
    padding: 48px;
    }
    .box--huge {
    padding: 96px;
    }

    .page-title {
    line-height: 24px;
    }
    .page-title--tiny {
    line-height: 6px;
    }
    .page-title--small {
    line-height: 12px;
    }
    .page-title--large {
    line-height: 48px;
    }
    .page-title--huge {
    line-height: 96px;
    }