CSS에서 색상을 변수로 정의하려면 어떻게해야합니까?


216

꽤 긴 CSS 파일을 작업 중입니다. 클라이언트가 색 구성표에 대한 변경을 요청할 수 있다는 것을 알고 있습니다. 색상을 변수에 할당 할 수 있습니까? 그래서 변수를 사용하여 모든 색상을 사용하는 모든 요소에 새 색을 적용 할 수 있습니까?

CSS 파일을 동적으로 변경하기 위해 PHP를 사용할 수는 없습니다.




도움이 될 수 있습니다 : stackoverflow.com/questions/15831657/…
DreamTeK

답변:


225

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 변수를 기본적으로 지원합니다.


3
다른 사람이 이것을 읽고 Safari에서 작동하게하려고하는 경우를 대비하여 2013 년 봄 / 여름에 CSS에 대한 지원이 웹킷에서 제거 된 것으로 보입니다. bugs.webkit.org/show_bug.cgi?id=114119 lists.webkit.org /pipermail/webkit-dev/2013-April/024476.html 위에서 언급 한 플래그를 활성화 한 후에도 Chrome에서 계속 작동합니다.
Marie Fischer

크롬 36에서 테스트되었으며 플래그가 활성화되어 있어도 작동하지 않습니다. 그래도 파이어 폭스와 함께 작동
yuvi

Chrome 버전 49.0.2623.110 m으로 확인했지만 여전히 작동하지 않습니다.
radu

당신의 OS는 무엇입니까? 그것은 나를 위해 일했다 : 맥 OS X에서 버전 49.0.2623.110 (64 비트)
Arthur Weborg

또한 내 안드로이드의 크롬 버전 안드로이드 5.1.0 크롬 49.0.2623.105에 근무
아서 Weborg

66

사람들은 내 대답을 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

3
IE 필터를 사용할 때와 같이 몇 가지 경우에는 설명을 추가 할 수 없습니다. 여기에 주석을 넣을 수 없습니다-> 필터 : progid : DXImageTransform.Microsoft.gradient (startColorstr = '# 3f5619', endColorstr = '# 77842f', GradientType = 0); / * IE6-9 * /
카터

1
당신이 옳기 때문에 공감대가 끔찍한 해결책입니다.
AndroidDev

나는 개인적으로 서버 측 솔루션보다 클라이언트 측 스타일의 답변을 선호했기 때문에 할 일을했습니다. 놀랍지는 않지만 작동합니다 stackoverflow.com/a/44936706/4808079
Seph Reed

1
당신의 대답은 받아 들여지지 않습니다. 끔찍하다고 생각되면 언제든지 삭제할 수 있습니다.
TylerH

38

CSS 자체는 변수를 사용하지 않습니다. 그러나 SASS 와 같은 다른 언어를 사용하여 변수를 사용하여 스타일을 정의하고 CSS 파일을 자동으로 생성하여 웹에 올릴 수 있습니다. CSS를 변경할 때마다 생성기를 다시 실행해야하지만 그렇게 어렵지는 않습니다.


12
나는 정답이 NOW (2016)라고 생각하지 않습니까? SASS 등을 사용하는 것이 여전히 낫다고 생각합니다.
codenoob

SASS 색상은 정적으로 만 변경할 수 있으므로 CSS var를 사용하는 것이 SASS보다 선호 될 수 있습니다. CSS를 사용하면 런타임에 vars 색상을 변경할 수 있습니다. 즉, 자바 스크립트를 사용하는 버튼으로 "다크 모드"로 전환 할 수 있습니다.
Nick Crews


20

