Блог

Я пытаюсь использовать пользовательские свойства CSS в значении rgba. Я могу получить желаемый результат в чистом css, но когда я тестирую это в codepen.io или в моей IDE, которые оба используют scss, я получаю сообщение об ошибке: overloaded function `rgba` given wrong number of arguments . Как я могу включить это в SCSS

Вот codepen, который показывает ошибку:https://codepen.io/tmocodes/pen/xxVdMEq?editors=1100 Приведенный ниже фрагмент работает, потому что он не использует SCSS.

 :root {
  --color-primary: 29 4 247;
  --lighten: 10%;
}

#element {
  background-color: rgba(var(--color-primary) / var(--lighten));
  color: rgb(var(--color-primary));
}  

 <h1 id="element">Using CSS Custom Properities with opacity</h1>  

Чтобы включить современный синтаксис CSS color без запятых в SCSS, я использовал этот обходной путь.

Причина, по которой это не работает, заключается в том, что оно конфликтует с функцией Sass rgb / rgba. Вы можете ввести одну или несколько букв в верхнем регистре, чтобы заставить Sass игнорировать это (с учетом регистра). Демонстрация CodePen.

 $color-primary: 29 4 247;
$color-secondary: 247 4 4;
$lighten: 10%;

#element {
  background-color: Rgba($color-primary / $lighten);
  color: Rgb($color-primary);
}

#element-2 {
  background-color: Rgba($color-secondary / $lighten);
  color: Rgb($color-secondary);
}
  

Препроцессор SCSS должен вычислить значения, прежде чем они могут быть назначены переменным css. Следующий подход может дать вам подсказку к решению, которое вы ищете.

rgba требуется 4 параметра

rgb требуется 3 параметра.

 $blue: rgb(29, 4, 247);
$red: rgb(29, 4, 247);
$lighten: 10%;
:root {
  --color-primary: #{blue};
  --color-secondary: #{red};
  --lighten: #{lighten};
}
        
#element {
  background-color: lighten($blue, $lighten);
  color: $blue;
}

#element-2 {
  background-color: lighten($red, $lighten);
  color: $red;
}
  

Я создал следующий CodePen, который дает представление о том, как комбинировать scss с переменными css.