Created
January 19, 2015 00:01
-
-
Save jackmcpickle/dbdd4e02809b6f2fcdfe to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.box { | |
margin: 90px 95px 80px 85px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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