Defining variables in css

Store Development
1

Hi
New to VTEX.
trying really had to understand how to style a site without having variables in css…
Is this possible?
How do I define Primary Color of a site in ONE place and not scattered around in multiple css?
Or how do I use styles.json to access it from the css I develop?

Please enlighten me!

2

Hi @javier.enciso,

Following the VTEX Course - Making Your Store Unique, in the thrid step, shows how to use Global Style:

“Every Store Framework block benefit from the same semantic styles definitions, based on Tachyons. In practice, it means that instead of having to change all button backgrounds to use color that you want, you just need to redefine the color of an action-primary background.”

Have you ever seen this content?

Saludos :slight_smile:

3

Obrigado @andremiani !
Yes, I’m aware of this file and it seems like this is just what I need…

BUT -if I understand correctly- this only works if the component accepts (or is built to use) these styles.

In your example: the Rich Text Component is prepared to use the class c-on-base, which is defined in styles.json.

But what happens if the component is not prepared to use the styles.json?
Let’s say the background of the Rich Text Component… I can set a blockClass and style it in my own css file.

How do I define this background to use for example semanticColors-background-base from styles.json as in the example?

thank you for your help!
/best
/javier

4

Then, you should have to use CSS Modules.

In VTEX IO, there are three different tools for using CSS in a store:

  • Tachyons - Main option for styling components from CSS classes.
  • CSS Modules - Secondary option for styling components from CSS classes. It should only be used when the desired style cannot be configured using Tachyons.
  • CSS Handles - Exports generic CSS classes to allow users that work with your component to customize it according to their respective scenarios.

From:

5

Thanks again @andremiani!

this may be the option, but you are talking about modifying a component to be able to apply some styling that cannot be configured using VTEX Tachyons… Correct?
This could imply to modify a lot of components.

What I want to achieve sounds simpler in my head: just want to be able to define a color in ONE place and use it in every other css.

in pure css or would use variables:

<style>

:root{        /*(I know this is deprecated in css VTEX )*/
  --my-red:red;
}
.red-text{
  color:var(--my-red);
}
.red-btn{
  background-color:var(--my-red);
}
</style>

something similar if I am using less or scss

Is this totally out of reach?

Thank you!
/best
/javier

PD: I have just discovered this is exactly what’s in use on this page!!! (community.vtex.com)

image

1 Like
6

Olá Javier, tudo certo?

Na vtex você também pode utilizar variáveis.

Na pasta do CSS, crie um arquivo chamado: vtex.store.css

Dentro dele chame onde ele pode ser aplicado, exemplo:

:global(.vtex-store__template),
:global(.vtex-modal-layout-0-x-container),
:global(.vtex-minicart-2-x-drawer),
:global(.vtex-telemarketing-2-x-portalContainer),
:global(.vtex-rich-text-0-x-paragraph) {
–primary:#009FAF;
–secondary: #7B2781; <— aqui insira as variaveis
–tertiary: #74C0A0;
–base: #F8F8F8;
}

Depois disso é só usar igual o CSS PURO, exemplo:

.flexRow–main-header-mobile{
background-color: var(–primary);
}