Can you use multiple conditionals in SASS/SCSS CSS
I wrote it like this: Hope you will find it useful.
@mixin rounded($amount: "10px",$position: null) {
@if $position != null {
@if $position == "top" or $position == "bottom" {
// top or bottom
-webkit-border#{$position}-left-radius: $amount;
-moz-border#{$position}-left-radius: $amount;
border#{$position}-left-radius: $amount;
-webkit-border#{$position}-right-radius: $amount;
-moz-border#{$position}-right-radius: $amount;
border#{$position}-right-radius: $amount;
} @else {
// top-left or top-right or bottom-left or bottom-right
-webkit-border#{$position}-radius: $amount;
-moz-border#{$position}-radius: $amount;
border#{$position}-radius: $amount;
}
} @else {
// ALL IF EMPTY
-webkit-border-radius: $amount;
-moz-border-radius: $amount;
border-radius: $amount;
}
}
You use it like so:
@include rounded(); /*as default 10px on all corners*/
@include rounded(15px); /*all corners*/
@include rounded(15px, top); /*all top corners*/
@include rounded(15px, bottom); /* all bottom corners*/
@include rounded(15px, top-right); /*this corner only*/
@include rounded(15px, top-left); /*this corner only*/
@include rounded(15px, bottom-right); /*this corner only*/
@include rounded(15px, bottom-left); /*this corner only*/
You need to use or
instead of ||
. See the Sass Docs.
Also it looks like you have a typo in the last @if
statement for each block:
$corner==bottom should be $corner==top