CSS 전역 변수 만들기 : 스타일 시트 테마 관리
이 질문에 이미 답변이 있습니다.
다음과 같은 CSS에서 전역 변수를 설정하는 방법이 있습니까?
@Color1 = #fff;
@Color2 = #b00;
h1 {
color:@Color1;
background:@Color2;
}
최신 업데이트 : 2018 년 3 월 4 일
CSS 변수 (사용자 지정 속성)가 도착했습니다!
또 다른 브라우저. Edge는 이제이 훌륭한 기능을 지원하여 Mozilla와 Google에 합류했습니다.
전 처리기 "아님"이 필요 하지 않습니다!
CSS에는 많은 반복이 있습니다. 단일 색상이 여러 곳에서 사용될 수 있습니다.
일부 CSS 선언의 경우 캐스케이드에서이를 더 높게 선언하고 CSS 상속으로이 문제를 자연스럽게 해결할 수 있습니다.
사소하지 않은 프로젝트의 경우 항상 가능한 것은 아닙니다. :root유사 요소 에 변수를 선언함으로써 CSS 작성자는 변수를 사용하여 일부 반복 인스턴스를 중지 할 수 있습니다.
작동 원리
스타일 시트 상단에 변수를 설정합니다.
CSS
루트 클래스를 만듭니다.
:root {
}
변수 생성 (- [String] : [value] )
:root {
--red: #b00;
--blue: #00b;
--fullwidth: 100%;
}
CSS 문서의 아무 곳에 나 변수를 설정하십시오.
h1 {
color: var(--red);
}
#MyText {
color: var(--blue);
width: var(--fullwidth);
}
브라우저 지원 / 호환성
현재 호환성에 대해서는 caniuse.com 을 참조하십시오 .
FIREFOX : 버전 31 + (기본적으로 활성화 됨)
(평소처럼 앞장서고 있습니다.) More info from Mozilla
CHROME : 버전 49 + (기본적으로 활성화 됨) .
"이 기능은 시험용 웹 플랫폼 기능 을 사용 설정하여 테스트를 위해 Chrome 버전 48에서 사용 설정할 수 있습니다 . chrome://flags/이 설정에 액세스하려면 Chrome 주소 표시 줄에 입력 하세요."
Safari / IOS Safari : 버전 9.1 / 9.3 (기본적으로 활성화 됨) .
Opera : 버전 39 + (기본적으로 활성화 됨) .
Android : 버전 52 + (기본적으로 활성화 됨) .
IE : 결코 일어나지 않을 것입니다.
Edge : 버전 15 + (기본적으로 활성화 됨) .
Windows Insider Preview 빌드 14986에 도착한 CSS 사용자 지정 속성
W3C 사양
향후 CSS 변수에 대한 전체 사양
사용해보기
테스트를 위해 바이올린과 스 니펫이 아래에 첨부되어 있습니다.
(지원되는 브라우저에서만 작동합니다.)
:root {
--red: #b00;
--blue: #4679bd;
--grey: #ddd;
--W200: 200px;
--Lft: left;
}
.Bx1,
.Bx2,
.Bx3,
.Bx4 {
float: var(--Lft);
width: var(--W200);
height: var(--W200);
margin: 10px;
padding: 10px;
border: 1px solid var(--red);
}
.Bx1 {
color: var(--red);
background: var(--grey);
}
.Bx2 {
color: var(--grey);
background: black;
}
.Bx3 {
color: var(--grey);
background: var(--blue);
}
.Bx4 {
color: var(--grey);
background: var(--red);
}<p>If you see four square boxes then variables are working as expected.</p>
<div class="Bx1">I should be red text on grey background.</div>
<div class="Bx2">I should be grey text on black background.</div>
<div class="Bx3">I should be grey text on blue background.</div>
<div class="Bx4">I should be grey text on red background.</div>지금은 CSS에서 변수를 만들 수 없습니다. 이런 종류의 기능을 원한다면 SASS 또는 LESS 와 같은 CSS 전처리기를 사용해야합니다 . SASS에 표시되는 스타일은 다음과 같습니다.
$Color1:#fff;
$Color2:#b00;
$Color3:#050;
h1 {
color:$Color1;
background:$Color2;
}
또한 중첩 선택기와 같은 다른 (멋진) 작업을 수행 할 수 있습니다.
#some-id {
color:red;
&:hover {
cursor:pointer;
}
}
이것은 다음과 같이 컴파일됩니다.
#some-id { color:red; }
#some-id:hover { cursor:pointer; }
설정 지침 및 구문 / 기능에 대한 자세한 내용 은 공식 SASS 자습서 를 확인하십시오 . 개인적으로 저는 쉬운 개발을 위해 Mindscape의 Web Workbench 라는 Visual Studio 확장을 사용합니다 . 다른 IDE 용 플러그인도 많이 있습니다.
최신 정보
2014 년 7 월 / 8 월 현재 Firefox는 CSS 변수에 대한 초안 사양 을 구현했습니다 . 구문은 다음과 같습니다.
:root {
--main-color: #06c;
--accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
color: var(--main-color);
}
CSS를 사용하는 것은 불가능하지만 less 또는 SASS 와 같은 CSS 전처리기를 사용합니다 .
SASS http://sass-lang.com/ 또는 LESS http://lesscss.org/ 사용해보기
저는 SASS를 좋아하고 모든 프로젝트에 사용합니다.
나는 이렇게한다 :
HTML :
<head>
<style type="text/css"> <? require_once('xCss.php'); ?> </style>
</head>
xCss.php :
<? // place here your vars
$fntBtn = 'bold 14px Arial'
$colBorder = '#556677' ;
$colBG0 = '#dddddd' ;
$colBG1 = '#44dddd' ;
$colBtn = '#aadddd' ;
// here goes your css after the php-close tag:
?>
button { border: solid 1px <?= $colBorder; ?>; border-radius:4px; font: <?= $fntBtn; ?>; background-color:<?= $colBtn; ?>; }
같은 경우 LESS 또는 SASS가 필요합니다.
하지만 여기에 CSS3에서 작동 할 또 다른 대안이 있습니다.
http://css3.bradshawenterprises.com/blog/css-variables/
예 :
:root {
-webkit-var-beautifulColor: rgba(255,40,100, 0.8);
-moz-var-beautifulColor: rgba(255,40,100, 0.8);
-ms-var-beautifulColor: rgba(255,40,100, 0.8);
-o-var-beautifulColor: rgba(255,40,100, 0.8);
var-beautifulColor: rgba(255,40,100, 0.8);
}
.example1 h1 {
color: -webkit-var(beautifulColor);
color: -moz-var(beautifulColor);
color: -ms-var(beautifulColor);
color: -o-var(beautifulColor);
color: var(beautifulColor);
}
'Development Tip' 카테고리의 다른 글
| NameError : 'reload'이름이 정의되지 않았습니다. (0) | 2020.12.10 |
|---|---|
| Grunt를 사용하는 노드 앱을 Heroku에 배포하는 방법 (0) | 2020.12.10 |
| Solr 인덱스 대 저장 (0) | 2020.12.10 |
| Android Studio 렌더링 문제 : 다음 클래스를 찾을 수 없습니다. (0) | 2020.12.10 |
| App Store에 업로드 할 때 Xcode 오류 : "적합한 응용 프로그램 레코드를 찾을 수 없습니다." (0) | 2020.12.10 |