# to-scss-map

## Interface

```typescript
interface parser {
  name: 'to-scss-map';
  output: {
    type: 'directory';
    directoryPath: string;
  };
  options?: {
    tokenNameTemplate?: string;
  };
}
```

## Options

<table data-full-width="true"><thead><tr><th width="229">Parameter</th><th width="110">Required</th><th width="170">Type</th><th width="302">Default</th><th width="288">Description</th></tr></thead><tbody><tr><td><code>tokenNameTemplate</code></td><td><code>false</code></td><td><code>string</code></td><td><code>{{path}}-{{token}}-{{mode}}</code></td><td>The template the parser follows to name your tokens.<br><br>You can use the <code>path</code> of your tokens, their <code>token</code> name, and their respective <code>mode</code>.</td></tr></tbody></table>

## Basic usage

{% tabs %}
{% tab title="Input" %}
{% code lineNumbers="true" %}

```json
{
  "colors": {
    "$collection": { "$modes": ["light", "dark"] },
    "core": {
      "blue-100": {
        "$type": "color",
        "$description": "token 1 aliased with n modes within collection within n groups",
        "$value": {
          "light": {
            "red": 219,
            "blue": 254,
            "alpha": 1,
            "green": 236,
            "model": "rgb"
          },
          "dark": {
            "red": 41,
            "blue": 67,
            "alpha": 1,
            "green": 52,
            "model": "rgb"
          }
        }
      },
      "blue-700": {
        "$type": "color",
        "$description": "token 2 aliased with n modes within collection within n groups",
        "$value": {
          "light": {
            "red": 17,
            "blue": 249,
            "alpha": 1,
            "green": 125,
            "model": "rgb"
          },
          "dark": {
            "red": 96,
            "blue": 250,
            "alpha": 1,
            "green": 168,
            "model": "rgb"
          }
        }
      }
    },
    "semantic": {
      "background": {
        "button": {
          "primary": {
            "hover": {
              "$type": "color",
              "$description": "alias token with n modes within collection within n groups",
              "$value": {
                "dark": {
                  "$mode": "dark",
                  "$alias": "colors.core.blue-100"
                },
                "light": {
                  "$mode": "light",
                  "$alias": "colors.core.blue-700"
                }
              }
            }
          }
        }
      }
    }  
  }
}
```

{% endcode %}
{% endtab %}

{% tab title="Config" %}
{% code title=".specifyrc.json" lineNumbers="true" %}

```json
{
  "version": "2",
  "repository": "@organization/repository",
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate tokens",
      "parsers": [
        {
          "name": "to-scss-map",
          "output": {
            "type": "directory",
            "directoryPath": "public"
          },
          "options": {}
        }
      ]
    }
  ]
}
```

{% endcode %}
{% endtab %}

{% tab title="Output" %}
{% code title="public/\_colors.scss" lineNumbers="true" %}

```scss
@use "sass:map";

$color: (
  colors-core-blue-100-dark: rgb(41, 52, 67),
  colors-core-blue-100-light: rgb(219, 236, 254),
  colors-core-blue-700-dark: rgb(96, 168, 250),
  colors-core-blue-700-light: rgb(17, 125, 249),
  colors-semantic-background-button-primary-hover-dark: rgb(41, 52, 67),
  colors-semantic-background-button-primary-hover-light: rgb(17, 125, 249),
);

@mixin get-color($levels...) {
  $fetched: $color;
  @each $level in $levels {
    @if map-has-key($fetched, $level) {
      $fetched: map-get($fetched, $level);
    } @else {
      @error "There is no `#{$level}` in the `#{$color}` map";
    }
  }
  @if type-of($fetched) != map {
    @error "Non usable value. Got `#{$color}`";
  }

  @each $prop, $value in $fetched {
    #{$prop}: $value;
  }
}
```

{% endcode %}
{% endtab %}
{% endtabs %}