CSS에서 상수를 정의 할 수 있습니까?

Question

CSS 스타일 시트 전체에 몇 가지 색상을 사용합니다. 예를 들어

#testdiv{ 
    background: #123456; 
} 

는 내가 일반 CSS하지이

#testdiv{ 
    background: COLORNAME; 
} 

Answer 1

그것은 CSS 클래스를 정의하고 그것을 코딩보다 오히려 당신이 색상을 할당하려는 각 요소를 다시 사용하는 좋은 연습이 아마 다음은

적은 CSS의 예 특정 요소. 그래서 같이

: 그것은 또한 요소가 별도의 클래스로 "상수"요소 값을 깰 필요에 따라 하나 이상을 적용 할 수 있도록 여러 클래스를 적용 할 수 있음을 알고하는 데 도움이

.darkBackground { 
    background: #123456; 
} 

.smallText { 
    font-size:8pt; 
} 

.

<div id="myDiv1" class="darkBackground smallText"></div> 
<div id="myDiv2" class="darkBackground bigText"></div> 

Answer 2

같은 CSS를 시트에 참조 할 수 있도록 이름으로 그 색상을 정의 할 수 있지만, 일부 CSS 확장이 있습니다 당신이 수 사용은 SASS 또는 less-css입니다.

@color: #4D926F; 

#header { 
    color: @color; 
} 
h2 { 
    color: @color; 
} 

Answer 3

SASS 또는 less을 사용하십시오.

요즘에는 앞에서 설명한 것처럼 전 처리기를 사용하는 것이 더 나은 프런트 엔드 개발 워크 플로를위한 일반적인 방법입니다.

변수 나 믹스 닝과 같은 기능이 조직화되고 도움이되는 데 도움이되는 몇 가지 이유입니다.

Answer 4

이 경우 couple of proposals이 있으므로 곧 발생할 수 있지만 내가 아는 한 아직 표준화 된 것은 없습니다.

CSS 클래스를 사용할 때의 문제점은 다른 속성에 동일한 값을 사용하려는 경우에는 도움이되지 않는다는 것입니다. 예를 들어 한 요소의 테두리에 특정 색상 값을 사용하려는 경우와 다른 배경색.

Answer 5

표준 방법은 PHP입니다. 대신, HTML 파일의 머리에 CSS 파일에 링크의

#define COLORNAME: #123456;

처럼, CSS 파일의 시작 부분에 #DEFINE 문을 추가하여 해당 위치에서 PHP 스크립트를 실행합니다. 스크립트는 CSS 파일을로드하고 COLORNAME의 모든 항목을 #123456으로 바꾼 다음 echo 또는 print을 사용하여 패치 된 텍스트를 클라이언트에 스트리밍합니다.

또는 PHP를 사용하여 소스 파일을 업로드하고 PHP를 사용하여 #defines가 모두 대체 된 CSS 파일을 한 번 만들고 HTML에서 해당 파일을 사용할 수 있습니다. 이것은 HTML 파일을로드 할 때마다 업로드하는 대신 변환을 한 번만 수행하기 때문에보다 효율적입니다.

Answer 6

이처럼 그들을 선언하는 CSS 파일에 상수를 가질 수있다 : 당신이 그들을 사용할 수 있습니다 그 후

.menu-item:focused { 
    -fx-background-color: -my-lightBlue; 
} 

을 :

*{ 
-my-lightBlue: #99ccff; 
-my-lightGray: #e6e6e6; 
} 

그런 다음이 같은 CSS 파일에서 사용할 수 프로그래밍 방식으로 다음과 같이 :

progressBar.setStyle("-fx-accent: -my-lightBlue;"); 

Answer 7

CSS에서 상수를 선언 할 수 있습니다 : 루트 블록 :

:root { 
    --main-bg-color: #1596a7; 
} 

및 VAR() 메소드를 사용하여 :

.panel-header { 
    background: var(--main-bg-color); 
    color: .... 
} 

Answer 8

예, 클래스를 사용하는 것이 좋은 방법이지만 CSS에서 변수를 선언 할 수있게되었습니다. 그리고 변수 (특히 색상)는 동일한 색상을 선언 할 때 매우 유용합니다 (통합 색상을 사용하면 16 진수 값이 필요합니다. 실제로는 그다지 중요하지 않습니다).

그리고 이것은 일반 CSS (그리고 tbh, SASS 또는 lessCSS를 사용하는 것만 큼 우아하지는 않지만)를 사용하지만 일반 CSS의 목적으로 작동합니다. 먼저 :root 블록에서 실제 변수를 정의하십시오. 예를 들면 다음과 같이 정의 할 수 있습니다. p 블록 (또는 해당 문제의 다른 것)은 해당 블록에서만 사용할 수 있습니다.

:root { 
    --custom-color: #f0f0f0; 
} 

그리고 (이 실제 참조로 해결되지 않습니다 VAR 방법 제외) var 방법을 사용하면 다음 나중에 참조 할 수 있습니다 : 그래서 루트 블록에 넣어, 전 세계적으로 액세스 할 확인하십시오 :

:root{ 
    color: #00ff00; 
} 

다음 :root 블록 요소를 참조하는 모든 기능 블록 (다른 모든 CSS 선언 같은) 때문에

p{ 
    color: var(--custom-color); 
} 

, 당신은 뭔가를 선언 할 수 없습니다

이는 모든 단일 요소의 색상 속성을 참조하고이 예제에서는 #00ff00으로 설정합니다.

:root{ 
    --color: #00ff00; 
} 

그리고 다시, 당신은 SASS 또는 lessCSS 같은 것을 사용 할 수있는 경우 : 당신이 선언 모든 변수 이름은 당신이 할 수있는 의미 --로 시작한다. @color = #fff *을 작성하고 @color *을 참조하여 선언하는 기능은 일반 CSS를 다루는 것보다 훨씬 쉽고 사용자 정의 속성에 액세스 할 때마다 var 키워드를 사용해야합니다.

그리고 당신은 얻을 및/또는 속성을 변경하는 JS와 인라인 CSS에 액세스 할 수 있습니다

//Inline CSS 
element.style.getPropertyValue("--custom-color"); 

// get variable from wherever 
getComputedStyle(element).getPropertyValue("--custom-color"); 

// set variable on inline style 
element.style.setProperty("--custom-color", "#f0f0f0"); 

참고!

이것은 최근 추가 된 기능이므로 browser compatibility is important to check입니다. 특히 파이어 폭스는 변수 선언 자체의 도입과 var() 메소드 사이에 간격이 있기 때문에 특별한주의를 기울일 필요가 있습니다.lessCSS와

_{* 그것은 당신이 그런 SASS와 같은 프레임 워크를 사용하는 경우 SASS로는 $color}