0

É possivel recuperar uma parte do nome de uma classe em um elemento e passar como valor para a propriedade do CSS utilizand Stylus? Exemplo

.font-word-spacing-light--1 {
  word-spacing: -0.1px !important
}
.font-letter-spacing-light--1 {
  letter-spacing: -0.1px !important
}
.align-left--16px {
  position relative
  left -16px
}

E neste caso, utilizar no elemento da seguinte forma

<h2 class="font-word-spacing-light--1 font-letter-spacing-light--1 align-left--16px">Elemento</h2>

Neste caso, queria saber se isso é possível, como o vuetify faz algo assim, fiquei imaginando se é possível, lá tem por exemplo as classes de cores

cor-vermelha /* cor de fundo vermelha */
cor-vermelha--text /* cor da fonte vermelha */

Eu li no manual que existem Mixins, Variáveis e Funções só não entendi direito como utilizar e se possibilita o que mencionei


Vamos dizer que algo prático ficaria assim (estou apenas exemplificando com uma sintaxe qualquer)

<h2 class="cor-do-texto--ff00ff tamanho-do-texto--60">
  Título com cor #ff00ff e tamanho 60PX
</h2>

<style lang="stylus">
  .cor-do-texto--{%s}
    color #{%s} /* imprime color: #ff00ff */

  .tamanho-do-texto--{%s}
    text-size {%s}PX /* imprime text-size: 60px */
</style>

resolução caso alguém chegue aqui com a mesma dúvida

maxkw = 7680

width(n)
  width n !important

min-width(n)
  min-width n !important

max-width(n)
  max-width n !important

.width
  for r in 0..maxkw
    &-{r}
      width(1px * r)
  for r in 0..maxkw
    &-v-{r}
      width(1vw * r)
  for r in 0..maxkw
    &-per-{r}
      width(1% * r)

.min-width
  for r in 0..maxkw
    &-{r}
      min-width(1px * r)
  for r in 0..maxkw
    &-v-{r}
      min-width(1vw * r)
  for r in 0..maxkw
    &-per-{r}
      min-width(1% * r)

.max-width
  for r in 0..maxkw
    &-{r}
      max-width(1px * r)
  for r in 0..maxk
    &-v-{r}
      max-width(1vw * r)
  for r in 0..maxkw
    &-per-{r}
      max-width(1% * r)


maxkh = 4320

height(n)
  height n !important

min-height(n)
  min-height n !important

max-height(n)
  max-height n !important

.height
  for r in 0..maxkh
    &-{r}
      height(1px * r)
  for r in 0..maxkh
    &-v-{r}
      height(1vh * r)
  for r in 0..maxkh
    &-per-{r}
      height(1% * r)

.min-height
  for r in 0..maxkh
    &-{r}
      min-height(1px * r)
  for r in 0..maxkh
    &-v-{r}
      min-height(1vh * r)
  for r in 0..maxkh
    &-per-{r}
      min-height(1% * r)

.max-height
  for r in 0..maxkh
    &-{r}
      max-height(1px * r)
  for r in 0..maxkh
    &-v-{r}
      max-height(1vh * r)
  for r in 0..maxkh
    &-per-{r}
      max-height(1% * r)
2
  • Não é possível, o propósito do Stylus não é esse. Você teria que ter uma classe para cada item que quer estilizar, pois o código precisa ser processado para virar CSS. Nesse caso, acho que é mais vantajoso alternar as propriedades do elemento diretamente com JS. Commented 7/03/2019 às 19:45
  • @Renan entendi, imaginei, que pena que as functions não funcionam assim
    – flourigh
    Commented 7/03/2019 às 19:58

2 Respostas 2

0

Não sei se entendi bem, mas acho que é isso que vc precisa. Se vc tem uma variável que contem uma cor, vc pode incluir essa cor na propriedade, como abaixo.

Se vc tem esse Stylus

vermelha = red

.cor-vermelha 
    background vermelha

.cor-vermelha--text
    color vermelha

Output do CSS

.cor-vermelha {
    background: red;
}

.cor-vermelha--text {
    color: red;
}

OBS: o detalhe é que com o código acima vc vai ter a cor do texto igual a do fundo e vc não veria o texto pq os dois estão da mesma cor...

HTML

<h2 class="cor-vermelha cor-vermelha--text">Elemento</h2>
9
  • olá, no caso, é quase isso porém a cor vermelha é só exemplo, o que eu queria é não ter que prédeterminar a cor vermelha, exemplo .cor--red então o stylus coloca red na var $vermelha ou vamos supor que eu envie cor-do-texto--ff0000 então ele coloca o ff0000 na variavel e a classe obtem esta variável como algo .cor-do-texto^ff0000
    – flourigh
    Commented 7/03/2019 às 18:34
  • @flourigh vc quer usar um nome de classe que não existe, por exemplo cor-fff e quer que o Browser de alguma forma identifique esse -fff e coloque a cor do texto branco? Isso não é possível! Acho que o mais próximo que vc vai conseguir é isso pt.stackoverflow.com/questions/330390/…
    – hugocsl
    Commented 7/03/2019 às 18:56
  • seria basicamente isso mesmo, ele indentificar a classe e pegar o que está depois de -- como se fosse uma variável como o vuetify faz quando usamos cor-que-eu-quero--text
    – flourigh
    Commented 7/03/2019 às 19:18
  • @flourigh então a resposta no momento acredito que não seja possível! Nem som Stylus, ou SASS, pois do HTML vc não consegue mudar uma classe que esteja no seu .CSS, a não ser como nas opções do link que te passei, Mas como esses pré-processadores vc não consegue mudar o valor da variável a partir do style no HTML.
    – hugocsl
    Commented 7/03/2019 às 19:21
  • 1
    @flourigh todos esses exemplos são construídos no Stylus e depois compilados para o CSS, não tem nada falando que vc pode alterar o nome da classe no HTML e ele altera o valor da propriedade no CSS. O que pode acontecer e vc configurar algum WebPack da vida para tratar esse tipos de coisa, ai na hora de subir o projeto ele pega a última string do nome da classe e cria uma variável no Stylus com esse valor e seta no elemento, algo bem complexo, mas que aconteceria na compilação e não "nativamente" escrevendo HTML/CSS. Isso margin(n) ou opacity(n) deve ser feito no Stylus/CSS, não no HTML
    – hugocsl
    Commented 7/03/2019 às 20:24
0

Eu já havia deixado isso de lado, até que hoje eu descobri apenas por acidente por ter entendido outro fator do stylus, ointerpolation com parametros, bom, logo descobri que posso fazer desta forma

  width(n)
    width n !important

  .width
    for row in 0..999999
      &-{row}
        width(1px * row)
    &-half
      width 50%
    &-full
      width 100%

e ao criar um elemento com a classe

<div class="width-100"/>

este terá 100 pixels ou qualquer quantidade até no máximo 999999, pode ser mais, mas não vejo motivo para width

http://stylus-lang.com/docs/interpolation.html

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 .