CSS 변수를 사용하여 JavaScript를 줄이는 방법

주: 제 게시물의 영감은 재능이 넘치는 크리스 코일(Chris Coyier)의 CSS에 대한 힘calc()에서 왔습니다.절대 읽을 만하다!
만약 당신이 2018년 이후 줄곧 인터넷의 발전을 따라가고 있다면, 당신은 this article를 만날 수 있을 것이다.그것들은 이미 응용 프로그램의 새로운 이슈가 되었다. 심지어 원시 CSS를 사용하는 것뿐만 아니라, JS 솔루션CSS custom properties / variables의 새로운 CSS도 직접 복제할 수 없기 때문이다.
내가 처음으로 CSS 사용자 정의 속성을 알았을 때, 나는 그것들에게 너무 많은 공평한 대우를 주지 않았다. 왜냐하면 나는 이미 이렇게 JS에서 CSS를 사용하는 지지자가 되었기 때문이다.😛), 그러나 최근의 프로젝트는 나에게 전통적인 스타일시트로 돌아가라고 요구했다. 왜냐하면 외래의 프레임워크Styled Components를 사용했기 때문이다.
처음에 간단하게 스타일을 설명하는 것이 필요했고 어떤 형식의 변수도 관리할 수 있는 것 같지 않았다.코드 기반 사용자 정의가 필요할 때마다 내연 CSS 문자열을 신속하게 생성하고 최적화를 걱정하지 않고 요소에 고정시킬 수 있습니다.그러나 사이트는 여전히 빨라 보이지만, 나의 코드 라이브러리는 갈수록 읽을 수 없다.입력: CSS 변수!
방주: 한동안 사람들은 지붕 위에서 소리를 질렀다. "그것들은 변수가 아니다. 그것들은 사용자 정의 속성이다!"다행히도 관련 MDN 문서와 통용 행어는 변수라고만 할 정도로 발전했다.이 두 가지 방법은 모두 가능하지만, 내가 보기에는'변수'가 좀 더 명확하다😊

날씬했어 그러면 CSS 변수는 어떻게 작동합니까?

익숙하지 않은 사람에게는 선택한 모든 요소에서 변수를 설명하거나 :root 선택기에서 변수를 설명하여 전역적으로 접근할 수 있도록 할 수 있습니다.--[property-name] 구문을 사용하면 CSS는 이를 변수로...

:root {
    --global-var: 50px;
}
.some-class {
    --scoped-var: 4%;
}

... 그런 다음 var(--[property-name]) 를 사용하여 하위 요소 (또는 글로벌 속성의 모든 요소) 에서 이러한 변수를 사용합니다.

.child-of .some-class {
    margin: var(--scoped-var);
}

이것은 의 작업 원리와 유사합니다. 다만 CSS 변수는 선택한 측정 단위를 사용하고 모든 CSS 속성을 정의하는 데 사용할 수 있습니다.이것은 공인된 서투른 문법에도 불구하고 이전 프로세서의 변수가 여러 해 동안 제공해 온 유연성과 같은 유연성을 얻을 수 있다는 것을 의미합니다(헤이, 이것은 CSS3).🤷‍♀).
잘 알려지지 않은 것은 CSS 변수가 어떻게 단위가 없을 수 있는지이다.처음에는 큰 문제가 아닌 것처럼 보였지만 calc()와 결합하면 CSS 변수는 일정한 수량에 따라 속성을 축소하는 데 사용할 수 있다는 큰 장점을 제공했다.이것은 내 코드를 재구성하는 데 있어서 값을 매길 수 없다. 왜냐하면 이것은 내가 몇 줄의 CSS 계산만으로 자바스크립트로 CSS 문자열 구조를 다시 쓸 수 있다는 것을 의미하기 때문이다.

CSS 속성 예를 하나 봅시다.

실제 사용자 정의 속성을 나타내기 위해 저는 제가 구축한 투자조합 개념에서 논리적인 부분을 추출할 것입니다.
목표는 매우 간단하다. 나는 강조조가 순환 중에 한 조의 점차적인 변화를 통해 점차적인 변화에서 다음 점차적인 변화로 전환하는 것을 원한다.경고가 하나 있습니다. 페이지의 다른 요소에 순환 간격을 사용하지만 논리 CSS는 복사할 수 없습니다. 일치성을 위해서 강조 표시줄에서 같은 간격을 사용하고 싶습니다.물론 이 간격은 자바스크립트setInterval(...)에서 정의됩니다.콜백 함수를 호출할 때마다 CSS를 변경해야 합니다.이 간격은 부모 구성 요소에 설정되어 있으며, 강조 표시줄 구성 요소에 접근합니다. (네, 구성 요소 기반 프레임워크를 사용합니다.)
이 예시를 깊이 연구하기 전에 이 프로젝트는 Svelte의 기초 위에서 세워진 것임을 주의하십시오.이것은 코드의 가독성에 심각한 영향을 주어서는 안 된다.약간의 마술과 관련된 작은 세부 사항만 받아들일 수 있다✨

최종 목표

나의 이전 방법

처음에 나는 숨겨진 넘침이 있는 넓은 배경 이미지를 만들어서 점차적인 변화를 순환하고 간격의 각 각도에서 배경 위치를 이동했다.비록 그것이 실제로는 큰 사다리를 통해 움직인다 하더라도 배경이 색을 바꾸는 착각을 주었다.그러나 이 배경 직위는 대량의 계산이 필요하다.
몇 개의 구성 요소 사이에서 모든 간격 추적을 간단하게 유지하기 위해 도구로 전달되는 변수 gradientIndex 를 추적했습니다.이 색인은 내가 순환해서 사용하는 점차적인 색 목록에 대응한다.
그러나 이것은 CSS를 업데이트하기 위해 추가 논리가 필요하다는 것을 의미한다. 언제든지 GRADIENTS 변경될 때, 내연 스타일로 적용하기 위해 새로운 CSS 문자열을 만들어야 한다.따라서 gradientIndex 속성이 바뀔 때 우리는 생명주기 방법을 발굴하여 문자열을 구성해야 한다.Svelte에서는 리셋 함수gradientIndex를 사용하여 다음을 수행합니다.

