diff --git a/README.md b/README.md index 42c6505..b8c5b7f 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,4 @@ + # v.scss `v.scss` brings a unique SCSS function that allows easier access to [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/var) using `v(propName)` instead of `var(--propName)`. @@ -11,7 +12,7 @@ Yup, `v` purpose is better readability by saving you 4 characters. It’s all it ## Usage -Start by defining some CSS custom properties: +Start by declaring some CSS custom properties: ```css :root { --primary: #000; @@ -56,9 +57,11 @@ a { ``` View it on [CodePen](https://codepen.io/meduzen/pen/YRyEPe). -### A note about SCSS interpolation +## Edge cases + +### SCSS interpolation -In the first example of this documentation, custom poperties are assigned their final values: +In the first example of this documentation, custom properties are assigned their final values: ```scss :root { --primary: #000; // `#000` stays the same after compilation, it’s the final value @@ -84,17 +87,45 @@ Assigning the computed value of a SCSS function follows the same [interpolation --superColor: var(--secondaryColor); // correct βœ…, regular syntax --superColor: v(secondaryColor); // error 🚫, custom property assignment needs interpolation --superColor: #{v(secondaryColor)}; // correct βœ…, function interpolated with `#{}` - + color: v(superColor); // correct βœ…, `color` is not a custom property } ``` In that case, as `v()`’s purpose is to increase readability and bring some coolness ✌️ in the assignment of CSS custom properties, one may favor sticking to the standard syntax (`var(--propName)`) instead of insulting `v()` by putting it in an even more uncool syntax (`#{v(propName)}`). +### `--` is a valid custom property name + +It turns out that [`--` is a valid name for a CSS custom property](https://twitter.com/alexzaworski/status/1127688935541338112). + +Declaring and using it is all about edge cases: +```scss +.my-class-with-weird-declarations { + --: .5; // error 🚫, expected "}", was "--: 0.5;" + --#{''}: .5; // correct βœ… + #{'--'}: .5; // also correct βœ… + + opacity: var(--); // error 🚫, Invalid CSS after "var(--": expected expression (e.g. 1px, bold), was ");" + opacity: var(#{'--'}); // correct βœ… + opacity: v(); // correct βœ…, thanks to v() coolness ✌️ +} +``` + +Other example with three dashes instead of two dashes: +```scss +.my-class-with-more-dashes { + --#{'-'}: .5; // correct βœ… + #{'---'}: .5; // also correct βœ… + + opacity: var(#{'---'}); // correct βœ…, interpolated + opacity: v('-'); // correct βœ…, thanks to v() coolness ✌️ +} +``` + ## See also - Custom properties [on Can I Use](https://caniuse.com/#feat=css-variables). -- [davidkpiano/sass-v](https://github.com/davidkpiano/sass-v), a similar project with more features, done way before mine 🀭. +- [davidkpiano/sass-v](https://github.com/davidkpiano/sass-v), a similar project with more features, done way before mine 🀭. - [malyw/css-vars](https://github.com/malyw/css-vars), a SCSS mixin allowing you to start writing some CSS custom properties even if the browsers you target don’t support them. - [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties), a PostCSS plugin with a similar purpose. - [_Dark theme in a day_](https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a), an all-round article with a lot of CSS custom properties. diff --git a/src/functions/v.scss b/src/functions/v.scss index 9f4f6ee..99d3b0c 100644 --- a/src/functions/v.scss +++ b/src/functions/v.scss @@ -14,7 +14,7 @@ * $fallback (optional, null by default): custom property fallback value */ -@function v($propertyName, $fallback: null) { +@function v($propertyName: '', $fallback: null) { @if($fallback) { @return var(--#{$propertyName}, #{$fallback}); }