CSS에서 값을 "변수"로 참조하는 방법이 있습니까?

StackOverflow https://stackoverflow.com/questions/566485

  •  05-09-2019
  •  | 
  •  

문제

내부 웹 앱을 위해 HTML과 CSS를 올바르게 작성하려고합니다. 기술적으로 가능한 한 HTML 마크 업이 콘텐츠 페이지에서 레이아웃이 필요한 것과 완전히 독립적입니다.

분명히 이것을 완벽하게 수행하는 것은 불가능합니다. 나는 레이아웃을 만들기위한 단독 목적으로 여분의 중첩 된 div를 추가해야 할 때마다 약간 죽습니다.

내가 다루려고하는 가장 최근의 문제는 .CSS 파일에서 복제 된 텍스트의 양을 줄이는 방법입니다. 가장 중요한 것은 색상입니다. 내 앱 전체에서 나는 색상을 사용하여 "깨끗한", "오류", "경고"및 "사면"을 나타내며, 지금까지 색상을 사용하는 거의 모든 장소는 명시 적으로 정의해야합니다. 때로는 텍스트 색상, 때로는 배경색, 때로는 테두리 색상에 사용됩니다.

색상과 같은 값을 이름에 할당 한 다음 CSS 속성에서 해당 이름을 참조하는 방법이 있습니까?

나는 CSS에서 상속이 어떻게 작동하는지 알고 있으며이 목표를 달성하는 한 가지 방법은 많은 요소에 여러 클래스 이름을 사용하는 것이며 그냥 가질 수 있다는 것을 알고 있습니다. backgroundClean 모든 종류의 객체가 사용하는 스타일이 되십시오. 그러나 HTML이 데이터가 아닌 페이지의 문체 레이아웃과 관련된 더 많은 데이터를 알리도록해야합니다. 처럼 피하기 위해.

보너스 질문 : 이런 종류의 일을위한 모범 사례는 무엇입니까? HTML+CSS가 준비되지 않았을 때 MVC처럼 행동하도록 노력하는 것이 어리석은가? 나는 그것이 CSS가 항상 향한 방향이라는 것을 알고 있지만 아마도 아직 거기에 없을 것입니다.

도움이 되었습니까?

해결책

그렇습니다. 새로 소개되었습니다 CSS 변수 이것을하기 위해!

불행히도 ... 아직 브라우저로 들어 가지 않았으므로 아직 사용할 수 없습니다.

동일한 동작을 얻으려면 일종의 서버 측 언어를 사용하여 CSS 파일에 색상을 동적으로 출력해야합니다. (당신은 또한 많은 JavaScript를 사용할 수 있지만 그것은 끔찍할 것입니다)

따라서 PHP에서는 다음을 수행 할 수 있습니다.

styles.php---------------------
<?php
$warningColor = "#f00";
?>

.warning {
     color: <?=$warningColor?>;
}
.error {
     color: <?=$warningColor?>;
}

index.html----------------------

<link rel="stylesheet" src="styles.php" />

다른 팁

현재 브라우저 지원 번호가 아닙니다. 비록 당신이 당신의 CSS와 같은 것을 전제로 처리한다면 사스 그럼 당신은 이것을 훨씬 더합니다. Sass는 CSS가 거의 모든 방식으로 향상됩니다. 스타일 시트를 작성하는 것이 더 쉽고 재미있게 만듭니다. 나는 바닐라 CSS를 쓰지 않을 것입니다.

나는 당신의 문제를 완전히 이해하고 있는지 확실하지 않지만, 당신은 단순히 색상에 대한 특정 클래스를 할당하는 것을 고려하고 싶을 수도 있습니다. 예를 들어, "경고"의 모든 텍스트/divs/etc가 밝은 빨간색 인 경우 CSS에서이를 수행 할 수 있습니다.

