Почему мои CSS переменные добавляют разметку комментариев? - PullRequest
Новая
       16

Почему мои CSS переменные добавляют разметку комментариев?

5 голосов
/ 08 января 2020

Я хотел бы определить пару линейных градиентов и применить их только с CSS правилами: я пробовал это: 

console.log(
  window
    .getComputedStyle(document.querySelector('body'))
    .getPropertyValue('--btnPrimary')
);
:root{
  --primary: #4169e1;
  --secondary :#ef3c3a;
  --grey: #585f74;
  --g-light: #b6bbc8;

  --p2s-3: #c44764;
  --s2p-3: var(--p2s-1);

  --p-btngrad-a: var(--primary);
  --p-btngrad-b: var(--p2s-3);

  --lgrad-angle: 75;
  --lgrad-stop-a: 45;
  --lgrad-stop-b: 99;

  --btnPrimary: linear-gradient(
    var(--lgrad-angle)deg,
    var(--p-btngrad-a) var(--lgrad-stop-a)%,
    var(--p-btngrad-b) var(--lgrad-stop-b)%
  );
  --btnSecondary: linear-gradient(
    var(--lgrad-angle)deg,
    var(--s-btngrad-a) var(--lgrad-stop-a)%,
    var(--s-btngrad-b) var(--lgrad-stop-b)%
  );
}

div.demo{
  height:200px;
  width:200px;
  background:var(--btnPrimary);
}

div.demo:hover{
  background:var(--btnSecondary);
}
<h1>css only linear gradient by parameters</h1>
<div class="demo">hover me</div>

Но это не работает. Консоль показывает, почему: 

 linear-gradient(75/**/deg, #4169e1 45/**/%, #c44764 99/**/% )

Почему за переменными CSS следует разметка комментария ("/ ** /")?

Как это исправить?

Ответы [ 2 ]

3 голосов
/ 08 января 2020

вам нужно умножить вашу переменную на единицу, которую вы хотите использовать. (chrome, похоже, она не нужна) 

//console.log(
//  window
//    .getComputedStyle(document.querySelector('body'))
//    .getPropertyValue('--btnPrimary')
//);
:root{
  --primary: #4169e1;
  --secondary :#ef3c3a;
  --grey: #585f74;
  --g-light: #b6bbc8;

  --p2s-3: #c44764;
  --s2p-3: var(--p2s-1);

  --p-btngrad-a: var(--primary);
  --p-btngrad-b: var(--p2s-3);

  --lgrad-angle: 75;
  --lgrad-stop-a: 45;
  --lgrad-stop-b: 99;

  --btnPrimary: linear-gradient(
    calc(var(--lgrad-angle) * 1deg),
    var(--p-btngrad-a) calc(var(--lgrad-stop-a) * 1%),
    var(--p-btngrad-b) calc(var(--lgrad-stop-b) * 1%)
  );
  --btnSecondary: linear-gradient(
    calc(var(--lgrad-angle) * 1deg),
    var(--s-btngrad-a) calc(var(--lgrad-stop-a) * 1%),
    var(--s-btngrad-b) calc(var(--lgrad-stop-b) * 1%)
  );
}

div{
  height:200px;
  width:200px;
  background:var(--btnPrimary);
}

div:hover{
  background:var(--btnSecondary);
}
<h1> css only linear gradient by parameters</h1>
<div>hover me </div>
<code>    var(--s-btngrad-a) &     var(--s-btngrad-b)</code> are missing
2 голосов
/ 08 января 2020

Вы не указали единицу измерения (градусы и%) для переменных; и здесь говорится, что :

Обратите внимание, что подстановка var () происходит на уровне CSS токенов [css -syntax-3], а не на уровне текстовый уровень; Вы не можете создать один токен, в котором его часть предоставляется переменной:

Передавать измерение непосредственно в переменную, а не объединять его впоследствии. 

//console.log(window.getComputedStyle(document.querySelector('body')).getPropertyValue('--btnPrimary'));
:root{
  --primary: #4169e1;
  --secondary :#ef3c3a;
  --grey: #585f74;
  --g-light: #b6bbc8;

  --p2s-3: #c44764;
  --s2p-3: var(--p2s-1);

  --p-btngrad-a: var(--primary);
  --p-btngrad-b: var(--p2s-3);

  --lgrad-angle: 75;
  --lgrad-stop-a: 45;
  --lgrad-stop-b: 99;

 
    --lgrad-angle:75deg;
    --lgrad-stop-a:45%;
    --lgrad-stop-b:99%;

    --btnPrimary:linear-gradient(var(--lgrad-angle), var(--p-btngrad-a) var(--lgrad-stop-a), var(--p-btngrad-b) var(--lgrad-stop-b));
    --btnSecondary:linear-gradient(var(--lgrad-angle), var(--s-btngrad-a) var(--lgrad-stop-a), var(--s-btngrad-b) var(--lgrad-stop-b) );
  
}

div{
  height:200px;
  width:200px;
  background:var(--btnPrimary);
}

div:hover{
  background:var(--btnSecondary);
}
<h1> css only linear gradient by parameters</h1>
<div>hover me</div>
...