-1

preciso de uma ajuda com CSS variáveis mas não sei se será possível fazer o que desejo.

Tenho o background de um botão da forma abaixo

.btn-view {
    background: url(../../assets/imgs/eye.jpg); 
}

Mas gostaria de criar uma variável no root com o domínio do site e estou fazendo como abaixo

:root {
    --dominioSite: 'https://meudominio.com';
}

Agora a ideia é jogar o valor dessa variável dento de um bakground como abaixo:

.btn-view {
    --dominio : var(--dominioSite) + '/assets/imgs/eye.jpg';
    background: url(--dominio);
}

Mas não funciona.

Será que tem como fazer isso?

E, se tiver, seria mesmo uma boa prática?

2
  • 1
    Olá, acho que não suporta a concatenação de duas Strings na url. Mas voce pode usar o JavaScript para fazer essa modificações, pois no Js aceita variáveis concatenadas. 6/03/2022 às 11:48
  • Obrigado pelo retorno. Mas eu tenho essa feature no lado do CSS do JS e do PHP para pegar o domínio e evitar os ../../ da vida . Da forma que tu disse eu teria que misturar JS com CSS e não é uma boa prática. 6/03/2022 às 11:52

1 Resposta 1

1

Não tem como fazer o que pretende utilizando apenas CSS, isso porque, quando você define a variável no CSS --dominioSite com o valor https://meudominio.com automaticamente o navegador não vai entender o que é este valor e provavelmente vai ignorar.

Isso acontece, justamente porque as variáveis em CSS são semelhantes as propriedades CSS (propriedade + valor) só que de forma com nomes customizados ou seja, precisam ter valores válidos em código CSS para poderem funcionar como, por exemplo, border 1px solid black, red, 10px, uppercase, contain e etc. E o valor passado como URL entre as aspas ('') não é válido.

O máximo que você conseguiria fazer com o CSS é usar a propriedade content em conjunto os pseudo-elementos ::before ou ::after para "concatenar" duas strings:

<html>

<head>
  <style>
    .btn-view::after {
      content: "https://meudominio.com" "/assets/imgs/eye.jpg";
    }
  </style>
</head>

<body>
  <div class="btn-view"></div>
</body>

</html>

Porém, tanto ::before quanto ::after são usados para gerarem conteúdo no elemento (adicionando conteúdo antes e depois) e não de certa forma incorporar algo no elemento e os mesmos não dariam para serem usados como valores em conjunto com as variáveis do CSS já que voltaria ao que foi dito antes os valores seriam inválidos. Por tanto, o melhor a se fazer é usar JavaScript para contornar o que deseja fazer.

3
  • entendi, então não há como acabar com os ../../ da vida né? Pelo menos por enquanto. Obrigado! 6/03/2022 às 14:10
  • 1
    @CarlosRocha, como assim acabar com os ../../? Eles são usados apenas para acessar o diretório de um terminado arquivo.
    – Leandro
    6/03/2022 às 14:40
  • url(../../assets/imgs/eye.jpg); MUDOU pata url(.assets/imgs/eye.jpg); 6/03/2022 às 17:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .