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

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

---

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

#testdiv{
  background: #123456;
}

이름으로 해당 색상을 정의하여 다음과 같이 CSS 시트에서 참조 할 수 있습니까?

#testdiv{
  background: COLORNAME;
}

---

CSS 클래스를 정의하고 특정 요소에 코딩하는 것보다 색상을 할당하려는 각 요소에 재사용하는 것이 더 나은 방법 일 것입니다.

이렇게 :

.darkBackground {
   background: #123456;
}

.smallText {
   font-size:8pt;
}

또한 요소에 여러 클래스가 적용될 수 있다는 사실을 아는 것도 도움이되므로 "상수"요소 값을 별도의 클래스로 나누고 필요에 따라 둘 이상을 적용 할 수 있습니다.

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

---

일반 CSS는 아니지만 SASS 또는 less-css 와 같이 사용할 수있는 CSS 확장이 있습니다 .

다음은 더 적은 CSS의 예입니다.

@color: #4D926F;

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

---

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

그리고 이것은 일반 CSS (및 tbh, SASS 또는 lessCSS를 사용하는 것만 큼 우아하지는 않음)를 사용하고 있지만 일반 CSS 목적으로 작동합니다. 먼저 :root블록 에서 실제 변수를 정의하십시오 . 예를 들어 p블록 (또는 그 문제에 대한 다른 모든 것) 에서 정의 할 수 있지만 해당 블록에서만 사용할 수 있습니다. 따라서 전역 적으로 액세스 할 수 있는지 확인하려면 루트 블록에 넣으십시오.

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

var메서드를 사용하면 (var 메서드가 없으면 실제 참조로 해석되지 않음) 나중에 참조 할 수 있습니다.

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

이후 :root블록 (다른 모든 CSS 선언 같은) 참조 요소가 완전히 기능 블록, 당신은 뭔가를 선언 할 수 없습니다 :

:root{
    color: #00ff00;
}

이는 모든 단일 요소의 색상 속성을 참조하고 (이 예에서)로 설정합니다 #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");

노트!

This is a recently added feature, so browser compatibility is important to check. Especially firefox is worth paying extra attention to, as it has a gap between the introduction of the variable declarations themselves and the var() method. caniuse currently estimates 91.65% of users run a browser with support for the method. And it's also worth noting IE doesn't at all.

_{* with lessCSS it's @color, with SASS it is $color}

---

There are a couple of proposals for this, so it might happen soon, but nothing has yet been standardised as far as I know.

The problem with using CSS classes for this is that they are no help if you want to use the same value for different properties, for example if you want to use a particular color value for a border on one element, and a background-color on another.

---

In CSS, you can declare your constant in :root bloc :

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

and using with var() method :

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

---

Use SASS or less.

Nowadays, using preprocessors like the above is a common practice for a better front-end development workflow.

It helps you being more organized and features like variables or mixins are some of the reasons they worth taking into consideration.

---

You can use Sass variables:

$color: #4D926F;

.someclass{
  color: $color;
}

---

You can have constants in a CSS file, declaring them like this:

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

Then you can use them in the CSS file like this:

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

After that you can use them programmatically like this:

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

---

The standard way to do this is PHP. Add #define statements at the beginning of your CSS file, like

#define COLORNAME: #123456;

Instead of linking to the CSS file in the head of your HTML file, run a PHP script at that location. The script loads the CSS file, replaces all occurrences of COLORNAME by #123456 and streams the patched text to the client using echo or print.

Alternatively, you could upload the source file (also using PHP), use PHP to create a CSS file once where all occurrences of #defines are replaced, and use that file in your HTML. This is more efficient, since you're doing the conversion only once, at the upload, instead of every time you load the HTML file.

참고URL : https://stackoverflow.com/questions/4847850/is-it-possible-to-define-constants-in-css