CSS에서 반복되는 상수 피하기

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

  •  09-06-2019
  •  | 
  •  

문제

CSS 파일에서 상수의 반복을 줄이는 유용한 기술이 있습니까?

(예를 들어, 모두 동일한 색상이나 동일한 글꼴 크기를 적용해야 하는 다양한 선택기)?

도움이 되었습니까?

해결책

최근에, 변수가 추가되었습니다 공식 CSS 사양을 참조하세요.

변수를 사용하면 다음과 같은 작업을 수행할 수 있습니다.

body, html {
    margin: 0;
    height: 100%;
}

.theme-default {
    --page-background-color: #cec;
    --page-color: #333;
    --button-border-width: 1px;
    --button-border-color: #333;
    --button-background-color: #f55;
    --button-color: #fff;
    --gutter-width: 1em;
    float: left;
    height: 100%;
    width: 100%;
    background-color: var(--page-background-color);
    color: var(--page-color);
}

button {
    background-color: var(--button-background-color);
    color: var(--button-color);
    border-color: var(--button-border-color);
    border-width: var(--button-border-width);
}

.pad-box {
    padding: var(--gutter-width);
}
<div class="theme-default">
    <div class="pad-box">
        <p>
            This is a test
        </p>
        <button>
           Themed button
        </button>
    </div>
</div>

불행히도 브라우저 지원은 여전히 ​​매우 열악합니다. CanIUse에 따르면, 현재(2016년 3월 9일) 이 기능을 지원하는 유일한 브라우저는 Firefox 43+, Chrome 49+, Safari 9.1+ 및 iOS Safari 9.3+입니다.

enter image description here

대안:

CSS 변수가 널리 지원될 때까지 다음과 같은 CSS 전처리기 언어 사용을 고려할 수 있습니다. 더 적은 또는 사스.

CSS 전처리기를 사용하면 변수를 사용할 수 있을 뿐만 아니라 프로그래밍 언어로 할 수 있는 모든 작업을 수행할 수 있습니다.

예를 들어 Sass에서는 다음과 같은 함수를 만들 수 있습니다.

@function exponent($base, $exponent) {
    $value: $base;
    @if $exponent > 1 {
        @for $i from 2 through $exponent {
            $value: $value * $base;
        }
    }
    @if $exponent < 1 {
        @for $i from 0 through -$exponent {
            $value: $value / $base;
        }
    }
    @return $value; 
}

다른 팁

요소는 둘 이상의 클래스에 속할 수 있으므로 다음과 같이 할 수 있습니다. 라코 디스

그리고 어딘가에 콘텐츠 부분 : 라코 디스

여기의 약점은 몸에 말이 많고 한 번만 색상을 나열 할 수 없다는 것입니다.그러나 두세 번만 수행 할 수 있으며 해당 색상을 자신의 시트에 함께 그룹화 할 수 있습니다.이제 색 구성표를 변경하려는 경우 모두 함께 사용되며 변경은 매우 간단합니다.

하지만 CSS에 대한 가장 큰 불만은 자체 상수를 정의 할 수 없다는 것입니다.

예를 들어 각 ID 또는 클래스를 쉼표로 구분해야합니다. 라코 디스

전역 변수를 사용하여 중복을 방지 할 수 있습니다. 라코 디스

여기에서 : root 의사 클래스 선택기에서 전역 변수를 초기화 할 수 있습니다. : root 는 DOM의 최상위 수준입니다. 라코 디스 <인용구>

참고 : 이것은 실험적인 기술입니다. 이 기술의 사양이 안정화되지 않았기 때문에 호환성 표에서 다양한 브라우저에서 사용할 적절한 접두사를 확인하십시오.또한 실험 기술의 구문과 동작은 사양이 변경됨에 따라 향후 버전의 브라우저에서 변경 될 수 있습니다. 여기에 추가 정보

그러나 항상 Syntactically Awesome Style Sheets를 사용할 수 있습니다.

Sass의 경우 전역 변수를 초기화하려면 상단에 $ variable_name을 사용해야합니다. 라코 디스

less 와 같은 동적 CSS 프레임 워크를 사용할 수 있습니다.

개인적으로는 쉼표로 구분 된 선택기를 사용하지만 프로그래밍 방식으로 CSS를 작성하는 몇 가지 솔루션이 있습니다.더 간단한 요구 사항에 대해서는 약간 과잉 일 수도 있지만 CleverCSS (Python)

중복 코딩을 피하기 위해 전역 변수 사용 라코 디스

또는 다른 수업을 만들 수 있습니다. 라코 디스

내가 아는 한, 프로그래밍 방식으로 CSS 파일을 생성하지 않으면 좋아하는 파란색 음영 (# E0EAF1)을 단 하나의 지점에서 정의 할 방법이 없습니다.

파일을 생성하는 컴퓨터 프로그램을 매우 쉽게 작성할 수 있습니다.간단한 찾기 및 바꾸기 작업을 실행 한 다음 .css 파일로 저장합니다.

이 source.css에서 이동… 라코 디스

이 target.css로… 라코 디스

다음과 같은 코드로… (VB.NET) 라코 디스

html 요소 (예 : <div class="one two">)에서 다중 상속을 사용할 수 있지만 CSS 파일 자체에 상수를 갖는 방법을 모릅니다.

이 링크 (질문을 검색 할 때 처음 발견됨)는 문제를 상당히 심층적으로 살펴 보는 것 같습니다.

http://icant.co.uk/articles/cssconstants/

CSS 변수 (모든 주요 브라우저에서 구현되는 경우 언젠가는)이 문제를 해결하십시오.

그때까지는 다른 사람들이 제안한 것처럼 (일반적으로 서버 사이더 스크립팅을 사용하여) 복사하여 붙여 넣거나 모든 종류의 전처리기를 사용해야합니다.

라코 디스

JS로 색상 변경 가능 라코 디스

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