Skip to content

Commit

Permalink
refactor(var/functions): set $delimiter, $prefix, $suffix argum…
Browse files Browse the repository at this point in the history
…ents to `null` in `var.css()` `var.get()` and `var.name()`.
  • Loading branch information
sciborrudnicki committed Aug 24, 2023
1 parent 7b52fb3 commit d3ace9f
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 31 deletions.
18 changes: 9 additions & 9 deletions var/functions/_var.css.function.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,22 @@
@use 'var.name.function';

// Status: DONE
// The `var.css()` function returns the CSS variable of `$name`, `$fallback` value, `$delimiter`, `$prefix`, `$suffix` and translated with `$dictionary`.
// The `var.css()` function returns the CSS variable of `$name`, `$fallback` value, `$delimiter`, `$prefix`, `$suffix` translated with `$dictionary`.
// `$name` structure `--#{$prefix}#{$delimiter}#{$name}#{$delimiter}#{$suffix}`
// @param `$name` The `string` or `list` to set the CSS variable name.
// @param `$fallback` A fallback value.
// @param `$fallback` A fallback value for returned CSS variable of `$name`.
// @param `$dictionary` Dictionary to translate `$name`.
// @param `$delimiter` Separator between each element of `$name`.
// @param `$prefix` Prefix as the first word in `$name`.
// @param `$suffix` Suffix as the last word in `$name`.
// @return The return value is CSS variable.
// @param `$delimiter` Separator between each element in name of returned CSS variable.
// @param `$prefix` Prefix in `$name`. By default, it uses `prefix` of `$var` sass variable.
// @param `$suffix` Suffix in `$name`. By default, it uses `suffix` of `$var` sass variable.
// @returns The return value is CSS variable of `$name`.
@function css(
$name,
$fallback: null,
$dictionary: (),
$delimiter: map.get(variables.$var, delimiter),
$prefix: map.get(variables.$var, prefix),
$suffix: map.get(variables.$var, suffix),
$delimiter: null,
$prefix: null,
$suffix: null,
) {
@return var(var.name(
$name,
Expand Down
25 changes: 13 additions & 12 deletions var/functions/_var.get.function.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,25 @@
@use 'var.unit.function' as *;

// Status: DONE
// The `var.get()` function returns CSS variable .
// @param `$name`
// @param `$adjust`
// @param `$unit`
// @param `$fallback`
// @param `$dictionary`
// @param `$prefix`
// @param `$suffix`
// @return
// The `var.get()` function returns CSS variable built from `$name`, `$delimiter`, `$prefix`, and `$suffix`.
// @param `$name` The property name of `string` or `list` type.
// @param `$adjust` Adjust the CSS variable `var()`.
// @param `$unit` A `bool` (then default unit is taken), or unit type value to multiply returned CSS variable.
// @param `$fallback` Fallback value if property `$name` does not exist.
// @param `$dictionary` Dictionary to translate `$name`.
// @param `$delimiter` Separator between each element in name of returned CSS variable.
// @param `$prefix` Prefix in `$name`. By default, it uses `prefix` of `$var` sass variable.
// @param `$suffix` Suffix in `$name`. By default, it uses `suffix` of `$var` sass variable.
// @returns The return value is CSS variable of `$name`.
@function get(
$name,
$adjust: null,
$unit: false,
$fallback: null,
$dictionary: (),
$delimiter: map.get(var.$var, delimiter),
$prefix: map.get(var.$var, prefix),
$suffix: map.get(var.$var, suffix),
$delimiter: null,
$prefix: null,
$suffix: null,
) {
@if type-of($name) == list and list.length($name) == 0 {
@return (); // REVIEW: consider changing the solution
Expand Down
27 changes: 17 additions & 10 deletions var/functions/_var.name.function.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,27 @@
@use '../../list/get/get.map.function';

// Status: DONE
// The `var.name()` function .
// @param `$name`
// @param `$dictionary`
// @param `$prefix`
// @param `$suffix`
// @return
// https://developer.mozilla.org/en-US/docs/Web/CSS/var
// The `var.name()` function returns custom property(CSS variable.
// @param `$name` The `string` or `list` to set the CSS variable name.
// @param `$delimiter` Separator between each element in name of returned CSS variable.
// @param `$prefix` Prefix in `$name`. By default, it uses `prefix` of `$var` sass variable.
// @param `$suffix` Suffix in `$name`. By default, it uses `suffix` of `$var` sass variable.
// @returns The return value is CSS variable of `$name`.
@function name(
$name,
$dictionary: (),
$delimiter: map.get(var.$var, delimiter),
$prefix: map.get(var.$var, prefix),
$suffix: map.get(var.$var, suffix)
$delimiter: null,
$prefix: null,
$suffix: null
) {
@return --#{functions.name($name, $dictionary, $delimiter, $prefix, $suffix)};
@return --#{functions.name(
$name,
$dictionary,
$delimiter or map.get(var.$var, delimiter),
$prefix or map.get(var.$var, prefix),
$suffix or map.get(var.$var, suffix)
)};
}

// Examples.
Expand Down

0 comments on commit d3ace9f

Please sign in to comment.