꽤 긴 CSS 파일을 작업 중입니다. 클라이언트가 색 구성표에 대한 변경을 요청할 수 있다는 것을 알고 있습니다. 색상을 변수에 할당 할 수 있습니까? 그래서 변수를 사용하여 모든 색상을 사용하는 모든 요소에 새 색을 적용 할 수 있습니까?
CSS 파일을 동적으로 변경하기 위해 PHP를 사용할 수는 없습니다.
꽤 긴 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');
CSS를위한 'Less'Ruby Gem은 멋지게 보입니다.
예, 가까운 장래에 (2012 년 6 월에 작성) 당신은 less / sass 등을 사용하지 않고 네이티브 CSS 변수를 정의 할 수 있습니다! 웹킷 엔진은 방금 첫 번째 CSS 변수 규칙을 구현 했으므로 Chrome 및 Safari의 최신 버전이 이미 작동하고 있습니다. 참조온 사이트 CSS 브라우저 데모가 공식 웹킷 (Chrome / Safari) 개발 로그 를 .
앞으로 몇 개월 안에 네이티브 CSS 변수에 대한 광범위한 브라우저 지원이 기대 될 수 있기를 바랍니다.
지원으로 인해 css3 변수를 사용하지 마십시오.
순수한 CSS 솔루션을 원한다면 다음을 수행하십시오.
의미있는 이름의 색상 클래스를 사용하십시오 .
.bg-primary { background: #880000; }
.bg-secondary { background: #008800; }
.bg-accent { background: #F5F5F5; }
피부와 구조 분리 (OOCSS)
/* Instead of */
h1 {
font-size: 2rem;
line-height: 1.5rem;
color: #8000;
}
/* use this */
h1 {
font-size: 2rem;
line-height: 1.5rem;
}
.bg-primary {
background: #880000;
}
/* This will allow you to reuse colors in your design */
이를 필요에 따라 변경하려면 별도의 CSS 파일 안에 넣으십시오.
왜 PHP를 사용할 수 없는지 잘 모르겠습니다. 그런 다음 원하는대로 변수를 추가 및 사용하고 파일을 PHP 파일로 저장 한 다음 해당 .php 파일을 .css 파일 대신 스타일 시트로 링크 할 수 있습니다.
PHP 일 필요는 없지만 내 말은 의미가 있습니다.
프로그래밍을 원할 때 CSS가 변수와 같은 것을 지원할 때까지 프로그래밍 언어를 사용하지 않는 이유는 무엇입니까?
또한 Nicole Sullivan의 객체 지향 CSS를 확인하십시오 .
dicejs.com (공식적으로 cssobjs) 은 SASS의 클라이언트 측 버전입니다. CSS에서 변수를 설정하고 (json 형식 CSS에 저장) 색상 변수를 재사용 할 수 있습니다.
//create the CSS JSON object with variables and styles
var myCSSObjs = {
cssVariables : {
primaryColor:'#FF0000',
padSmall:'5px',
padLarge:'$expr($padSmall * 2)'
}
'body' : {padding:'$padLarge'},
'h1' : {margin:'0', padding:'0 0 $padSmall 0'},
'.pretty' : {padding:'$padSmall', margin:'$padSmall', color:'$primaryColor'}
};
//give your css objects a name and inject them
$.cssObjs('myStyles',myCSSObjs).injectStyles();
그리고 여기에 그들의 문서를 좀 더 도움이되는 완전한 다운로드 데모에 대한 링크는 다음과 같습니다 dicejs은 데모
시스템에 Ruby가있는 경우 다음을 수행 할 수 있습니다.
http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html
이것은 Rails를 위해 만들어졌지만, 독립형으로 실행되도록 수정하는 방법은 아래를 참조하십시오.
site_settings.rb와 함께 작동하고 CSS 경로를 고려하고 CSS를 다시 생성 할 때마다 호출 할 수있는 작은 Ruby 래퍼 스크립트를 작성하여 Rails와 독립적으로이 방법을 사용할 수 있습니다 (예 : 사이트 시작 중)
거의 모든 운영 체제에서 Ruby를 실행할 수 있으므로 플랫폼에 독립적이어야합니다.
예 : 래퍼 : generate_CSS.rb (CSS를 생성해야 할 때마다이 스크립트를 실행하십시오)
#/usr/bin/ruby # preferably Ruby 1.9.2 or higher
require './site_settings.rb' # assuming your site_settings file is on the same level
CSS_IN_PATH = File.join( PATH-TO-YOUR-PROJECT, 'css-input-files')
CSS_OUT_PATH = File.join( PATH-TO-YOUR-PROJECT, 'static' , 'stylesheets' )
Site.generate_CSS_files( CSS_IN_PATH , CSS_OUT_PATH )
site_settings.rb 의 generate_CSS_files 메소드는 다음과 같이 수정해야합니다.
module Site
# ... see above link for complete contents
# Module Method which generates an OUTPUT CSS file *.css for each INPUT CSS file *.css.in we find in our CSS directory
# replacing any mention of Color Constants , e.g. #SomeColor# , with the corresponding color code defined in Site::Color
#
# We will only generate CSS files if they are deleted or the input file is newer / modified
#
def self.generate_CSS_files(input_path = File.join( Rails.root.to_s , 'public' ,'stylesheets') ,
output_path = File.join( Rails.root.to_s , 'public' ,'stylesheets'))
# assuming all your CSS files live under "./public/stylesheets"
Dir.glob( File.join( input_path, '*.css.in') ).each do |filename_in|
filename_out = File.join( output_path , File.basename( filename_in.sub(/.in$/, '') ))
# if the output CSS file doesn't exist, or the the input CSS file is newer than the output CSS file:
if (! File.exists?(filename_out)) || (File.stat( filename_in ).mtime > File.stat( filename_out ).mtime)
# in this case, we'll need to create the output CSS file fresh:
puts " processing #{filename_in}\n --> generating #{filename_out}"
out_file = File.open( filename_out, 'w' )
File.open( filename_in , 'r' ).each do |line|
if line =~ /^\s*\/\*/ || line =~ /^\s+$/ # ignore empty lines, and lines starting with a comment
out_file.print(line)
next
end
while line =~ /#(\w+)#/ do # substitute all the constants in each line
line.sub!( /#\w+#/ , Site::Color.const_get( $1 ) ) # with the color the constant defines
end
out_file.print(line)
end
out_file.close
end # if ..
end
end # def self.generate_CSS_files
end # module Site
물론 여러 클래스의 멋진 세계 덕분에 다음과 같은 일을 할 수 있습니다.
.red {color:red}
.blackBack {background-color: black}
그러나 나는 종종 어쨌든 다음과 같이 결합합니다.
.highlight {color:red, background-color: black}
나는 시맨틱 경찰이 온통다는 것을 알고 있지만 잘 작동합니다.
CSS 파일을 xsl 템플릿으로 쓰면 간단한 xml 파일에서 색상 값을 읽을 수 있습니다. 그런 다음 xslt 프로세서로 CSS를 만듭니다.
colors.xml :
<?xml version="1.0"?>
<colors>
<background>#ccc</background>
</colors>
styles.xsl :
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="text" version="1.0" encoding="iso-8859-1"/>
<xsl:template match="/">body {
background-color: <xsl:value-of select="/colors/background" />;
}
</xsl:template>
</xsl:stylesheet>
CSS를 렌더링하는 명령 : xsltproc -o styles.css styles.xsl colors.xml
styles.css :
body {
background-color: #ccc;
}
CSS만으로는 불가능합니다.
less.js를 사용하여 JavaScript 및 LESS로 할 수 있습니다 LESS 변수를 CSS 라이브로 렌더링하지만 개발 전용이며 실제 사용에 너무 많은 오버 헤드를 추가합니다.
CSS와 함께 가장 가까운 것은 다음과 같이 속성 하위 문자열 선택기 를 사용하는 것입니다 .
[id*="colvar-"] {
color: #f0c69b;
}
으로 id
시작하는 이름으로 조정하려는 모든 요소의을 설정하십시오 ( colvar-
예 :) colvar-header
. 그런 다음 색상을 변경하면 모든 ID 스타일이 업데이트됩니다. CSS만으로 가능한 한 가깝습니다.