CSS가 기본적으로 변수와 계층을 지원하지 않는 이유는 무엇입니까?

UI 개발에 익숙하지 않지만 CSS 작동 방식이 매우 불편합니다.

내 유스 케이스는 특정 스타일을 div페이지의 특정 스타일에 적용하고 싶었습니다 .

CSS 시도 :

div.class1 {
    font: normal 12px arial, helvetica, sans-serif;
    font-color: #f30;
}
div.class1 div.class2 {
    border: 1px solid #f30;
}

적은 시도 :

@red: #f30;
@font-family: arial, helvetica, sans-serif;
div.class1 {
    font: normal 12px @font-family;
    font-color: @red;
    div.class2 {
        border: 1px solid @red;
    }

그것을 반복하도록 강제하기 때문에 CSS 버전은 버그를 유도 할 수 #f30및 div.class2당신이 계층 구조 변수 재사용을 달성하기 위해 시도 할 때마다.

내 질문 :

• 왜 CSS가 어려운가요?
• LESS는 특별하지 않습니다-단지 눈에 띄게 개선하고 CSS로 변환합니까?
• CSS가 그러한 중복 코딩 스타일을 장려하기 때문에 사용자에게 동기를 부여하려는 것은 무엇입니까?

나는 CSS가 LESS가되어야한다고 강력하게 믿는다. CSS에서 왜 그런 식으로 일을했는지 ​​분명한 이점을 간과하고 있습니다. 나는 그것이 레거시 문제라고 생각했지만 CSS3로 이것을 해결하려는 시도를 보지 못했을 때 놀랐습니다.

CSS에 어떻게 접근해야하는지 이해하도록 도와주세요.

CSS는 의도적으로 일을 더 어렵게 만들려고하지 않으며, 훨씬 단순한 목표를 염두에두고 설계되었으며 변수와 계층 구조가 유일한 단점은 아닙니다. LESS 와 Sass는 이러한 단점을 해결하기 위해 특별히 존재하며, 두 기능 중 하나가 기본적으로 지원 될 때까지 이를 준수 해야합니다.

W3C의 CSS Working Group 은 CSS 변수와 CSS 계층 구조에 대한 초안을 작성 중입니다.

• CSS 변수 모듈 레벨 1
• CSS 계층 모듈 레벨 3

언제 초안을 구현할 준비가되었는지 또는 주요 브라우저가 얼마나 빨리 초안을 채택 할 것인지 알 수있는 방법이 없습니다. 말할 수있는 것은 CSS 변수 초안이 채택되기에 가깝다는 것입니다. 이미 Chrome, Safari 및 Firefox에서 CSS 변수를 테스트 할 수 있지만 세 브라우저 모두에서 지원되는 것은 실험적인 것으로 간주되며 변경 될 수 있습니다. 읽기 CSS 변수를 사용하여 자세한 내용은 MDN에.