Creating SCSS variables

    DX8 allows you to create and manage SCSS variables which can be used globally across your website. Variables added can be used in the Style builder. 

    Creating a SCSS variable

    To create a SCSS variable:

    1. Navigate to DX8 > 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.

    Changing the order of the SCSS variables

    You can change the order of the variables.

    1. Navigate to DX8 > 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

    Deleting a SCSS variable

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

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

    Deleting a SCSS variable in use

    When a variable has been applied to a page, style, template or anything else, 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 DX8 > 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

    Locking a SCSS variable

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

    1. Navigate to DX8 > Website settings > SCSS variables
    2. Find the SCSS variable you want to lock
    3. Click Lock entity, for more information on locking DX8 entities.

    How to use SCSS variables

    SCSS variables can be used within the style builder. Simply go to the style builder on an element 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.

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

    Cohesion DX8 Help center

    Launch our Help center to raise a support ticket or search our knowledge base of common questions and answers.

    DX8 knowledge base icon

    Knowledge base

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    Log in to the Help center to raise an issue. Available Monday - Friday, 09:00 - 17:00 GMT.

    Raise ticket