쉬운 CSS 전용 솔루션은 없습니다. 당신은 이것을 할 수 있습니다 :

  • 의 모든 인스턴스 찾기 background-colorcolor당신의 CSS 파일을 각각의 독특한 색상 클래스 이름을 만듭니다.

    .top-header { color: #fff; }
    .content-text { color: #f00; }
    .bg-leftnav { background-color: #fff; }
    .bg-column { background-color: #f00; }
  • 다음으로 색상이 관련된 사이트의 모든 단일 페이지를 살펴보고 색상 및 배경색에 적합한 클래스를 추가하십시오.

  • 마지막으로 CSS에서 새로 만든 색상 클래스 이외의 색상에 대한 참조를 제거하십시오.


1
그러나 고객이 빨간색 요소를 모두 녹색으로 만들기로 결정하면 어떻게 될까요? "색상 : 녹색"을 제공하기 위해 "빨간색"클래스를 변경해야하므로 혼란스럽고 유지하기가 어렵습니다.
singingwolfboy

@ singingwolfboy, 클래스 이름 지정에 더 구체적이어야했습니다. 관련 요소를 참조하는 것이 가장 쉬운 방법이므로 나중에 쉽게 수정할 수 있습니다.
Corey Ballou 2018

8
@ downvoters, 이것은 CSS 전용 솔루션입니다. 스크립팅 또는 CLI와 관련된 많은 대체 솔루션이 있으며,이를 원하지 않는 사람들을위한 것 입니다.
Corey Ballou

17

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');

9

CSS를위한 'Less'Ruby Gem은 멋지게 보입니다.

http://lesscss.org/


2
LESS의 장점은 Ruby 나 프레임 워크에 국한되지 않는다는 것입니다. 그것은 '컴파일'클라이언트 측 또는 장고 - CSS를 같은 다른 프레임 워크와 함께 사용할 수 있습니다 github.com/dziegler/django-css 또는 무언가
xster

9

예, 가까운 장래에 (2012 년 6 월에 작성) 당신은 less / sass 등을 사용하지 않고 네이티브 CSS 변수를 정의 할 수 있습니다! 웹킷 엔진은 방금 첫 번째 CSS 변수 규칙을 구현 했으므로 Chrome 및 Safari의 최신 버전이 이미 작동하고 있습니다. 참조온 사이트 CSS 브라우저 데모가 공식 웹킷 (Chrome / Safari) 개발 로그 를 .

앞으로 몇 개월 안에 네이티브 CSS 변수에 대한 광범위한 브라우저 지원이 기대 될 수 있기를 바랍니다.


2

4

지원으로 인해 css3 변수를 사용하지 마십시오.

순수한 CSS 솔루션을 원한다면 다음을 수행하십시오.

  1. 의미있는 이름의 색상 클래스를 사용하십시오 .

    .bg-primary   { background: #880000; }
    
    .bg-secondary { background: #008800; }
    
    .bg-accent    { background: #F5F5F5; }
  2. 피부와 구조 분리 (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 */
  3. 이를 필요에 따라 변경하려면 별도의 CSS 파일 안에 넣으십시오.


3

자바 스크립트를 통해 CSS를 전달하고 COLOUR1의 모든 인스턴스를 특정 색상 (기본적으로 정규 표현식)으로 바꾸고 최종 사용자가 JS를 끈 경우 백업 스타일 시트를 제공 할 수 있습니다


3

왜 PHP를 사용할 수 없는지 잘 모르겠습니다. 그런 다음 원하는대로 변수를 추가 및 사용하고 파일을 PHP 파일로 저장 한 다음 해당 .php 파일을 .css 파일 대신 스타일 시트로 링크 할 수 있습니다.

PHP 일 필요는 없지만 내 말은 의미가 있습니다.

프로그래밍을 원할 때 CSS가 변수와 같은 것을 지원할 때까지 프로그래밍 언어를 사용하지 않는 이유는 무엇입니까?

또한 Nicole Sullivan의 객체 지향 CSS를 확인하십시오 .


우리 중 일부는하지 않아도되기 때문에 PHP를 모두 사용할 수는 없습니다!
horiatu

3

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은 데모


이 도구는 2014 년에 더 이상 사용할 수없는 것 같습니다
Daniel

3

SCSS 사용을 고려하십시오. CSS 구문과 완벽하게 호환되므로 유효한 CSS 파일도 유효한 SCSS 파일입니다. 이로 인해 마이그레이션이 쉬워지고 접미사 만 변경하면됩니다. 변수와 중첩 셀렉터가 가장 유용합니다.

클라이언트로 전달하기 전에 사전 프로세서를 통해 실행하여 CSS로 변환해야합니다.

나는 수년 동안 하드 코어 CSS 개발자 였지만 SCSS에서 프로젝트를 강요했기 때문에 다른 것을 사용하지 않을 것입니다.


2

시스템에 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

2

선택기를 그룹화 할 수 있습니다.

#selector1, #selector2, #selector3 { color: black; }

2

물론 여러 클래스의 멋진 세계 덕분에 다음과 같은 일을 할 수 있습니다.

.red {color:red}
.blackBack {background-color: black}

그러나 나는 종종 어쨌든 다음과 같이 결합합니다.

.highlight {color:red, background-color: black}

나는 시맨틱 경찰이 온통다는 것을 알고 있지만 잘 작동합니다.


1
나는 다른 의미 론적 이름을 사용한다. 브랜딩 색상이 변경되면 많은 HTML 코드를 다시 실행하게됩니다. .primary, .secondary, .accent 등과 같은 클래스 이름을 사용하십시오.
Eric Harms

2

PHP는 아닙니다. Zope과 Plone은 DTML 이라는 SASS와 비슷한 것을 사용합니다. 달성하기 위해 합니다. CMS에서 매우 유용합니다.

Upfront Systems는 Plone에서 사용 하는 좋은 예 입니다.


1

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;
}

0

CSS만으로는 불가능합니다.

less.js를 사용하여 JavaScript 및 LESS로 할 수 있습니다 LESS 변수를 CSS 라이브로 렌더링하지만 개발 전용이며 실제 사용에 너무 많은 오버 헤드를 추가합니다.

CSS와 함께 가장 가까운 것은 다음과 같이 속성 하위 문자열 선택기 를 사용하는 것입니다 .

[id*="colvar-"] {
    color: #f0c69b;
}

으로 id시작하는 이름으로 조정하려는 모든 요소의을 설정하십시오 ( colvar-예 :) colvar-header. 그런 다음 색상을 변경하면 모든 ID 스타일이 업데이트됩니다. CSS만으로 가능한 한 가깝습니다.


CSS만으로도 CSS 변수를 사용합니다. Mozilla-example
Arthur Weborg

그와 함께 행운을 빕니다 - 모든 사용자가 모질라를 사용하는 경우 중대 그
user2317093

크롬, 사파리 및 오페라에서도 작동합니다.
Arthur Weborg

pmsl OP의 게시물에서 까다로운 고등학교 문법 교정은 무엇입니까? 그렇게 나쁘지 않았습니다.
user2317093
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.