CSS에서 색상을 변수로 정의하려면 어떻게 해야 합니까?
저는 상당히 긴 CSS 파일을 작업하고 있습니다.저는 고객이 색상 체계에 대한 변경을 요청할 수 있다는 것을 알고 있습니다. 변수에 색상을 할당하여 변수를 사용하는 모든 요소에 새 색상을 적용할 수 있도록 할 수 있을까요?
제가 CSS 파일을 동적으로 변경하기 위해 PHP를 사용할 수 없다는 점 참고 부탁드립니다.
CSS 파일 예시
:root {
--main-color:#06c;
}
#foo {
color: var(--main-color);
}
작동하는 예는 이 JSFiddle을 참조하십시오(예는 fiddle의 CSS 선택기 중 하나가 색상을 파란색으로 하드 코딩하고, 다른 CSS 선택기는 색상을 파란색으로 설정하기 위해 원래 및 현재 구문인 CSS 변수를 사용함).
자바스크립트/클라이언트 측 CSS 변수 조작
document.body.style.setProperty('--main-color',"#6c0")
모든 최신 브라우저에서 지원 가능
Firefox 31+, Chrome 49+, Safari 9.1+, Microsoft Edge 15+, Opera 36+는 CSS 변수를 기본적으로 지원합니다.
사람들은 계속 내 대답을 올려주지만, 그것은 sass 이하의 기쁨에 비하면 끔찍한 해결책이며, 특히 이 두 날 모두에 사용하기 쉬운 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에서 var() 함수를 사용할 수 있습니다...
좋은 소식은 자바스크립트 액세스를 사용하여 변경할 수 있다는 것입니다. 이는 전 세계적으로도 변경될 것입니다.
하지만 그들을 어떻게 선언해야 할까요?
아주 간단합니다.
예를 들어, 당신은 다음과 같은 것을 할당하길 원합니다.#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 자체는 변수를 사용하지 않습니다.그러나 SASS와 같은 다른 언어를 사용하여 변수를 사용하여 스타일링을 정의하고 CSS 파일을 자동으로 생성하여 웹에 올릴 수 있습니다.CSS를 변경할 때마다 제너레이터를 다시 실행해야 하지만, 그렇게 어렵지는 않습니다.
body {
--fontColor: red;
color: var(--fontColor);
}
쉬운 CSS만의 해결책은 없습니다.이렇게 할 수 있습니다.
의 의 모든 인스턴스
background-color그리고.colorCSS 파일에 저장하고 각 고유 색상에 대한 클래스 이름을 만듭니다..top-header { color: #fff; } .content-text { color: #f00; } .bg-leftnav { background-color: #fff; } .bg-column { background-color: #f00; }다음으로 색상이 관련된 사이트의 모든 페이지를 살펴보고 색상과 배경 색상 모두에 적합한 클래스를 추가합니다.
마지막으로 CSS에서 새로 만든 색상 클래스 이외의 색상 참조를 모두 제거합니다.
CSS용 'Less' 루비 젬은 멋져 보입니다.
네, 가까운 미래에 (이 글은 2012년 6월에 씁니다) less/ssass 등을 사용하지 않고 native 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 파일에 이것들을 넣습니다.
물론 다양한 계층의 멋진 세계 덕분에 다음과 같은 일을 할 수 있습니다.
.red {color:red}
.blackBack {background-color: black}
하지만 저는 종종 이런 식으로 그것들을 합치게 됩니다.
.highlight {color:red, background-color: black}
시맨틱 경찰들이 당신들 전체에 걸쳐 있을 거란 건 알지만, 효과는 있어요.
저는 당신이 왜 PHP를 사용할 수 없는지 잘 모르겠습니다.그런 다음 원하는 대로 변수를 추가하여 사용하고 파일을 PHP 파일로 저장한 다음 .css 파일 대신 스타일시트로 해당 .php 파일에 링크할 수 있습니다.
PHP일 필요는 없지만, 제 말을 아시잖아요.
프로그래밍을 원할 때 CSS(아마도)가 변수와 같은 것을 지원할 때까지 프로그래밍 언어를 사용하는 것은 어떨까요?
또한 니콜 설리번의 Object-oriented CSS도 확인해보세요.
셀렉터를 그룹화할 수 있습니다.
#selector1, #selector2, #selector3 { color: black; }
javascript를 통해 CSS를 전달하고 COLOR1의 모든 인스턴스를 특정 색상(기본적으로 regexit)으로 교체하고 최종 사용자가 JS를 끌 경우 백업 스타일시트를 제공할 수 있습니다.
dicejs.com (syscsobjs)은 SASS의 클라이언트 측 버전입니다.CSS(json formated 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 demo.
편집: 이 답변은 더 이상 최신이 아닙니다.지금 CSS 변수를 사용해야 합니다.
SCSS 사용을 고려합니다.CSS 구문과 완전히 호환되므로 유효한 CSS 파일도 유효한 SCSS 파일입니다.이렇게 하면 쉽게 마이그레이션할 수 있습니다. 접미사만 변경하면 됩니다.변수와 중첩 선택기가 가장 유용한 등 다양한 향상 기능을 갖추고 있습니다.
고객에게 발송하기 전에 사전 프로세서를 통해 실행하여 CSS로 변환해야 합니다.
저는 수년간 하드코어 CSS 개발자였지만, SCSS에서 무리하게 프로젝트를 수행한 이후로, 이제는 다른 것을 사용하지 않을 것입니다.
시스템에 Ruby가 있으면 다음 작업을 수행할 수 있습니다.
http://unixgods.org/ ~tilo/Ruby/사용_변수_in_CSS_Files_with_Ruby_on_Rails.html
이것은 Rails를 위해 만든 것이지만, 단독으로 실행하도록 수정하는 방법은 아래를 참조하십시오.
이 메서드는 site_settings.rb와 함께 작동하며 CSS 경로를 고려하는 작은 루비 래퍼 스크립트를 작성하여 Rails와 독립적으로 사용할 수 있으며 CSS를 재생성하고 싶을 때마다 호출할 수 있습니다(예: 사이트 시작 중).
Ruby는 거의 모든 운영 체제에서 실행할 수 있으므로 플랫폼에 상당히 독립적이어야 합니다.
예: wrapper: 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의 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
PHP는 아니지만 Zope와 Plone은 이를 달성하기 위해 DTML이라는 SASS와 유사한 것을 사용합니다.CMS에서 엄청나게 유용합니다.
업프런트 시스템즈는 Plone에서 사용된 좋은 예를 가지고 있습니다.
CSS 파일을 xsl 템플릿으로 작성하면 단순한 xml 파일에서 색상 값을 읽을 수 있습니다.그런 다음 xslt 프로세서로 css를 만듭니다.
colors.xml:
<?xml version="1.0"?>
<colors>
<background>#ccc</background>
</colors>
style.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
style.slays:
body {
background-color: #ccc;
}
CSS만으로는 불가능합니다.
Less.js를 사용하여 자바스크립트와 LESS로 할 수 있는데, 이는 LESS 변수를 CSS 라이브로 렌더링하지만, 개발용일 뿐이고 실생활에 사용하기에는 오버헤드가 너무 많이 추가됩니다.
CSS와 가장 가까운 것은 다음과 같은 속성 하위 문자열 선택기를 사용하는 것입니다.
[id*="colvar-"] {
color: #f0c69b;
}
그리고 설정합니다.id는 s로 입니다.colvar-를 들면, colvar-header ID 됩니다. 그러면 색상을 변경하면 모든 ID 스타일이 업데이트 됩니다.그것은 CSS만으로도 충분히 가까운 것입니다.
언급URL : https://stackoverflow.com/questions/1875852/how-can-i-define-colors-as-variables-in-css
'prosource' 카테고리의 다른 글
| 자바스크립트나 jQuery에서 HTML을 정규화하는 방법은? (0) | 2023.09.15 |
|---|---|
| Angular에서 polyfiles.ts 파일의 용도는 무엇입니까? (0) | 2023.09.15 |
| 빈 선언에 있는 쓸모없는 클래스 저장 지정자 (0) | 2023.09.15 |
| 마이크로소프트 SQL 서버 관리를 사용하여 테이블 복제 (0) | 2023.09.15 |
| 구글 크롬, 위지위그 자바스크립트 탈출 (0) | 2023.09.15 |