...
afterUpdate(() => {
  backgroundPosition = `${(100 / (GRADIENTS.length - 1)) * gradientIndex}%`;
});

또한 넘침 배경 크기를 계산하려면 afterUpdate 에서 백분율을 얻어야 합니다.

const backgroundSize = `${GRADIENTS.length * 200}% 100%`;

마지막으로 우리는 이를 구축된 선형 그라데이션 배경과 함께 우리의 내연 스타일에 추가한다.

<span
  class="bar"
  style="background-image: {backgroundImage};
  background-position: {backgroundPosition};
  background-size: {backgroundSize}"
></span>

따라서 그렇습니다. 최종 결과는 운행이 양호하고 성능 문제가 없습니다...어쨌든 내 기능이 강한 맥북에서😛 그러나 우리는 상당히 많은 복잡성을 증가시켰다. 우리의 확장에 따라 이러한 복잡성은 더욱 나빠질 뿐이다.우리는 내연 CSS 구조를 처리하기 위해 생명주기 방법을 추가했고, 자바스크립트에서 변수를 마구 던졌다. 이 변수들은 그들이 속한 스타일에 저장하는 것이 가장 좋다.CSS로만 계산하는 방법이 있었으면 좋겠어요!

보다 읽기 쉬운 새로운 솔루션

그렇다면 우리는 어떻게 CSS 변수를 사용하여 이 문제를 해결합니까?알겠습니다. JS에 구축된 배경 위치 문자열을 보십시오. 계산에 몇 개의 사다리(GRADIENTS.length와 현재 인덱스로 위치를 계산해야 하는지 보십시오(GRADIENTS.length.그렇다면 왜 모든 CSS 변수를 만들지 않습니까?
고맙게도 CSS 변수는 다른 CSS 속성처럼 내연 스타일을 사용하여 설정할 수 있습니다(SASS의 변수에 대해서는 그렇지 않습니다!).그러면 앞에서 언급한 두 변수가 모두 구성 요소 상태의 일부분이라고 가정해 보세요.다음 인라인 스타일을 사용하여 CSS를 볼 수 있습니다.

<span
  class="bar"
  style="background-image: {backgroundImage};
  --index: {gradientIndex};
  --length: {gradientLength}"
></span>

이제 CSS의 배경 크기와 위치를 결정하기 위해 gradientIndex 를 사용합니다.

.bar {
  --index: 0;
  --length: 0;
  background-size: calc(var(--length) * 200%) 100%;
  background-position: calc((100 / (var(--length) - 1)) * var(
  --index) * 1%);
}

여기 열어야 할 게 좀 있어요.우선, 완전성을 위해서 우리는 모든 변수를 특정한 초기 값으로 설정한다.CSS 변수를 초기화하는 것이 좋은 습관임에도 불구하고 내연 스타일을 항상 적용해야 하기 때문에 이것은 필요없다.다음으로 우리는 배경 위치를 JS와 비슷하게 설정했지만 현저한 차이가 있다. 우리는 백분율을 변수 뒤에 직접 쓰지 않고 백분율을 곱한다.이는 calc() 변수를 수학의 상수로 간주하기 때문에 도량 단위를 적용하려면 값을 곱해야 하기 때문이다.
읊다, 읊조리다
...잠깐만, 이미 없어!🎉

저희가 더 깊이 들어갈 수 있을까요?

이 예는 변수 등급을 이용하지 않았다.이것은 구성 요소 기반 개발에 매우 유용합니다. 왜냐하면 많은 이상한 CSS 계산을 부모 구성 요소에 통합할 수 있기 때문입니다.그런 다음 서브어셈블리는 종속 연결된 상위 레벨에서 CSS 변수에 액세스할 수 있습니다.우리의 예시에서 우리는 색 표시줄을 둘러싼 상위 레벨에서 --index CSS 변수를 만들고 도구로 완전히 전달하는 것을 피할 수 있습니다!
물론 가독성에 부정적인 영향을 미치기 시작할 수 있다. 개발자가 깨닫지 못한 상황에서 몇 가지 단계의 변수가 겹쳐진다.이것은 등급 연결 사고와 구성 요소를 바탕으로 하는 사고 사이의 오래된 충돌을 폭로했기 때문에 이 기술을 신중하게 사용하십시오.

끝내다

이 점은 사용자 정의 속성이 자바스크립트 논리를 스타일시트로 크게 옮길 수 있다는 것이 분명하다.또한 현재 CSS 변수는 대부분의 현대 브라우저와 호환됩니다(물론 IE는 제외)😢), 생산 코드에서 실험을 하더라도 그것들은 상당히 안전해야 한다.그럼 스타일링 시작!

뭐 공부 해요?

너무 좋아요.만약 당신이 놓쳤다면, 나는 을 발표하여 더 많은 이런 지식의 보고를 탐색할 것이다!
이 일은 웹 개발 문제를 해결했다my "web wizardry" newsletter.다시 말하면 우리의 모든 웹 프로젝트를 돌아가는 서투른 브라우저 API, 구부러진 CSS 규칙, 반접근 가능한 HTML은 무엇입니까?만약 네가 틀을 뛰어넘고 싶다면, 이것은 너에게 주는 것이다, 사랑하는 인터넷 마법사🔮
"first principles" . 나는 영원히 가르치고 스팸메일을 보내지 않겠다고 보증한다❤️