.warning { color: #f00; }

그런 다음 DIV가있을 때마다 이미 추가 클래스가 있더라도 클래스를 추가하여 수업을 공간 분리합니다.

<div class="message warning">Invalid username.</div>

주목해야 할 것은 클래스에 색상 이름을 사용하는 것이 좋은 관행으로 간주되지 않는다는 것입니다. 예를 들어 "Blue"라는 클래스를 정의해서는 안됩니다. 미래에 변경하려는 경우 색상의 이름을 사용해야합니다.

편집 : 당신은 질문에서 이것을 언급했지만, 그것이 현재 할 수있는 가장 좋은 방법이 될 것이라는 것을 알고있는 한, 나는 그것을 조금 확장하고 싶었습니다.

나는 "방금 이것을 발견했다 (Stackexchange 팟 캐스트에서 언급) :http://lesscss.org/

CSS에 변수 (및 기타 기능)를 넣을 수있는 JavaScript입니다.

이것을 달성하는 가장 좋은 방법은 서버 측에서 나올 것이라고 생각합니다. 서버에서 CSS를 처리하도록하여 원하는 것을 출력 할 수 있습니다.

예를 들어 C#을 사용하는 경우 스크립트 블록을 사용하여 변수를 참조합니다.

width: <%= Width %>

일반 HTML 및 CSS 로이 작업을 수행 할 수 없습니다.

유사한 EFFET을 달성하도록 요청할 때 CSS를 즉시 생성 할 수 있습니다. 그러나 출력의 총 제어와 사용자의 대역폭 사용을 최소화하는 것 사이의 균형 포인트를 찾기 위해 이러한 CSS의 캐싱을 매우 신중하게 제어해야합니다.

또한 jQuery 또는 기타 JavaScript 프레임 워크로 구현할 수 있지만 브라우저에 더 많은 작업을 제공하며 제한없이 사용하면 페이지가 사용자에게 응답하지 않을 수 있습니다.

또 다른 가능한 솔루션은 각 스타일에 대한 여러 정의를 포함시키는 것입니다 ...

.error{ text-decoration: underline; font-weight: bolder}

.cancelled{ text-decoration: line-through; font-style: italic;}

.warning{font-weight: bold}

.comment{font-size: smaller; font-style: italic}
.
.
.

.error, .cancelled { color: red };

.warning, .comment {color: green};

여기서 핵심은 오류와 취소가 서로 같은 색상이어야한다고 결정했으며 경고와 주석은 서로 같은 색이어야한다는 것입니다. 사용할 실제 색상은 다른 스타일 속성에 별도로 정의되며 색상 업데이트가 필요한 경우 단일 값을 변경할 수 있습니다.

내가 이것을 가지고 줄 경고는 당신의 스타일 정의가 두 곳으로 나뉘어져 있다는 것입니다. 그래서 누군가가 다른 색상을 사용하기 위해 기본 하나를 업데이트 한 다음, 왜 영향을 미치지 않는지 깨닫기 전에 머리를 긁는 데 오랜 시간을 보낼 수 있습니다. - 즉, 두 번째 정의가 그것을 무시하기 때문에.

@Bob과 Tom Ritter가 언급 한 서버 측 접근 방식은 또한 고려할 가치가 있지만, 내가 제안한 것과 마찬가지로 캐싱 문제에 취약합니다.

예-jQuery라고합니다. JavaScript와 좋은 JavaScript 라이브러리 (jQuery가 우수합니다)를 사용하고 필요한 것을 조작하십시오.

서버 측 스크립팅에 액세스하고 싶지 않거나 액세스하지 않으면 한 해결 방법은 클라이언트에서 JavaScript를 사용하는 것입니다. document.write ()가있는 무언가만이 트릭을 수행합니다. 유일한 문제는 선이 나누는 것입니다 ...

<script type="text/javascript">
<!--
var sColor = "#f0000";
var myCSS = ".red {" +
             "    color: " + sColor+
              "}" +
             ".error { " +
                  color: " + sColor +
             "}";

document.write(myCSS);
-->
</script>

글을 쓰거나 읽기에는 너무 어리 석고 (IMHO) 유지하기가 간단하지 않습니다 ... 개인적으로, 나는 서버 측 언어를 선호합니다. 그렇게하면 당신은 완전히 일어나고있는 일을 통제하고 있습니다. 또는 적어도 조금 더. ;-)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top