VSCode에 CSScomb 확장 기능이 있는 상태에서 SCSS를 저장할 때,
8자리 알파 값이 있는 HEX 표기 컬러 코드(ex. #000000fd)가 5자리로 변환됩니다.

라는 현상이 발생했기 때문에 해결해 보겠습니다.

전제

VSCode 사용

VSCode에 CSScomb

저장 시 CSScomb에 의한 자동 성형이 된다

settings.json에 "csscomb.formatOnSave": true가 들어 있으면 OK

결론

루트 디렉토리에 있는 .csscomb.json 의 color-shorthand 값을 다시 작성하면 해결됩니다.

true이므로 false로 수정합시다.

csscomb.json

{
  ..
  "color-shorthand": false,
  ..
}

해설

저장하려고합니다.

(코피페용)

hoge.scss

// アルファ値なし
$shortHexColor: #333; // 3桁
$hexColor1: #333333; // 3桁にできる6桁
$hexColor2: #353535; // 3桁にできない6桁

// アルファ値あり
$shortWithAlpha1: #3335; // 4桁
$withAlpha1: #33333355; // 4桁にできる8桁
$withAlpha2: #35353535; // 4桁にできない8桁

"color-shorthand": true인 경우

보시다시피 $withAlpha1에 지정된 색상 코드가 5 자리 숫자가되어 오류가 발생합니다.
#33333355 → #33355 로 되어 있기 때문에, RGB값까지는 생략했지만 α값은 그대로 5자리가 되어 있는 것 같습니다
6 + 2 = 8 → 3 + 2 = 5
hoge.scss

// アルファ値なし
$shortHexColor: #333; // 3桁
$hexColor1: #333; // 3桁にできる6桁
$hexColor2: #353535; // 3桁にできない6桁

// アルファ値あり
$shortWithAlpha1: #3335; // 4桁
$withAlpha1: #33355; // 4桁にできる8桁
$withAlpha2: #35353535; // 4桁にできない8桁

"color-shorthand": false의 경우

여기는 생략하지 않고 모든 패턴에 에러는 나오지 않았습니다만,
일부러 생략해 쓰고 있던 `$shortHexColor를 정중하게도 길게 해 주고 있어요

4자리의 #3335 는 #3333335 의 7자리로 해서 에러로 하는 것도 아니고, #33333355 의 8자리로 하는 것도 아니고 스루인데 이상하네요

hoge.scss

// アルファ値なし
$shortHexColor: #333333; // 3桁
$hexColor1: #333333; // 3桁にできる6桁
$hexColor2: #353535; // 3桁にできない6桁

// アルファ値あり
$shortWithAlpha1: #3335; // 4桁
$withAlpha1: #33333355; // 4桁にできる8桁
$withAlpha2: #35353535; // 4桁にできない8桁

감상

"color-shorthand": false 로 알파 값을 가지는 칼라 코드도 무사히 보존할 수 있게 되었습니다만,
생략하고 쓰는 것은 무시해주세요 ...