꽤 긴 CSS 파일을 작업 중입니다. 클라이언트가 색 구성표에 대한 변경을 요청할 수 있다는 것을 알고 있습니다. 색상을 변수에 할당 할 수 있습니까? 그래서 변수를 사용하여 모든 색상을 사용하는 모든 요소에 새 색을 적용 할 수 있습니까?
CSS 파일을 동적으로 변경하기 위해 PHP를 사용할 수는 없습니다.
답변
CSS는이를 기본적으로 CSS 변수로 지원합니다 .
CSS 파일 예
:root {
--main-color:#06c;
}
#foo {
color: var(--main-color);
}실제 예제는 이 JSFiddle을 참조하십시오 (이 예제에서는 바이올린의 CSS 선택기 중 하나에 파란색으로 하드 코딩 된 색상이 표시되고 다른 CSS 선택기는 원래 구문과 현재 구문 모두에서 CSS 변수를 사용하여 색상을 파란색으로 설정 함) .
JavaScript / 클라이언트 측에서 CSS 변수 조작
document.body.style.setProperty('--main-color',"#6c0")모든 최신 브라우저에서 지원
Firefox 31 이상 , Chrome 49 이상 , Safari 9.1 이상 , Microsoft Edge 15 이상 및 Opera 36 이상 은 CSS 변수를 기본적으로 지원합니다.
답변
사람들은 내 대답을 upvoting 유지하지만 기쁨에 비해 끔찍한 솔루션입니다 말대꾸 또는 덜 특히 쉽게 사용할 수 주어진, 모두의 GUI를 요즘. 당신이 어떤 의미가 있다면 아래에 제안하는 모든 것을 무시하십시오.
찾기 / 바꾸기를 사용하여 값을 변경할 수있는 일종의 변수로 사용하기 위해 각 색상 앞에 CSS에 주석을 넣을 수 있습니다.
CSS 파일 상단
/********************* Colour reference chart****************
*************************** comment ********* colour ********
box background colour bbg #567890
box border colour bb #abcdef
box text colour bt #123456
*/나중에 CSS 파일
.contentBox {background: /*bbg*/#567890; border: 2px solid /*bb*/#abcdef; color:/*bt*/#123456}예를 들어 찾기 / 바꾸기 상자 텍스트의 색 구성표를 변경하려면
/*bt*/#123456답변
CSS 자체는 변수를 사용하지 않습니다. 그러나 SASS 와 같은 다른 언어를 사용하여 변수를 사용하여 스타일을 정의하고 CSS 파일을 자동으로 생성하여 웹에 올릴 수 있습니다. CSS를 변경할 때마다 생성기를 다시 실행해야하지만 그렇게 어렵지는 않습니다.
답변
CSS3 변수 를 사용해 볼 수 있습니다 .
body {
--fontColor: red;
color: var(--fontColor);
}답변
쉬운 CSS 전용 솔루션은 없습니다. 당신은 이것을 할 수 있습니다 :
-
의 모든 인스턴스 찾기
background-color와color당신의 CSS 파일을 각각의 독특한 색상 클래스 이름을 만듭니다..top-header { color: #fff; } .content-text { color: #f00; } .bg-leftnav { background-color: #fff; } .bg-column { background-color: #f00; } -
다음으로 색상이 관련된 사이트의 모든 단일 페이지를 살펴보고 색상 및 배경색에 적합한 클래스를 추가하십시오.
-
마지막으로 CSS에서 새로 만든 색상 클래스 이외의 색상에 대한 참조를 제거하십시오.
답변
Yeeeaaahhh …. 이제 CSS 에서 var ( ) 함수를 사용할 수 있습니다 .. …
반가운 소식은 JavaScript 액세스를 사용하여 변경할 수 있다는 것입니다.
그러나 그들을 선언하는 방법 …
아주 간단합니다 :
예를 들어,에 a #ff0000을 지정하고을 지정하기 var()만하면 :root됩니다 --.
:root {
--red: #ff0000;
}
html, body {
background-color: var(--red);
}좋은 점은 브라우저 지원이 나쁘지 않다는 것입니다. LESS또는 브라우저에서 사용하기 위해 컴파일 할 필요가 없습니다 SASS…
또한 다음은 간단한 자바 스크립트 스크립트로 빨간색 값을 파란색으로 변경합니다.
const rootEl = document.querySelector(':root');
root.style.setProperty('--red', 'blue');