해당 .CSS 파일 내에서 사용할 변수를 .CSS 파일에 생성합니다.

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

  •  09-06-2019
  •  | 
  •  

문제

가능한 중복:
CSS에서 반복되는 상수 피하기

CSS 시트에서 재사용되는 "테마 색상"이 있습니다.

변수를 설정한 다음 다시 사용할 수 있는 방법이 있나요?

예:

.css
OurColor: Blue

H1 { 
 color:OurColor;
}
도움이 되었습니까?

해결책

선택기의 모든 스타일이 단일 규칙에 있어야 한다는 요구 사항은 없으며 단일 규칙이 여러 선택기에 적용될 수 있습니다.그래서 뒤집어 보세요:

/* Theme color: text */
H1, P, TABLE, UL
{ color: blue; }

/* Theme color: emphasis */
B, I, STRONG, EM
{ color: #00006F; }

/* ... */

/* Theme font: header */
H1, H2, H3, H4, H5, H6
{ font-family: Comic Sans MS; }

/* ... */

/* H1-specific styles */
H1
{ 
   font-size: 2em; 
   margin-bottom: 1em;
}

이렇게 하면 다음과 같은 스타일이 반복되는 것을 피할 수 있습니다. 개념적으로 동시에 문서의 어느 부분에 영향을 미치는지 명확하게 합니다.

마지막 문장에서 "개념적으로"가 강조된 점에 주목하세요.이것은 방금 댓글에 나온 것이므로 CSS가 존재하기 전부터 사람들이 수년 동안 계속해서 같은 실수를 저지르는 것을 보아왔기 때문에 이에 대해 조금 더 확장하겠습니다. 동일한 값을 공유하는 두 속성이 반드시 동일한 것을 나타내는 것은 아닙니다. 개념.저녁에는 하늘이 붉게 보일 수 있고 토마토도 마찬가지입니다. 그러나 하늘과 토마토는 같은 이유로 붉지 않습니다. ~ 할 것이다 독립적으로 시간이 지남에 따라 달라집니다.마찬가지로 스타일시트에 동일한 색상, 크기 또는 위치가 지정된 두 요소가 있다고 해서 두 요소가 동일하게 사용되는 것은 아닙니다. 언제나 이러한 가치를 공유합니다.그룹화(여기에 설명된 대로)나 SASS 또는 LESS와 같은 가변 프로세서를 사용하는 순진한 디자이너 값 반복은 향후 스타일 변경으로 인해 오류가 발생하기 쉬운 위험이 있습니다.항상 집중하세요. 문맥상 의미 반복을 줄이려고 할 때 스타일을 무시하고 현재 값.

다른 팁

다음을 사용하면 그 이상을 달성할 수 있습니다. CSS 감소.

아니, 하지만 사스 이것을 한다.CSS 전처리기로서, 작성해야 하는 CSS 양을 줄이기 위해 많은 단축키를 사용할 수 있습니다.

예를 들어:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

변수 외에도 선택기를 중첩하여 논리적으로 그룹화하는 기능을 제공합니다.

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

더있다:비슷한 기능을 수행하는 믹스인과 하나의 선택기를 다른 선택기에서 상속하는 기능이 있습니다.매우 영리하고 매우 유용합니다.

Ruby on Rails에서 코딩하는 경우 자동으로 CSS로 컴파일되지만 필요에 따라 이를 수행할 수 있는 범용 컴파일러도 있습니다.

당신은 처음으로 궁금해하는 것이 아니며 대답은 '아니오'입니다.Elliotte는 그것에 대해 좋은 호언장담을 했습니다. http://cafe.elharo.com/web/css-repeats-itself/.JSP 또는 이에 상응하는 도구를 사용하여 런타임에 CSS를 생성할 수 있습니다.

CSS는 그런 것을 제공하지 않습니다.유일한 해결책은 수동으로 실행하여 일부 동적 의사 CSS를 기반으로 정적 CSS 출력을 생성하거나 웹 서버에 연결되어 클라이언트에 보내기 전에 CSS를 전처리하는 전처리 스크립트를 작성하는 것입니다.

귀하가 정의한 일부 변수를 기반으로 CSS를 생성하기 위해 일부 스크립트를 사용하지 않는 한 현재는 지원되지 않습니다.

하지만 적어도 브라우저 세계의 일부 사람들은 그것에 대해 작업 중.따라서 이것이 실제로 표준이 된다면 모든 브라우저에 구현될 때까지 기다려야 합니다(그때까지는 사용할 수 없습니다).

CSS에는 그런 기능이 없기 때문에(아직 다음 버전에는 있을 것이라고 믿습니다) 전처리에 대한 Konrad Rudolph의 조언을 따르세요.이미 존재하는 것을 사용하고 싶을 수도 있습니다.m4

http://www.gnu.org/software/m4/m4.html

너무 복잡하게 만드네요.이것이 캐스케이드가 존재하는 이유입니다.간단히 요소 선택기를 제공하고 색상을 분류하세요.

h1 {
   color: #000;
}
.a-theme-color {
   color: #333;
}

그런 다음 테마 색상을 사용해야 할 때 이를 재정의하여 HTML의 요소에 적용합니다.

<h1>This is my heading.</h1>
<h1 class="a-theme-color">This is my theme heading.</h1>

저는 이름이 지정된 색상에 대해 CSS를 코딩할 수 있을 뿐만 아니라 해당 색상의 음영이나 혼합을 쉽게 계산할 수 있는 매크로(Visual Studio에서)를 작성했습니다.글꼴도 처리합니다.저장 시 실행되고 CSS 파일의 별도 버전이 출력됩니다.이는 다음과 일치합니다. 버트 보스의 주장 CSS의 모든 기호 처리는 해석 시점이 아닌 작성 시점에서 발생합니다.

모든 코드와 함께 전체 설정은 여기에 게시하기에는 너무 복잡하지만 향후 블로그 게시물에는 적합할 수 있습니다.시작하기에 충분할 매크로의 주석 섹션은 다음과 같습니다.

이 접근 방식의 목표는 다음과 같습니다.

  1. 기본 색상, 글꼴 등을 허용합니다.전체 팔레트 또는 인쇄 처리를 검색/바꾸기를 사용하지 않고도 쉽게 조정할 수 있도록 중앙 위치에 정의해야 합니다.

  2. IIS에서 .CSS 확장자를 매핑할 필요가 없습니다.

  3. 예를 들어 VisualStudio의 디자인 모드에서 사용할 수 있는 다양한 텍스트 CSS 파일을 생성합니다.

  4. CSS 파일이 요청될 때마다 파일을 다시 계산하는 대신 작성 시 한 번만 이러한 파일을 생성하세요.

  5. 조정-저장-테스트 작업 흐름에 추가 단계를 추가하지 않고도 이러한 파일을 즉각적이고 투명하게 생성할 수 있습니다.

이 접근 방식을 사용하면 색상, 색상 음영 및 글꼴 모음이 모두 XML 파일의 값 목록을 참조하는 약식 토큰으로 표시됩니다.

색상 및 글꼴 정의가 포함된 XML 파일은 Constants.xml이라고 해야 하며 CSS 파일과 동일한 폴더에 있어야 합니다.

ProcessCSS 메서드는 VisualStudio가 CSS 파일을 저장할 때마다 EnvironmentEvents에 의해 실행됩니다.CSS 파일이 확장되고 파일의 확장된 정적 버전이 /css/static/ 폴더에 저장됩니다.(모든 HTML 페이지는 CSS 파일의 /css/static/ 버전을 참조해야 합니다).

Constants.xml 파일은 다음과 같습니다. 

<?xml version="1.0" encoding="utf-8" ?>
<cssconstants>
  <colors>
    <color name="Red" value="BE1E2D" />
    <color name="Orange" value="E36F1E" />
    ...
  </colors>
  <fonts>
    <font name="Text" value="'Segoe UI',Verdana,Arial,Helvetica,Geneva,sans-serif" />
    <font name="Serif" value="Georgia,'Times New Roman',Times,serif" />
    ...
  </fonts>
</cssconstants>

CSS 파일에서 다음과 같은 정의를 가질 수 있습니다.

   font-family:[[f:Text]];
   background:[[c:Background]]; 
   border-top:1px solid [[c:Red+.5]]; /* 50% white tint of red */

또한보십시오 CSS에서 반복되는 상수 피하기.Farinha가 말했듯이 CSS 변수 제안이 이루어졌지만 당분간은 전처리기를 사용하고 싶습니다.

HTML 요소의 클래스 속성에서 각각 스타일의 일부를 제공하는 여러 클래스를 사용할 수 있습니다.따라서 CSS를 다음과 같이 정의할 수 있습니다.

.ourColor { color: blue; }
.ourBorder { border: 1px solid blue; }
.bigText { font-size: 1.5em; }

그런 다음 필요에 따라 클래스를 결합합니다.

<h1 class="ourColor">Blue Header</h1>
<div class="ourColor bigText">Some big blue text.</div>
<div class="ourColor ourBorder">Some blue text with blue border.</div>

이를 통해 CSS에서 색상을 여러 번 정의하지 않고도 ourColor 클래스를 재사용할 수 있습니다.테마를 변경하는 경우 ourColour에 대한 규칙을 변경하면 됩니다.

미친 소리처럼 들릴 수도 있지만 NAnt(또는 Ant 또는 기타 자동화된 빌드 시스템)를 사용하는 경우 NAnt 속성을 해킹적인 방식으로 CSS 변수로 사용할 수 있습니다.다음과 같은 내용을 포함하는 CSS 템플릿 파일(styles.css.template 등)로 시작합니다.

a {
    color: ${colors.blue};
}

    a:hover {
        color: ${colors.blue.light};
    }

p {
    padding: ${padding.normal};
}

그런 다음 모든 속성 값을 할당하고(외부 빌드 파일을 <include> 사용함) <expandproperties> 필터를 사용하여 실제 CSS를 생성하는 단계를 빌드에 추가합니다.

<property name="colors.blue" value="#0066FF" />
<property name="colors.blue.light" value="#0099FF" />
<property name="padding.normal" value="0.5em" />

<copy file="styles.css.template" tofile="styles.css" overwrite="true">
    <filterchain>
        <expandproperties/>
    </filterchain>
</copy>

물론 단점은 브라우저에서 어떻게 보이는지 확인하기 전에 CSS 생성 대상을 실행해야 한다는 것입니다.그리고 아마도 모든 CSS를 직접 생성하는 것으로 제한될 것입니다.

그러나 NAnt 함수를 작성하면 속성 확장(그라디언트 이미지 파일을 동적으로 생성하는 등) 이상의 모든 종류의 멋진 작업을 수행할 수 있으므로 나에게는 골치 아픈 일이 아닐 수 없습니다.

CSS는 (아직) 변수를 사용하지 않습니다. 이는 그 시대와 선언적 언어이기 때문에 이해할 수 있습니다.

보다 동적인 스타일 처리를 달성하기 위한 두 가지 주요 접근 방식은 다음과 같습니다.

  • 인라인 CSS의 서버측 변수
    예(PHP 사용):

    <style> .myclass{color:<?php echo $color; ?>;} </style>

 

  • CSS 클라이언트 측을 변경하기 위해 자바스크립트를 사용한 DOM 조작
    예(jQuery 라이브러리 사용):

    $('.myclass').css('color', 'blue');

    또는

    //The jsvarColor could be set with the original page response javascript
    // in the DOM or retrieved on demand (AJAX) based on user action. $('.myclass').css('color', jsvarColor);

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