Sass와 새로운 CSS 기능이 충돌 할 때

CSS는 최근 사용자 정의 속성 및 새로운 기능과 같은 많은 멋진 기능을 추가했습니다. 이러한 기능은 우리의 작업을 단순화 할 수 있지만 SASS와 같은 사전 처리기와 흥미로운 상호 작용 문제를 일으킬 수도 있습니다.

이 기사는 내가 직면 한 문제, 해결책, 그리고 Sass가 여전히 필수적이라고 생각하는 이유를 탐구 할 것입니다.

오류가 발생했습니다

새로운 min() 및 max() 함수를 사용한 경우 다른 장치를 처리 할 때 이와 같은 오류 메시지가 발생할 수 있습니다 : "비 호환 장치 : VH 및 EM".

SASS는 고유 한 min() 함수를 가지고 있으며 CSS의 min() 함수를 무시하기 때문입니다. 또한 SASS는 두 단위간에 고정 관계가없는 값을 사용하여 계산을 수행 할 수 없습니다.

예를 들어 CM과 단위 사이에 고정 된 관계가 있으므로 SASS는 min(20in, 50cm) 의 결과를 계산할 수 있으며 코드에 사용될 때 오류를보고하지 않습니다.

다른 유닛에 대해서도 마찬가지입니다. 예를 들어, 각도 단위간에 고정 된 관계가 있습니다 : 1 턴, 1Rad 또는 1 grad는 항상 동일한 DEG 값으로 계산됩니다. 마찬가지로, 1은 항상 1000ms이고 1khz는 항상 1000Hz, 1dppx는 항상 96dpi이고 1in은 항상 96px입니다. 그렇기 때문에 Sass가 그들 사이에서 변환하고 계산 및 함수 (예 : 자체 min() 함수)에서 혼합 할 수있는 이유입니다.

그러나 이러한 단위 (예 : 이전 EM 및 VH 단위의 예) 사이에 고정 된 관계가 없으면 문제가 발생합니다.

그것은 단지 다른 단위가 아닙니다. min() calc() ()를 사용하려고하면 오류가 발생합니다. calc(20em 7px) 과 같은 코드를 시도하면 " calc(20em 7px) min 의 숫자가 아님"이라는 오류가 발생합니다.

또 다른 문제는 CSS 필터 (예 : invert() )에서 CSS 변수 또는 calc() , min() 또는 max() )과 같은 수학적 CSS 함수의 결과를 사용하려고 할 때 발생합니다.

이 경우 "`$ color : 'var (-p, 0.85)'가 반전에 유효한 색상이 아니라는 프롬프트를받습니다.

grayscale() : " $color: 'calc(.2 var(--d, .3))' 에서도 같은 문제가 발생합니다. 그레이 스케일에는 유효한 색상이 아닙니다."

opacity() 도 같은 문제를 일으 킵니다. " $color: 'var(--p, 0.8)' 불투명도에 유효한 색상이 아닙니다."

그러나 sepia() , blur() , drop-shadow() , brightness() , contrast() 및 hue-rotate() 포함하여 다른 필터 함수는 모두 CSS 변수에서 올바르게 작동합니다!

결과적으로, 발생한 일은 min() 및 max() 문제와 유사합니다. SASS에는 내장 된 sepia() , blur() , drop-shadow() , brightness() , contrast() , hue-rotate() 함수가 없지만 자체 grayscale() , invert() 및 opacity() 함수가 있으며 첫 번째 인수는 $color 값입니다. 매개 변수를 찾을 수 없으므로 오류가 발생합니다.

같은 이유로, 우리는 최소한 두 개의 hsl() 또는 hsla() 값을 나열하는 CSS 변수를 사용하려고 할 때 문제가 있습니다.

반면, color: hsl(9, var(--sl, 95%, 65%)) 은 완전히 유효한 CSS이며 SASS 없이는 잘 작동합니다.

rgb() 및 rgba() 함수에서도 동일한 일이 발생합니다.

또한 Compass를 가져 와서 linear-gradient() 또는 radial-gradient() 내부에서 CSS 변수를 사용하려고하면 conic-gradient() 내부에 변수를 사용하더라도 (브라우저가 지원하는 경우) 다른 오류도 얻게됩니다.

Compass에는 linear-gradient() 및 radial-gradient() 함수가 제공되지만 conic-gradient() 함수는 추가되지 않았습니다.

이 모든 경우의 문제는 같은 이름의 기능을 갖는 SASS 또는 나침반에서 비롯되며, 이것이 코드에서 사용하려는 기능이라고 가정합니다.

죄송합니다!

해결책

여기서 속임수는 SASS가 사례 민감도이지만 CSS는 사례에 민감하지 않다는 것을 기억하는 것입니다.

이것은 우리가 Sass가 자체 min() 함수로 인식하지 못하는 Min(20em, 50vh) 쓸 수 있음을 의미합니다. 오류가 발생하지 않으며 여전히 유효한 CSS이며 예상대로 작동합니다. 마찬가지로 HSL() / HSLA() / RGB() / RGBA() 또는 Invert() 작성하면 이전의 문제를 피할 수 있습니다.

그라디언트의 경우, 나는 일반적으로 SVG 버전에 가깝기 때문에 linear-Gradient() 및 radial-Gradient() 선호하지만 적어도 하나의 대문자와 함께 잘 작동합니다.

왜?

거의 SASS 관련 트윗을 게시 할 때마다 CSS 변수를 사용하면 SASS를 더 이상 사용해서는 안된다는 경고를받습니다. 이 문제를 해결하고 왜 동의하지 않는지 설명하고 싶습니다.

첫째, CSS 변수가 지난 3 년 동안 거의 모든 측면에서 매우 유용하고 사용되는 것으로 나타 났지만, 성능 비용이 제공되며 현재 DevTools를 사용하여 calc() 계산 미로에 오류가 나타나는 위치를 추적하는 것이 고통 스러울 수 있습니다. 나는 그것들을 사용하는 단점이 이점보다 더 큰 상황에 갇히지 않도록 과도하게 사용하지 않으려 고 노력합니다.

일반적으로 상수처럼 작동하는 경우 요소 별 또는 상태별로 요소를 변경하지 않으면 (이 경우 사용자 정의 속성이 확실히 최상의 옵션) 컴파일 된 CSS 수 (접두사로 생성 된 중복 문제를 해결)를 줄이면 SASS 변수를 사용하겠습니다.

둘째, 변수는 항상 내가 Sass를 사용하는 이유의 작은 부분이었습니다. 2012 년 말에 Sass를 사용하기 시작했을 때 주로 루프에 사용되었습니다. 이는 현재 CSS에없는 기능입니다. 루프의 일부를 HTML 사전 프로세서로 옮겼지만 (생성 된 코드를 줄이고 나중에 HTML과 CSS를 수정하지 않아도되기 때문에) 값 목록, Polygon 함수 내의 포인트 목록, 변환 목록 등의 값 목록을 생성하는 것과 같은 많은 경우 SASS 루프를 사용합니다.

(다음 내용은 원래 텍스트와 일치하여 중복을 피하기 위해 중복 부분을 생략합니다)

위 내용은 Sass와 새로운 CSS 기능이 충돌 할 때의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!