CSS Variable with SCSS

rgba with SCSS

rgba 값은 콤마로 나누어진 4개의 숫자 값만 유효해서
SCSS rgba function 은 CSS variable을 오류로 인식한다.

 

border: 1px solid rgba(#000, 0.1); // valid - SCSS function
border: 1px solid rgba(0, 0, 0, 0.1); // valid - CSS rgba

--color-black-hex: #000;
--color-black-rgb: 0, 0, 0;
border: 1px solid rgba(--var(color-black-hex), 0.1); // invalid - SCSS function
border: 1px solid rgba(--var(color-black-rgb), 0.1); // valid - CSS rgba

SCSS Variable inside CSS variable

CSS variable 값은 문자열이여야한다. (SCSS variable escape 필요)

 

$G-color-black: #000;

--color-text-black: $G-color-black; // invalid
--color-text-black: rgba($G-color-black, 0.7); // invalid
--color-text-black: #{$G-color-black} // valid
--color-text-black: #{rgba($G-color-black, 0.7)}; // valid

CSS variable with !important

! important를 붙여서 넘겨도 스펙상 무시된다. variable을 사용할 때 important를 추가해야 한다.

 

// invalid 
--color-bg-floating-bar: #000!important; 
background-color: var(--color-bg-floating-bar);

// valid
--color-bg-floating-bar: #000; 
background-color: var(--color-bg-floating-bar)!important; 

Reference

• https://css-tricks.com/dry-state-switching-with-css-variables-fallbacks-and-invalid-values/
• https://www.techhive.io/our-insights/how-to-use-css-variables-with-sass-mixins