일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 함수형 프로그래밍
- ToDo
- nuxt universal rendering
- ecmascript modules(esm)
- d3 지도 타입스크립트
- d3 지도
- Learning React
- in-memory pm2 is out-of-date
- 참조형 default
- vue 컴포저블 함수
- pm2 버전 충돌
- 화살표 함수 중괄호
- $fetch
- 인터넷 거버넌스
- git
- cloud firestore id auto increment
- 참조형 props의 default
- vuedraggable
- component is already mounted please use $fetch instead.
- repaint
- vue composable 함수
- d3 지도 툴팁
- d3 지도 확대/축소
- reflow
- vue3 drag and drop
- firebase id 자동
- pm2 업데이트 에러
- vue draggable 차트 안나옴
- 화살표 함수 {}
- commonjs와 ecmascript modules(esm)
- Today
- Total
빵 입니다.
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
'스타디 > CSS, SCSS' 카테고리의 다른 글
유튜브 동영상 추가하기(feat. iframe) (6) | 2022.12.19 |
---|---|
[2/2] @import 대신 @use 사용하자. sass-migrator를 사용해보자. (0) | 2022.09.14 |
CSS Variable Syntax (0) | 2022.08.30 |
Dart Sass 의 calc() 내에서 / 삭제될 예정 (0) | 2022.08.30 |
font-size em vs rem (0) | 2022.08.22 |