How to apply Arco Design Variables to CSS: How to use design variables without CSS variable mapping?

In-depth interpretation of CSS application of Arco Design variables: cleverly dealing with non-CSS variables

Arco Design provides a powerful design variable system to help developers maintain consistency in project design styles. However, not all design variables are directly mapped to CSS variables (such as var(--color-text-1) ), which brings challenges to some developers. This article will explain in detail how to effectively utilize design variables that do not directly correspond to CSS variables.

Some Arco Design design variables can be used directly in CSS variables (such as var(--color-text-1) ). However, other variables only provide variable names and lack corresponding CSS variables. How to reference these variables?

The key is to customize variables . We can use preprocessors, such as Sass or Less, to define custom variables and assign them to the value corresponding to the variable name provided by Arco Design.

For example, suppose Arco Design provides a design variable named $textColor with a value of #333 but no corresponding CSS variable. We can use Sass to write the following code:

 // Define custom variable $textColor in Sass: #333;

// Use custom variable h1 in CSS {
  color: $textColor;
}

This code first defines a variable $textColor in Sass and assigns the value to #333 (please find the corresponding value according to the actual Arco Design variable document). Then we can use this custom variable $textColor in CSS just like using a normal CSS variable.

In this way, we can apply Arco Design's design variables to the project, even if these variables do not have a direct corresponding CSS variable. Remember, #333 is just an example value, be sure to consult Arco Design's official documentation for accurate design variable values.

With custom variables, you can easily incorporate Arco Design's design language into your project, ensuring consistency and efficiency.

The above is the detailed content of How to apply Arco Design Variables to CSS: How to use design variables without CSS variable mapping?. For more information, please follow other related articles on the PHP Chinese website!