CSS에서 변수를 정의할 수 있나요?

변수는 CSS에서 정의할 수 있습니다. 변수 정의 구문은 "--변수 이름"이며 CSS에 정의된 변수 이름은 대소문자를 구분합니다. var() 함수를 사용하여 변수를 읽을 수 있습니다. 구문은 "var(--변수 이름)"입니다. 또한 함수의 두 번째 매개변수는 변수의 기본값을 나타냅니다. 변수가 존재하지 않으면 이 기본값이 사용됩니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서 변수를 정의할 수 있나요?

CSS에서 변수를 사용할 수 있나요?

CSS 변수를 선언할 때 변수 이름 앞에 하이픈(--) 두 개를 추가하세요. 변수 이름은 대소문자를 구분하며 --header-color와 --Header-Color는 서로 다른 두 변수입니다.

var() 함수는 변수를 읽는 데 사용됩니다.

var() 함수는 두 번째 매개변수를 사용하여 변수의 기본값을 나타낼 수도 있습니다. 변수가 존재하지 않으면 이 기본값이 사용됩니다.

두 번째 매개변수는 내부 쉼표나 공백을 처리하지 않으며 매개변수의 일부로 간주됩니다.

CSS에서 변수를 사용하는 예:

    :root{
      --base: yellow;
      --spacing: 10px;
      --blur: 10px;
    }

위 코드는 3개의 변수를 정의합니다. :root는 모든 사람이 해당 변수에 액세스할 수 있도록 합니다.

    img{
      filter: blur(var(--blur));
      padding: var(--spacing);
      background: var(--base);
 
    }

위에서는 이전에 정의한 변수를 속성 값으로 사용합니다.

(학습 영상 공유: css 영상 튜토리얼)

위 내용은 CSS에서 변수를 정의할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!