CSS에서 변수를 정의하고 사용하는 방법

CSS의 기본 변수 정의 구문은 "--*"이고, 변수 사용 구문은 "var(--*)"입니다. 여기서 *는 변수 이름을 나타냅니다. CSS 변수에는 "$", "[", "^", "(", "%" 등과 같은 문자가 포함될 수 없습니다. 일반 문자는 "숫자", "문자", "밑줄" 및 "대시"만 있으면 됩니다. .

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

CSS의 기본 변수 정의 구문은 --*이며, 변수 사용 구문은 var(- -*); 여기서 *는 변수 이름을 의미합니다.

vue 프로젝트에서 CSS 전역 변수를 정의하는 경우:

1 먼저 자산 디렉터리에 새 index.css 파일을 만듭니다. (

:root 루트 요소 문서에서 이것은 사용자 정의 속성을 넣기에 좋은 장소입니다. 왜냐하면 우리는 다른 개별 특수 스타일의 선택성을 기반으로 사용자 정의 속성을 재정의할 수 있기 때문입니다.)

2 그런 다음 이를 main.js 파일에 도입합니다:

3, 사용: .vue 파일에서 사용 스타일:

background:var(--baseBackground);

추가 소개:

css中定义变量 定义变量可分多种情况： 1、定义全局变量 :root { --borderColor: #ccc; } 使用：width:var(--borderColor); 2、定义某元素下的变量 .look{ --borderColor: #ccc; } 3、定义媒体查询下的变量 @media screen and (min-width: 1025px) { :root { --borderColor: #ccc; 　　 } } 使用： .has-border-table > tr > td { border-right: 1px solid var(--borderColor); } less中定义变量 定义： @bg-color : #d9d9d9; 使用： .has-border-table > tr > td { border-right: 1px solid var(@bg-color); } sass中定义变量 定义： $bg-color : #d9d9d9; 使用： .has-border-table > tr > td { border-right: 1px solid var($bg-color); }

추천 학습:css 비디오 튜토리얼

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