SCSS를 사용하여 기본값 및 CSS 변수 생성

Question

웹사이트 스타일링을 구현하고 있습니다.

레거시 지원상의 이유로 적어도 한동안은 IE11을 지원해야 합니다. 작업 흐름과 제정신의 이유로 가능할 때마다 CSS 변수를 사용하고 싶습니다.

나는 이 솔루션을 조사한 결과 작동하는 것을 생성하지만 사용하기에는 다소 장황합니다.

내 목표는 CSS 변수에 의해 즉시 재정의되는 하드코딩된 값을 만드는 것입니다. 이렇게 하면 모든 사람을 위한 기본 테마를 추가하고 CSS 변수를 지원하는 브라우저에 대해 다른 테마(예: 어두운 모드)를 추가할 수 있습니다. 분명히 이 모든 것을 직접 작성할 필요는 없습니다.

그래서 제 생각은 다음과 같이 쓸 수 있다는 것입니다:

으아악

다음과 같이 번역됩니다.

으아악

scss를 사용하여 이를 달성할 수 있나요? 저는 임의의 npm 모듈이나 기타 타사 컴파일러 및 트랜스파일러를 추가하여 이 프로젝트를 부풀리고 싶지 않습니다 .

CSS 변수에 대한 지원을 추가하기 위해 IE11에 폴리필을 추가하는 것이 가능하다는 것을 알고 있지만, 지금까지 발견한 대부분에는 불행한 제한이 있습니다(게다가 제가 선호하는 타사 코드입니다). 가능한). SCSS를 사용하는 좋은 솔루션이 없을 경우 이것이 제가 선택할 수 있는 솔루션입니다.

Answer 1

개선할 수 있는 빠른 솔루션은 다음과 같습니다.

1. 모든 색상을 사용하여 지도를 정의하세요.

으아악

2. 지도를 반복하여 CSS 사용자 정의 속성 만들기:

으아악

3. 대체 합계 값을 출력하는 믹스인을 만듭니다.
   저는 2개의 매개변수, 즉 CSS 속성과 원하는 색상을 사용하는 믹스인을 만들기로 결정했습니다.

으아악

4. 그러면 다음과 같이 사용할 수 있습니다:

으아악

---

전체 코드:

으아악