Editing CSS Variables

Periodically, you might need to edit CSS variables that you've created.

How to Edit a CSS Variable

  1. Open the stylesheet you want to modify or create a new one.
  2. In the local toolbar, make sure the first button displays The button to change the stylesheet to the advanced view.. If the button displays The button to change the stylesheet to the simplified view. instead, then click it.
  3. In the upper-left of the editor, make sure the drop-down field is set to Use the drop-down filter for "all styles" to view in the stylesheet..

  4. On the left side of the editor, expand (Variables).

  5. Click the HTML element with the CSS variable you want to edit. Most of the time this will probably be :root, but it might be a specific selector.

  6. From the Show drop-down list on the upper-right side of the editor, select . This displays only the properties that have been set for that particular selector.

  7. (Optional) You can use the toggle button in the local toolbar to show properties below in a group view Stylesheet local toolbar button to show properties in a group view. or an alphabetical view Stylesheet local toolbar button to show properties in an alphabetical view..

    If it is in group view, expand Variables to see the variables under it.

  8. If you only want to change the property value, you can click in the row and type it. Otherwise, on the right side of the row (variable) you want to edit, click Display more options.. The Edit CSS Variable dialog opens.

  9. You can change any of the fields in the Edit CSS Variable dialog:
    • HTML Element By default this field is populated with :root for new CSS variables. This is probably what you will use most of the time so that the variable is global. But you can replace this with a specific selector (e.g., p, ol, img) if you want.
    • Name Enter a name for the variable.
    • Property Type Select a property to associate with the variable. The most common property types are listed, but you can also choose “(Custom)” if you need something other than the options shown.
    • Value Enter a value that is appropriate for the variable, based on the property type you selected.
    • Resulting CSS As you complete the fields above, this field shows how the variable will appear in the stylesheet. If you forgot to add two dashes in front of the variable name, Contributor adds them automatically in this field (e.g., --Brand: #6be42e).
  10. Click OK.
  11. Click Save the active file. to save your work.