Last active
October 9, 2017 07:33
-
-
Save tombigel/ec6c748e10aa6390eba7 to your computer and use it in GitHub Desktop.
SCSS Functions to manipulate border radius values
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
// ---- | |
// 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)) | |
} |
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
#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