lighten mixin with css variables not working

Asked Jul 05 '19 at 12:24

Active Jul 05 '19 at 12:24

Viewed 449 times

I'm trying to use the sass mixin lighten with css variables but it doesn't seem to work. Any ideas what I'm doing wrong?

CSS

:root {
       --primary-color: 2, 0, 182;
     }


    .btn--primary {
      width:100px;
      height:20px;
      display:block;
      background: rgba(var(--primary-color), .85);
      background: -moz-linear-gradient(top, rgba(var(--primary-color), 1) 0%, lighten(rgba(var(--primary-color)), 10%) 85%);
      background: -webkit-linear-gradient(top, rgba(var(--primary-color), 1) 0%, lighten(rgba(var(--primary-color)), 10%) 85%);
      background: linear-gradient(to bottom, rgba(var(--primary-color), 1) 0%, lighten(rgba(var(--primary-color)), 10%) 85%);
    }

HTML

<button>Send</button>

asked Jul 05 '19 at 12:24

user1937021

10,151
22
81
143

you cannot. SASS is a preprocessor and come before CSS and cannot read CSS variable – Temani Afif Jul 05 '19 at 12:32
if you want to consider CSS variable you need to do this in CSS. Related: https://stackoverflow.com/a/55330103/8620333 – Temani Afif Jul 05 '19 at 12:33

lighten mixin with css variables not working

0 Answers0