Skip to content

Instantly share code, notes, and snippets.

@jackmcpickle
Created January 19, 2015 00:01
Show Gist options
  • Save jackmcpickle/dbdd4e02809b6f2fcdfe to your computer and use it in GitHub Desktop.
Save jackmcpickle/dbdd4e02809b6f2fcdfe to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
.box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat risus vel sollicitudin sagittis. Phasellus elementum dui in eros pretium rhoncus. Ut tempus vitae purus auctor sodales. Donec luctus quis libero non blandit. Aenean vitae est sit amet quam rutrum interdum. Morbi sed ipsum nibh. Cras pellentesque mi non purus hendrerit vulputate. Morbi et dictum nisl, quis mattis dolor.
Aliquam fermentum massa justo, eu rhoncus erat lacinia quis. Vivamus ut libero non justo feugiat molestie vel sit amet nisl. Aenean non urna massa. Etiam vel bibendum velit. Nunc vehicula condimentum lorem ac tempor. Integer ultricies semper magna quis malesuada. In placerat aliquam ante id porttitor. Donec aliquet vulputate posuere. Sed non est neque. Ut id arcu nec tellus porttitor elementum at in justo. Nulla blandit metus id aliquam fringilla. Fusce vulputate
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----
@function change-values($start-value, $end-value) {
$multiple: length($start-value) != length($end-value);
$start-list: $start-value; $end-list: $end-value;
@if $multiple {
$start-list: split-list($start-value);
$end-list: split-list($end-value);
}
$change-list: compare-lists($start-list, $end-list);
@return $change-list;
}
@function compare-lists($start, $end) {
// combines lists with matching pairs
$list: zip($start, $end);
$change-list: ();
// calculate change value on pairs
@each $l in $list {
$change: nth($l,1) - nth($l,2);
$change-list: join( $change-list, $change, space );
}
@return $change-list;
}
@function split-list($list) {
$list-size: length($list);
$top: ''; $left: ''; $bottom: ''; $right: '';
// top/bottom/left/right match
@if ($list-size == 1) {
$top: $list;
$right: $list;
$bottom: $list;
$left: $list;
}
// top/bottom match, left/right match
@elseif ($list-size == 2) {
$top: nth($list,1);
$bottom: nth($list,1);
$right: nth($list,2);
$left: nth($list,2);
}
// top/bottom differ, left/right match
@elseif ($list-size == 3) {
$top: nth($list,1);
$right: nth($list,2);
$left: nth($list,2);
$bottom: nth($list,3);
}
// top/bottom/left/right differ
@elseif ($list-size == 4) {
@return $list;
}
@else {
@warn "Your #{list} is too large with #{$list-size} properties";
}
@return $top $right $bottom $left;
}
$base-padding: 100px;
.box {
margin: change-values($base-padding, 10px 5px 20px 15px );
}
// more practical use in http://codepen.io/jackmcpickle/pen/OPpaWQ
.box {
margin: 90px 95px 80px 85px;
}
<div class='box'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat risus vel sollicitudin sagittis. Phasellus elementum dui in eros pretium rhoncus. Ut tempus vitae purus auctor sodales. Donec luctus quis libero non blandit. Aenean vitae est sit amet quam rutrum interdum. Morbi sed ipsum nibh. Cras pellentesque mi non purus hendrerit vulputate. Morbi et dictum nisl, quis mattis dolor.
Aliquam fermentum massa justo, eu rhoncus erat lacinia quis. Vivamus ut libero non justo feugiat molestie vel sit amet nisl. Aenean non urna massa. Etiam vel bibendum velit. Nunc vehicula condimentum lorem ac tempor. Integer ultricies semper magna quis malesuada. In placerat aliquam ante id porttitor. Donec aliquet vulputate posuere. Sed non est neque. Ut id arcu nec tellus porttitor elementum at in justo. Nulla blandit metus id aliquam fringilla. Fusce vulputate
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment