# Reusing ThemeBuilder Exported Variables Using SCSS

## Environment

<table>
    <tbody>
        <tr>
            <td>Product</td>
            <td>ThemeBuilder</td>
        </tr>
        <tr>
            <td>Product Version</td>
            <td>Any</td>
        </tr>
    </tbody>
</table>

## Description

I want to reuse the variables I have exported from ThemeBuilder in my application. How can I achieve this when I am [using the ThemeBuilder output as an npm package](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#using-the-themebuilder-output-as-an-npm-package) with SCSS?

## Solution

To reuse the variables exported from ThemeBuilder in your application using SCSS, follow these steps:

1. Check the `_tokens.scss` file from the SCSS output for the identifier of the variable you want to reuse. For example:

   * For metric and color variables:

     ```_tokens.scss
     $tb-example-metric: 1px;
     $tb-example-background: hsl(100deg, 50%, 50%);
     ```

   * For typography variables:

     ```_tokens.scss
     $tb-typography: (
     // ...
       example-typography: (
           font-family: '"American Typewriter"',
           font-size: 1rem,
           font-weight: 500,
           line-height: 1,
           letter-spacing: 1px,
       ),
     // ...
     );
     ```

   * For effect variables:

     ```_tokens.scss
     $tb-effects: (
     // ...
       example-effect: (box-shadow: (1px 3px 3px 0px green), ),
     // ...
     );
     ```

2. Import the SCSS file where you intend to reuse the specific variable after the `_tokens.scss` file from the ThemeBuilder output:

   ```scss
   @import '/themebuilder-styles/dist/scss';
   @import './custom-styles.scss';
   ```

3. Refer to the variable in your application's styles using the following SCSS syntax:

   * For metric and color variables:
     ```custom-styles.scss
     .example-element {
         border-width: $tb-example-metric;
         background-color: $tb-example-background;
     }
     ```

   * For typography and effect variables:
     ```custom-styles.scss
     .example-element {
         @extend %tb-typography-example-typography;
         @extend %tb-effects-example-effect;
     }
     ```

> tip Fluent is the only CSS-based theme in ThemeBuilder. Therefore, in the `_tokens.scss` file, it uses CSS syntax for the metric and color variables:

```scss
:root {
    // ...
    --tb-example-background: hsl(100deg, 50%, 50%);
    // ...
}
```

## Related Articles

* [Using Variables](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variables)
* [Using the Exported Package](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package)
* [Reusing ThemeBuilder Exported Variables Using CSS](https://www.telerik.com/themebuilder/documentation/knowledge-base/reusing-variables-css)