2013-05-28 5 views
1

CSS와 HTML을 배우고 있으며 간단한 코드 예제를 작성하고 있습니다. 내 CSS에서는 많은 스타일에 테두리 색이나 텍스트 색을 설정하는 데 사용합니다.CSS에서 변수를 정의 할 수 있습니까?

이 색상을 일반 이름으로 정의 할 수 있습니까? 나는 이것을 물어 본다. 왜냐하면 내가 나중에 그것을 바꾸고 싶다면 1 줄을 훨씬 쉽게 바꿀 수 있다고 생각하기 때문이다!

예 :

DEFINE MYCOLOR #000000 

h1{text-color:MYCOLOR;} 
#mydiv{background-color:MYCOLOR;} 

는이 기사 (Is it possible to define constants in css?를) 찾았지만, 한 대답은 클래스의를 사용하는 말했기 때문에 IT는 (그래서 중복 아니에요) 나를 위해 작동하지 않았고, 그것은 작동하지 않았다 다른 속성을 가진 MYCOLOR를 사용하고 다른 답변은 CSS 확장을 사용하기 때문에.

순수 CSS와 HTML로 가능합니까?

+1

"순수 CSS와 HTML로 할 수 있습니까?" 아니. – j08691

+1

당신은 C 개발자 야, 그렇지? ;) – MMM

답변

5

스타일 시트 작성시 변수를 사용하려면 (또는 - 느슨하게 - 상수라는 용어 사용) SCSS 전 처리기가 필요합니다.

사전 프로세서 영역의 두 가지 주요 선수

은 다음과 같습니다

몇 가지 예 :

SASS (사용하는 SCS 구문) :

$mycolor: #000000; 

h1 { color: $mycolor; } 

LESS

@mycolor: #0000000; 

h1 { color: @mycolor; } 

밖으로 시작하려면, 내 제안에 모두 Codepen 또는 CSSDeck (이 모두 제공 SASS에 놀러 것/LESS 라이브 컴파일) 구문에 대한 느낌을 갖습니다.

프리 프로세서는 믹스 인 (Mixin)과 컨트롤 구조 (Control Structure)와 같은 프로그램적인 것들을 제공합니다. 경고 :)

4

아니, 일반 CSS는이 같은 기능을 제공하지 않습니다 (조금 혼란 경우는 ... 정말 미안 내 첫 번째 게시물입니다).

해당 기능이 필요한 경우 Less과 같은 것을 사용해야합니다.

2

음, 짧은 대답은

http://css3.bradshawenterprises.com/blog/css-variables/

는 방법을 설명합니다) 잠시 동안 가능하지 '예,하지만 지금은 (그리고 : 당신이 사전 처리를 시작하면, 다시 가고 어렵다 최신 버전의 Chrome에서 테스트를 위해 구현 된 메소드를 사용하십시오.

아이디어는 같은 코드를 사용하는 것입니다하지만,이에 대한 코드는 웹킷에서 제거 된 현실에서

:root { 
    var-color: rgba(255,0,0); 
} 

h1 { 
    color: var(color); 
} 

, 많은 사람들은 그것을별로 좋아하지 않아요 논평했다.

따라서 사람들은 종종 SASS 또는 덜 사용합니다.

나는 또한 그것에 대해 서면으로 작성했습니다 :

$brand-color: rgb(255,0,0); 

h1 { 
    color: $brand-color; 
} 
0

할 수있는 읽기 고려 권리를 위해 어떤 결정하는 데 도움이 필요한 경우 :

.mycolorText{ 
    color: #000000; 
} 
.mycolorBg{ 
    background-color: #000000; 
} 

그런 다음 HTML에서이 수행

<h1 class="mycolorText"> 
<div class="mycolorBg"> 

CSS를 사용하여 속임수를 지정하고 이와 같은 것을 정의하면 요소에 클래스를 결합 할 수 있다는 것입니다. 이 작업을 수행 할 수 있음을 의미

:이 한 곳에서 그것을하지 않지만

<div class="mycolorBg mycolorText"> 

, 당신이 여전히 업데이트 할 아주 간단 단지 2 곳에서 그것을 할 수 있습니까.

그렇지 않으면 다른 사람들이 말하는 것과 css- 전처리기를 사용해야합니다.

관련 문제