The metadata to expose a variable takes the form of an editable() function call wrapped inside a comment in your Sass files. This function call accepts a JSON object as its single argument with the following properties:
type– declares the variable type. This property is required.Possible values include:color– displays a color picker in SMT.string– declares a value as a string (font-weight, font-style, thumbnail size, etc.).
SMT only supports color and string as values for the type property. To declare a number value or a font, use a string.
label– provides a formatted string to reference the variable in the SMT user interface. If not defined, SMT displays the Sass variable name as the label.description– describes the variable in a long-formatted string. This property is optional.options– provides a list of options as an array for the variable. Use this property to limit possible values using a dropdown list. This property is optional.
The following code snippet is an example of how to expose a color variable using inline notation:
$sc-primary-color: red; // editable({“type”: “color”, “label”: “Primary Color”})
You can also use the editable() function with block notation:
$sc-primary-color: red; /* editable({
“type”: “color”,
“label”: “Primary Color”,
“description”: “Used mainly for ‘call to action’ elements.”
})*/
The comment must start immediately after the variable declaration. This is essential for the Sass preprocessor to relate the variable name with the declared metadata in the comment.