---
title: "Creating SCSS variables"
date: "2019-01-31T14:36:21+00:00"
summary: "Learn to create, manage, and use SCSS variables in Site Studio for efficient CSS styling. Discover how to set up, order, delete, and lock variables, plus apply them in your custom styles."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/creating-scss-variables"
id: "1db2fede-5db6-4ae0-a9a2-3023bbe6e09b"
---

Table of contents will be added

Site Studio allows you to create and manage SCSS variables which can be used within your CSS styles.

Creating a SCSS variable
------------------------

To create a SCSS variable:

1.  Navigate to Site Studio > Website settings > **SCSS variables** 
2.  Enter a variable name in the **Variable name** field
3.  Enter a value in the **Variable value** field
4.  Click **Save**

To add another variable, click **Add** and repeat the steps above before clicking **Save**.

![5a6737be-create-scss-variable.png](https://acquia.widen.net/content/445d0d1a-ab5d-43ae-9414-45e8b8c32921/web/5a6737be-create-scss-variable.png)

Changing the order of the SCSS variables
----------------------------------------

You can change the order of the variables.

1.  Navigate to Site Studio > Website settings > **SCSS variables** 
2.  Click and hold on the **Drag handle** next to the variable you want to move and drag the variable up or down to reposition it
3.  Click **Save**

![16feec29-order-scss-variables.png](https://acquia.widen.net/content/ea9d187b-7d57-4832-873b-a87fcc357af1/web/16feec29-order-scss-variables.png)

Deleting a SCSS variable
------------------------

You can delete variables as long as they are not being used. To delete a variable:

1.  Navigate to Site Studio > Website settings > **SCSS variables** 
2.  Click the **Delete** button to delete a variable.

![b108e9d0-delete-scss-variable.png](https://acquia.widen.net/content/aef78cc7-570f-4e60-8bdd-3f92eb1d1417/web/b108e9d0-delete-scss-variable.png)

Deleting a SCSS variable in use
-------------------------------

When a variable has been applied to a style, it's flagged as 'In use' and cannot be deleted. Instead of a **Delete button**, you will see an **In use** button.

To delete a color in use:

1.  Navigate to Site Studio > Website settings > **SCSS variables** 
2.  Click on the **In use** button next to the variable you want to delete
3.  A modal will open showing a list of links to locations where the variable is being used
4.  Navigate to each of these locations and select a different variable
5.  When the variable is no longer in use, it will be unlocked and you will see a **Delete** button
6.  Click on the **Delete** button to delete the variable

![38051d8f-delete-scss-variable-in-use.png](https://acquia.widen.net/content/fe1bb772-12de-48de-9ce9-87a59645bc7d/web/38051d8f-delete-scss-variable-in-use.png)

Locking a SCSS variable
-----------------------

Locking a SCSS variable will stop the variable from being overridden if changes are detected when importing using Site Studio sync.

1.  Navigate to Site Studio > Website settings > **SCSS variables**
2.  Find the SCSS variable you want to lock
3.  Click **Lock entity**

![82922f6d-lock-scss-variable.png](https://acquia.widen.net/content/cb1ad724-3e80-4a60-8080-e2556c5acb29/web/82922f6d-lock-scss-variable.png)

How to use SCSS variables
-------------------------

SCSS variables can be used within the style builder. Navigate to a custom style or base style and type in the name of a variable that you have created for example "$section-padding" into a CSS property such as padding and save.

Important

When using a $variable within a calc, the variable must include the unit, for example 0.5rem.