깔끔한 선택적 사용자 정의 속성 값 트릭

transform 과 같은 다중 값 CSS 속성의 선택적 사용자 정의 속성 값을 처리하려면 때때로 일부 트릭이 필요합니다. transform 속성이 ​​여러 값을 포함하는 요소가 있다고 가정합니다.

 .el {
  변환 : 번역 (100px) 스케일 (1.5) SKEW (5DEG);
}

필요에 따라 특정 변환 값 만 적용하려면 사용자 정의 속성을 사용하여 선택성을 달성 할 수 있습니다.

 .el {
  / * | ---- |-|.
  변환 : 번역 (100px) var (-변환);
}

그러나 --transform 정의되지 않으면 전체 transform 속성이 ​​유효하지 않습니다. 해결책은 널 값을 폴백 값으로 사용하는 것입니다.

 .el {
  변환 : 번역 (100px) var (-transform,);
}

차이에주의를 기울이십니까? 여기서 널 값 ( , )은 폴백으로 정의됩니다. 사양에 따라 :

일반적인 쉼표 생략 규칙 (쉼표가 값을 분리하지 않을 때 생략 해야하는 경우)과 달리 var() 에서 별도의 쉼표 (나중에 아무것도 없음)는 유효한 것으로 간주되어야합니다.

이는 커스텀 속성을 사용하여 공간 값을 갖는 CSS 사용자 정의 속성 스위칭 기술과 유사합니다.

데모

이 트릭은 다중 값 CSS 속성과 함께 작동합니다. transform 외에도 다음 데모는 text-shadow , background 및 filter 사용합니다.

여러 값 (예 : text-shadow )을 허용하는 일부 속성의 경우 쉼표 분리기에만 적용되므로 특수 처리가 필요합니다. 이 경우 CSS 사용자 정의 속성을 정의 할 때 귀하 (코드 작성자로서)는 사용자 지정 속성의 정의 된 값의 맥락에서만 사용된다는 것을 알고 있습니다. 그런 다음 사용자 정의 속성의 첫 번째 값 앞에 쉼표를 삽입해야합니다.

 -text-shadow :, 0 0 5px black;

물론 속성 값이 고유 한 경우이 변수를 사용하는 기능이 제한됩니다. 그러나 이는 변수의 "레이어"를 생성하여 해결할 수 있습니다.

SASS 컴파일러에 유의하십시오

이 트릭을 탐색하는 동안 SASS 컴파일러에는 빈 폴백 값 ( , )을 제거하는 버그가 있음을 알았습니다. 이는 사양과 일치하지 않습니다. 나는이 오류를보고했고 곧 수정되기를 바랍니다.

임시 해결 방법으로 렌더링을 유발하지 않는 폴백 값을 사용할 수 있습니다.

 변환 : 번역 (100px) var (-변환, 스케일 (1));

위 내용은 깔끔한 선택적 사용자 정의 속성 값 트릭의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!