CSS 변수를 사용한 논리적 작업

이 기사는 calc() 함수 내에서 산술을 사용하여 CSS 스위치 변수 (0 또는 1의 변수)에서 논리적 작업을 수행하는 방법을 보여줍니다. 우리는 CSS의 전용 논리 기능이 부족하지만 이러한 계산은 효과적인 에뮬레이션을 제공합니다.

calc() 사용하여 CSS의 논리 작업

작동이 아닙니다

스위치 변수 ( --j )를 부정하는 것은 간단합니다. 1에서 빼십시오.

 -notj : calc (1- var (-j));

--j 가 0이면 --notj 1이됩니다. --j 가 1이면 --notj 는 0입니다.

그리고 작동

두 피연산자가 모두 참인 경우에만 운영 및 운영은 True를 반환합니다. 스위치 변수 ( --k 및 --i )의 경우 곱셈이이를 달성합니다.

 -및 : calc (var (-k) * var (-i));

이것은 --k 와 --i 모두 1 일 때만 1을 생성합니다. 그렇지 않으면 0입니다.

NAND 작동 (NOT 및)

NAND는 부정입니다.

 -nand : calc (1- var (-k) * var (-i));

또는 작동

적어도 하나의 피연산자가 사실이라면 OR 작동이 사실입니다. De Morgan의 법칙 ( not (A or B) = (not A) and (not B) )를 사용하여 : 우리는 다음을 얻습니다.

 -또는 : calc (1- (1- var (-k)) * (1- var (-i));

또한 작동 (OR)

OR의 부정도 아닙니다.

 -nor : calc ((1- var (-k)) * (1- var (-i));

XOR 작동 (독점 또는)

정확히 하나의 피연산자가 사실이라면 XOR이 사실입니다. 변수를 빼고 결과를 제곱하면 원하는 0 또는 1 결과를 제공하여 절대 값이 제공됩니다.

 -xor : calc ((var (-k)-var (-i)) * (var (-k)-var (-i));

실제 응용 프로그램

작은 화면에 장애인 패널을 숨기고 있습니다

이 예제는 더 큰 화면에서만 볼 수있는 비활성화 된 고급 컨트롤 패널을 보여줍니다.

HTML (일러스트) :

<div class="advanced">
  
</div>
<input type="checkbox" id="toggle">

CSS :

 몸 {
  -K : var (-Wide, 0); / * 화면 크기 스위치 */
  디스플레이 : Flex;
  플렉스 방향 : var (-Wide, 컬럼);
  @Media (min-width : 768px) {-wide : 1; } / * 필요에 따라 브레이크 포인트 조정 * /
}

.고급의 {
  --i : var (-enabled, 0); / * 활성화 상태 */
  -NOTI : calc (1- var (-i));
  필터 : 대비 (calc (1- var (-noti) * 0.9)) 불투명 (calc (1- var (-noti) * 0.7);
  포인터 이벤트 : var (-enabled, none);
  마진 : calc (var (-또는) * 20px) 0; / * 예제 여백 */
  높이 : calc (var (-또는) * 200px); / * 예제 높이 */
  [id = '토글'] : 점검 ~ & { -inabled : 1; }
  -또는 : calc (1- (1- var (-k)) * (1- var (-i)); / * 또는 작동 */
}

화면이 넓은 경우 ( --or 는 1) 또는 패널이 활성화 된 --k ( --i is 1).

3D 모양의 위치 (복잡한 예)

복잡한 3D 모양을 포함하는 두 번째 예는 정확한 얼굴 포지셔닝을 위해 논리 작업의 고급 사용을 보여줍니다. 복잡성으로 인해이 예는 간결하게 생략됩니다. 원본 텍스트는이 사용 사례를 보여주는 자세한 설명과 대화식 데모를 제공합니다. 핵심 개념은 동일하게 유지됩니다. calc() 및 논리적 작업 (및 XOR, NAND, NOR)을 사용하여 스위치 변수 상태에 따라 조건부 변환을 적용합니다.

위 내용은 CSS 변수를 사용한 논리적 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!