SCSS에서 rgb값 사용하기

회사에서 SCSS에서 rgba() 사용에 대한 질문을 받았다.

rgba(red, green, blue, alpha); 혹은 rgba(aqua, 0.5);

막연하게 위의 내용처럼 사용하면 되는구나 생각했다.

만약 rgba 값으로 var() 함수를 이용해 사용자 지정 속성 사용하고 싶다면 어떻게 해야 할까?

 

그래서 테스트를 해보았다.

// (O)
color: rgba(red, 0.5);
color: rgba(#ff0000, 0.5);
color: rgba(#f00, 0.5);
color: rgba(255, 0, 0, 0.5);
color: rgba(rgb(255, 0, 0), 0.5);
$red: #f00;
color: rgba($red, 0.5);

• 색상명
• HEX 코드
• 3자리 HEX 코드
• 풀어쓴 rgb 값
• rgb() 함수를 이용한 rgb 값
• $변수명

rgb 자리에 위의 내용들이 모두 적용 가능하다.

 

그렇다면 사용자 지정 속성을 사용한다면?

// (X)
:root {
  --font-color: red;
}
color: rgba(var(--font-color), 0.5);

:root {
  --font-color: #ff0000;
}
color: rgba(var(--font-color), 0.5);

:root {
  --font-color: #f00;
}
color: rgba(var(--font-color), 0.5);

:root {
  --font-color: rgb(255, 0, 0);
}
color: rgba(var(--font-color), 0.5);

:root {
  --font-color: $red;
}
color: rgba(var(--font-color), 0.5);


// (O)
:root {
  --font-color: 255, 0, 0;
}
color: rgba(var(--font-color), 0.5);

color: rgba(var(--font-color), 0.5);에서

var(--font-color) 사용자 지정 속성 값이 오직 세 자리의 숫자 값이어야만 한다.

너무 불편한 일이다. 가독성도 떨어지고 비효율적이다.

 

어떻게 하면 SCSS에서 제공하는 선에서 작업을 효율적으로 할 수 있을까?

좀 더 편하게 사용하기 위해서 함수를 만들어 보기로 했다.

작업할 내용

1. 컬러 값을 받아서 rgb로 변경하는 함수를 만든다.

2. 사용자 지정 속성에 함수(컬러 값)을 선언한다.

* 함수는 바로 사용할 수 있는 값을 반환하기 때문에, 사용자 지정 속성: 함수(컬러 값);을 선언하면 바로 적용된다.

 

@function으로 colorToRgb() 함수를 만들었다.

sass:color를 이용해 각각의 red, green, blue 값을 추출했다.

* sass:color 사용 시, 파일 상단에서 @use를 사용해 불러온다.

 

각 값을 변수에 담아 r, g, b 값을 반환했다.

보간법을 이용해 사용자 지정 변수에 선언했다.

*보간법을 사용하면 단순 문자열 255, 0, 0 이 적용되어 잘 출력된다.

// mixin.scss
@use "sass:color";
@function colorToRgb($color) {
  $redValue: color.red($color);
  $greenValue: color.green($color);
  $blueValue: color.blue($color);
  @return $redValue, $greenValue, $blueValue;
}
:root {
  --font-color: #{colorToRgb(#ff0000)};
}


// main.scss
color: rgba(var(--font-color), 0.5);

colorToRgb(컬러 값)

컬러 값은 어떤 방식으로 입력해도 사용 가능하다. 유연하게 사용할 수 있다.

• 색상명
• HEX 코드
• 3자리 HEX 코드
• 풀어쓴 rgb 값
• rgb() 함수를 이용한 rgb 값
• $변수명

한 단계 더 나아가 alpha 값까지 추가하는 함수로 변형시켜 사용할 수도 있다.

 

---

Sass:color

https://sass-lang.com/documentation/modules/color

 

Sass Function

https://sass-lang.com/documentation/at-rules/function

 

Sass Interpolation

https://sass-lang.com/documentation/interpolation

 

Sass Variable Syntax

https://sass-lang.com/documentation/breaking-changes/css-vars

 

CSS var()

https://developer.mozilla.org/ko/docs/Web/CSS/var

 

CSS 사용자 지정 속성

https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties