Alias cubic-bezier() to bezier()

README.md

@@ -7,6 +7,8 @@ Goals and benefits of the package:
 - shorter `cubic-bezier()` syntax;
 - code portability: same syntax as similar libraries.
 
+Also read: [ideas](https://github.com/meduzen/easings/issues/1) for this package.
+
 ## Easings list
 
 If you’re familiar with [Bourbon](https://www.bourbon.io/docs/4/#timing-functions)’s easings, they are exactly the same. ([Other visualization](https://codepen.io/slavanossar/full/ERoaBx)).
@@ -144,3 +146,19 @@ Generated CSS:
   transition: opacity 1.3s var(--in-out-circ);
 }
 ```
+
+## Other easings
+
+*easings.scss* also adds a `bezier()` function that alias the CSS `cubic-bezier()` one, allowing a shorter syntax for your custom easings.
+
+```scss
+// You can now write this…
+.my-class {
+  transition-timing-function: bezier(.1, .02, 1, .7);
+}
+
+// … instead of
+.my-class {
+  transition-timing-function: cubic-bezier(.1, .02, 1, .7);
+}
+```

src/easings/_in-back.scss

@@ -1,3 +1,3 @@
 $in-back-value: .6, -.28, .735, .045;
-$in-back: bezier('in-back', $in-back-value);
-$ease-in-back: bezier('in-back', $in-back-value);
+$in-back: get-bezier('in-back', $in-back-value);
+$ease-in-back: get-bezier('in-back', $in-back-value);

src/easings/_in-circ.scss

@@ -1,3 +1,3 @@
 $in-circ-value: .6, .04, .98, .335;
-$in-circ: bezier('in-circ', $in-circ-value);
-$ease-in-circ: bezier('in-circ', $in-circ-value);
+$in-circ: get-bezier('in-circ', $in-circ-value);
+$ease-in-circ: get-bezier('in-circ', $in-circ-value);

src/easings/_in-cubic.scss

@@ -1,3 +1,3 @@
 $in-cubic-value: .55, .055, .675, .19;
-$in-cubic: bezier('in-cubic', $in-cubic-value);
-$ease-in-cubic: bezier('in-cubic', $in-cubic-value);
+$in-cubic: get-bezier('in-cubic', $in-cubic-value);
+$ease-in-cubic: get-bezier('in-cubic', $in-cubic-value);

src/easings/_in-expo.scss

@@ -1,3 +1,3 @@
 $in-expo-value: .95, .05, .795, .035;
-$in-expo: bezier('in-expo', $in-expo-value);
-$ease-in-expo: bezier('in-expo', $in-expo-value);
+$in-expo: get-bezier('in-expo', $in-expo-value);
+$ease-in-expo: get-bezier('in-expo', $in-expo-value);

src/easings/_in-out-back.scss

@@ -1,3 +1,3 @@
 $in-out-back-value: .68, -.55, .265, 1.55;
-$in-out-back: bezier('in-out-back', $in-out-back-value);
-$ease-in-out-back: bezier('in-out-back', $in-out-back-value);
+$in-out-back: get-bezier('in-out-back', $in-out-back-value);
+$ease-in-out-back: get-bezier('in-out-back', $in-out-back-value);

src/easings/_in-out-circ.scss

@@ -1,3 +1,3 @@
 $in-out-circ-value: .785, .135, .15, .86;
-$in-out-circ: bezier('in-out-circ', $in-out-circ-value);
-$ease-in-out-circ: bezier('in-out-circ', $in-out-circ-value);
+$in-out-circ: get-bezier('in-out-circ', $in-out-circ-value);
+$ease-in-out-circ: get-bezier('in-out-circ', $in-out-circ-value);

src/easings/_in-out-cubic.scss

@@ -1,3 +1,3 @@
 $in-out-cubic-value: .645, .045, .355, 1;
-$in-out-cubic: bezier('in-out-cubic', $in-out-cubic-value);
-$ease-in-out-cubic: bezier('in-out-cubic', $in-out-cubic-value);
+$in-out-cubic: get-bezier('in-out-cubic', $in-out-cubic-value);
+$ease-in-out-cubic: get-bezier('in-out-cubic', $in-out-cubic-value);

src/easings/_in-out-expo.scss

@@ -1,3 +1,3 @@
 $in-out-expo-value: 1, 0, 0, 1;
-$in-out-expo: bezier('in-out-expo', $in-out-expo-value);
-$ease-in-out-expo: bezier('in-out-expo', $in-out-expo-value);
+$in-out-expo: get-bezier('in-out-expo', $in-out-expo-value);
+$ease-in-out-expo: get-bezier('in-out-expo', $in-out-expo-value);

src/easings/_in-out-quad.scss

@@ -1,3 +1,3 @@
 $in-out-quad-value: .455, .03, .515, .955;
-$in-out-quad: bezier('in-out-quad', $in-out-quad-value);
-$ease-in-out-quad: bezier('in-out-quad', $in-out-quad-value);
+$in-out-quad: get-bezier('in-out-quad', $in-out-quad-value);
+$ease-in-out-quad: get-bezier('in-out-quad', $in-out-quad-value);

src/easings/_in-out-quart.scss

@@ -1,3 +1,3 @@
 $in-out-quart-value: .77, 0, .175, 1;
-$in-out-quart: bezier('in-out-quart', $in-out-quart-value);
-$ease-in-out-quart: bezier('in-out-quart', $in-out-quart-value);
+$in-out-quart: get-bezier('in-out-quart', $in-out-quart-value);
+$ease-in-out-quart: get-bezier('in-out-quart', $in-out-quart-value);

src/easings/_in-out-quint.scss

@@ -1,3 +1,3 @@
 $in-out-quint-value: .86, 0, .07, 1;
-$in-out-quint: bezier('in-out-quint', $in-out-quint-value);
-$ease-in-out-quint: bezier('in-out-quint', $in-out-quint-value);
+$in-out-quint: get-bezier('in-out-quint', $in-out-quint-value);
+$ease-in-out-quint: get-bezier('in-out-quint', $in-out-quint-value);

src/easings/_in-out-sine.scss

@@ -1,3 +1,3 @@
 $in-out-sine-value: .445, .05, .55, .95;
-$in-out-sine: bezier('in-out-sine', $in-out-sine-value);
-$ease-in-out-sine: bezier('in-out-sine', $in-out-sine-value);
+$in-out-sine: get-bezier('in-out-sine', $in-out-sine-value);
+$ease-in-out-sine: get-bezier('in-out-sine', $in-out-sine-value);

src/easings/_in-quad.scss

@@ -1,3 +1,3 @@
 $in-quad-value: .55, .085, .68, .53;
-$in-quad: bezier('in-quad', $in-quad-value);
-$ease-in-quad: bezier('in-quad', $in-quad-value);
+$in-quad: get-bezier('in-quad', $in-quad-value);
+$ease-in-quad: get-bezier('in-quad', $in-quad-value);

src/easings/_in-quart.scss

@@ -1,3 +1,3 @@
 $in-quart-value: .895, .03, .685, .22;
-$in-quart: bezier('in-quart', $in-quart-value);
-$ease-in-quart: bezier('in-quart', $in-quart-value);
+$in-quart: get-bezier('in-quart', $in-quart-value);
+$ease-in-quart: get-bezier('in-quart', $in-quart-value);

src/easings/_in-quint.scss

@@ -1,3 +1,3 @@
 $in-quint-value: .755, .05, .855, .06;
-$in-quint: bezier('in-quint', $in-quint-value);
-$ease-in-quint: bezier('in-quint', $in-quint-value);
+$in-quint: get-bezier('in-quint', $in-quint-value);
+$ease-in-quint: get-bezier('in-quint', $in-quint-value);

src/easings/_in-sine.scss

@@ -1,3 +1,3 @@
 $in-sine-value: .47, 0, .745, .715;
-$in-sine: bezier('in-sine', $in-sine-value);
-$ease-in-sine: bezier('in-sine', $in-sine-value);
+$in-sine: get-bezier('in-sine', $in-sine-value);
+$ease-in-sine: get-bezier('in-sine', $in-sine-value);

src/easings/_out-back.scss

@@ -1,3 +1,3 @@
 $out-back-value: .175, .885, .32, 1.275;
-$out-back: bezier('out-back', $out-back-value);
-$ease-out-back: bezier('out-back', $out-back-value);
+$out-back: get-bezier('out-back', $out-back-value);
+$ease-out-back: get-bezier('out-back', $out-back-value);

src/easings/_out-circ.scss

@@ -1,3 +1,3 @@
 $out-circ-value: .075, .82, .165, 1;
-$out-circ: bezier('out-circ', $out-circ-value);
-$ease-out-circ: bezier('out-circ', $out-circ-value);
+$out-circ: get-bezier('out-circ', $out-circ-value);
+$ease-out-circ: get-bezier('out-circ', $out-circ-value);

src/easings/_out-cubic.scss

@@ -1,3 +1,3 @@
 $out-cubic-value: .215, .61, .355, 1;
-$out-cubic: bezier('out-cubic', $out-cubic-value);
-$ease-out-cubic: bezier('out-cubic', $out-cubic-value);
+$out-cubic: get-bezier('out-cubic', $out-cubic-value);
+$ease-out-cubic: get-bezier('out-cubic', $out-cubic-value);

src/easings/_out-expo.scss

@@ -1,3 +1,3 @@
 $out-expo-value: .19, 1, .22, 1;
-$out-expo: bezier('out-expo', $out-expo-value);
-$ease-out-expo: bezier('out-expo', $out-expo-value);
+$out-expo: get-bezier('out-expo', $out-expo-value);
+$ease-out-expo: get-bezier('out-expo', $out-expo-value);

src/easings/_out-quad.scss

@@ -1,3 +1,3 @@
 $out-quad-value: .25, .46, .45, .94;
-$out-quad: bezier('out-quad', $out-quad-value);
-$ease-out-quad: bezier('out-quad', $out-quad-value);
+$out-quad: get-bezier('out-quad', $out-quad-value);
+$ease-out-quad: get-bezier('out-quad', $out-quad-value);

src/easings/_out-quart.scss

@@ -1,3 +1,3 @@
 $out-quart-value: .165, .84, .44, 1;
-$out-quart: bezier('out-quart', $out-quart-value);
-$ease-out-quart: bezier('out-quart', $out-quart-value);
+$out-quart: get-bezier('out-quart', $out-quart-value);
+$ease-out-quart: get-bezier('out-quart', $out-quart-value);

src/easings/_out-quint.scss

@@ -1,3 +1,3 @@
 $out-quint-value: .23, 1, .32, 1;
-$out-quint: bezier('out-quint', $out-quint-value);
-$ease-out-quint: bezier('out-quint', $out-quint-value);
+$out-quint: get-bezier('out-quint', $out-quint-value);
+$ease-out-quint: get-bezier('out-quint', $out-quint-value);

src/easings/_out-sine.scss

@@ -1,3 +1,3 @@
 $out-sine-value: .39, .575, .565, 1;
-$out-sine: bezier('out-sine', $out-sine-value);
-$ease-out-sine: bezier('out-sine', $out-sine-value);
+$out-sine: get-bezier('out-sine', $out-sine-value);
+$ease-out-sine: get-bezier('out-sine', $out-sine-value);

src/functions/bezier.scss

@@ -1,13 +1,23 @@
 /**
- * Returns a cubic bezier timing function.
+ * RETURNS A cubic bezier TIMING FUNCTION.
 
  * Modern browsers will get a custom property, legacy browsers will get a
  * `cubic-bezier()` function.
  */
-@function bezier($name, $value) {
+@function get-bezier($name, $value) {
   @if variable-exists('easings-legacy') == false or $easings-legacy == false {
     @return var(--#{$name});
   } @else {
     @return cubic-bezier($value);
   }
 }
+
+/**
+ * ALIAS FOR THE CSS cubic-bezier FUNCTION
+ *
+ * Use:
+ * `transition-timing-function: bezier(.1, .02, 1, .7);`
+ */
+@function bezier($args...) {
+  @return #{'cubic-bezier(#{$args})'};
+}