Skip to content

Instantly share code, notes, and snippets.

@tombigel
Last active October 9, 2017 07:33
Show Gist options
  • Save tombigel/ec6c748e10aa6390eba7 to your computer and use it in GitHub Desktop.
Save tombigel/ec6c748e10aa6390eba7 to your computer and use it in GitHub Desktop.
SCSS Functions to manipulate border radius values
// ----
// libsass (v3.2.5)
// ----
$br: 1px 2px 3px;
@function blowup-border-radius($br) {
$long-br: $br;
@if length($br) == 1 {
$long-br: ($br $br $br $br);
}
@else if length($br) == 2 {
$long-br: join($br, $br);
}
@else if length($br) == 3 {
$long-br: append($br, nth($br, 1));
}
@return $long-br;
}
@function adjust-radius-list($list, $delta) {
$result: ();
@each $item in $list {
$val: $item + $delta;
@if $val < 0 {$val: 0px;}
$result: append($result, $val);
}
@return $result;
}
@mixin spread-border-radius($br){
$br: blowup-border-radius($br);
border: {
top-radius: nth($br, 1);
right-radius: nth($br, 2);
bottom-radius: nth($br, 3);
left-radius: nth($br, 4);
};
}
#a {
/*Add a number and keep as list*/
border-radius: adjust-radius-list(blowup-border-radius($br), 2px);
/*Add a number and expand*/
@include spread-border-radius(adjust-radius-list($br, 2))
}
#a {
/*Add a number and keep as list*/
border-radius: 3px 4px 5px 3px;
/*Add a number and expand*/
border-top-radius: 3px;
border-right-radius: 4px;
border-bottom-radius: 5px;
border-left-radius: 3px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment