Skip to content

Commit

Permalink
Alias reverse-bezier() to r-bezier()
Browse files Browse the repository at this point in the history
  • Loading branch information
meduzen committed Jan 29, 2020
1 parent c8be7e4 commit 92fc892
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 1 deletion.
7 changes: 6 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ Generated CSS:
}
```

If you want to [reverse an easing curve](https://css-tricks.com/reversing-an-easing-curve), you can use the `reverse-bezier()` function, accepting 1 or 4 parameters.
If you want to [reverse an easing curve](https://css-tricks.com/reversing-an-easing-curve), you can use the `reverse-bezier()` function (or its alias `r-bezier()`), accepting 1 or 4 parameters.

```scss
// 4 parameters
Expand All @@ -187,4 +187,9 @@ $my-easing-not-yet-reversed: .1, .02, 1, .7;
.my-class {
transition-timing-function: reverse-bezier($my-easing-not-yet-reversed);
}

// r-bezier alias
.my-class {
transition-timing-function: r-bezier(.1, .02, 1, .7);
}
```
12 changes: 12 additions & 0 deletions src/functions/bezier.scss
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,15 @@

@return #{'cubic-bezier(#{1 - $x2}, #{1 - $y2}, #{1 - $x1}, #{1 - $y1})'};
}

/**
* ALIAS TO reverse-bezier
*/
@function r-bezier($args...) {
@if length($args) == 1 and length(nth($args, 1)) == 4 {
$args: nth($args, 1);
}

@return reverse-bezier($args);
}

0 comments on commit 92fc892

Please sign in to comment.