PHP를 사용하여 CSS 개선하기

Question

CSS를 사용하는 방식을 약간 변경하고 싶습니다. 색상이나 무언가를 정의하기 위해 변수를 사용할 수 있기를 원합니다. 그래서 다음과 같이 할 수 있습니다.

var red = '#FF0000'; 

물론 적절한 경우 '빨간색'은 '# FF0000'으로 바뀝니다.

어떻게하면됩니까? 나는 일종의 방법을 알고, 나는 단지 정규식을 모른다. 또는 이것이 최선의 방법 일지라도.

Answer 1

이렇게 할 수 있습니다. 간단히 .css 파일에 PHP를 작성하여 HTML 파일을 작성한 다음 웹 서버 (아마 아파치)에게 PHP로 해당 파일을 구문 분석하도록 알려주십시오.

당신은 당신의 CSS를 디렉토리에 .htaccess 파일에이를 추가 할 수

AddHandler php5-script .css 

그러나, 그것은 당신의 CSS 파일의 로딩 속도를 느리게하고, 최종 사용자 캐싱을 방지하므로 나쁜 기술이다 속도 차이를 많이 내지 못한다. 그것은 성능에 신경 쓰지 않는 웹 사이트를위한 편리한 지름길이 될 수 있습니다.

Answer 2

당신은 같은 것을 할 수있는이 잘 작동해야

<?php 
    header('Content-type: text/css'); 

    $red = '#F00'; 
?> 

body { 
    background: <?=$red?> 
} 

style.css.php합니다.

Answer 3

이 같은 문제에 직면했을 때, 나는 외부 CSS 파일에 많은 변화가없는 CSS를 배치하고 HTML/PHP 파일의 머리 부분으로 변경된 CSS를 표시했습니다. 이렇게하면 외부 파일에 CSS를 모두 갖고 싶지만 비표준 Apache 구성을 작성하는 데 드는 비용은 외부 css 파일을 가질 필요가 없다는 독단적 인 필요성이 없습니다.

Answer 4

가장 좋은 방법은 일부 템플릿 파일을 만든 다음 PHP 스크립트로 처리하여 플랫 CSS 파일을 출력하는 것입니다. 인터넷에서 파고들 수 있으며 멋진 CSS 미니 마이 져를 찾을 수 있습니다. 더 많은 성능을 끌어낼 수 있습니다. 몇 가지 유의할 점 :

1) 보안 - 웹을 통해 작성 스크립트를 실행하는 경우 웹 루트 외부에서 템플릿 파일을 유지하는 것이 좋습니다. 그것이 나 였다면 빌더와 템플리트를 웹 루트 외부에 두어 명령 행에서 빌더 스크립트를 실행하십시오.

2) CSS가 실제로 충분히 가치가있는 복잡한 경우 "사물의 이름"에 대해 오랫동안 열심히 생각하십시오. $ red는 특별히 좋은 이름은 아닙니다. 이제는 변수이기 때문에 어떤 시점에서 $ red는 실제로 파란색 일 것입니다 (# 00F처럼)! 이 작업을 수행 할 때마다 스타일 시트에서 값을 나타내는 변수에 대한 설명이 포함 된 이름을 사용하는 것이 진짜 수수께끼였습니다.

편집 : 내가 대답 한 이래로이 문제를 해결하는 compass을 찾았습니다. 자신의 동적 CSS 시스템을 롤업하기 전에 한 번 해볼만한 가치가 있습니다.

Answer 5

처음으로 Paul McMillan님께 말씀하셨습니다.htaccess로 파일

AddHandler php5-script .css

두 번째는 (예를 들어, 동적 헤더 배경을 변경하는)처럼 whatever.css 파일보기 뭔가를 만들어 (코드는 무엇을 사용 호스팅 회사에 따라 다를 수 있습니다)

<?php header('Content-type: text/css'); ?> 
#header { 
    background-image: url("http://myurl.com/images/<?php switch (rand(0,4)) { 
case 0: 
    echo 'green'; 
    break; 
case 1: 
    echo 'red'; 
    break; 
case 2: 
    echo 'blue'; 
    break; 
case 3 : 
    echo 'purple'; 
    break; 
case 4: 
    echo 'orange'; 
    break; 
} 
?>.png"); 
} 

Answer 6

아마도 당신이 찾고있는 것을 수행하는 가장 좋은 방법은 CSS 프레임 워크를 사용하는 것입니다. 당신은 아주 쉽게 상수를 정의 할 수 있습니다 CSScaffold

에서보세요 : 최고의 부품의

@constants { 
    red: #f00; 
} 

하나는 당신이 원하는대로 선택에 CSS 스타일을 포함하는 유지 mixin을 사용할 수 있습니다.