2017-03-06 7 views
5

css vars의 소개와 함께, 의 이유를 알고 싶습니다. 왜--이 var를 나타내는 방법으로 선택 될까요?CSS에 vars에`--`를 사용하기로 결정한 기술적 한계가 있습니까?

CSS가 semi capable calc 기능을 가지고 있다고 생각하면 --이 다른 언어의 감소 연산자와 쉽게 혼동 될 수 있다고 생각합니다.

--을 선택하게 된 역사적 의의 또는 기술적 제한 사항이있는 경우 궁금합니다. CSS 마커가 일반적으로 싱글 (#,., @ 등) 인 경우 이중이 특히 혼란 스럽습니다. 또한 이미 다른 것들에 의해 사용되는 기호를 사용하는 것도 흥미 롭습니다 (특히 클래스 이름이 --으로 시작하는 경우).

예 :

@custom-media --lt-sm (width < 576px); 
--grey300: #e0e0e0; 

.navbarItem { 
    display: inline-block; 
    text-align: center; 
    border-top: 1px solid var(--grey300); 
    border-left: 1px solid var(--grey300); 

    @media (--lt-sm) { 
     flex-grow: 1; 
    } 

    &:last-child { 
     border-right: 1px solid var(--grey300); 
    } 
} 

면책 조항 일부는이 질문의 유효성을 주장하지만, 을 이해 할 수

는 특정 개념을 기억의 핵심 기술이다.

내가 관련된 찾을 수있는 유일한 설명 : - 사용자 지정 속성 및 기타 사용자 정의 일을 나타 내기 위해 접두사 ""를하여 telcon에서

오늘, 우리는을 사용하여 해결.

이 var() 함수에서 사용자 지정 속성을 참조하지만 이 실제로 해결되지 않았을 때 접두사가 유지되거나 삭제되는지 여부를 논의했습니다. 전화는 오늘 접두사를 놓고 토론을했지만, 저는 var- * 속성을 사용하고 있지만, 과 같이 혼란스러운 경우 "--0"이나 "--0"과 같은 혼란스러운 사례가있는 것처럼 Simone과 Sylvain과의 토론에서 일부는 입니다. "----". 내가 인수로 모든 속성 이름 걸릴 수 있습니다) 가능성이 VAR를 (생각 저자 에 의한 잠재적 인 혼란을 이해하면서

그래서, 나는 그것이 다양한 상황에서 탈출 할 수 에 필요한 사항을 통해 혼란에 의해 기각 것 같아요. 이스케이프 규칙은 항상 매우 희박하므로 작성자에게 혼란 스럽습니다. 따라서 사용자 정의 속성 을 그대로 var() 인수로 사용하십시오.

참조 :

http://lists.w3.org/Archives/Public/www-style/2014Mar/0467.html

https://www.w3.org/TR/css-variables/#defining-variables

+0

예, 그렇지만 CSS와 다른 언어를 혼합해서는 안됩니다. 물론'--'는 감소 연산자처럼 보이지만 다른 언어와 비교할 때 하나의'-'를 포함하는 단어는 빼기처럼 보입니다. 따라서 CSS는 독창적입니다! 어쨌든, 한 문자 대신에 두 개의 빼기 기호를 사용하는 이유는 무엇입니까? 어쩌면 그들은 단일 문자가 부족한 것 같았습니다. 다른 대부분은 이미 사용 중입니다. –

+0

고유 한 설명이 시작되지 않습니다! 당신이 말하고있는 것을 완전히 이해합니다. 만약 그들이 고갈을 생각한다면 왜 단 하나의'-'을 사용하지 않는 것이 좋을까요? 몇 가지 이유가있을 수 있다는 것을 이해합니다. 그러나 결국 거기에있는 이유를 논의/문서화 한 경우에만 관심이 있습니다. – Chris

답변

4

다른 답변에서 언급 한 단일 대시로 시작하는 공급 업체 접두사와의 충돌을 피하기 위해 CSS ident 문법은 글자, 숫자, 대시 및 밑줄 이외의 문자를 허용하지 않습니다 CSS2의 section 4.1.3 참조). 커스텀 속성이 다른 심볼로 표시 되었다면, 기존의 모든 CSS 구현은 사용자 정의 속성 이름에 사용 된 심볼을 수용하기 위해 파서를 업데이트하거나 심지어 재 작성해야 할 필요가있었습니다. 메시지에서 언급 년대 텔레컴의 minutes에서 1

, 단일 대시로 시작하는 공급 업체 접두사와 충돌 회피 가설이 사실이라고 볼 수 있습니다. --을 사용하면 idents normally cannot start with double dashes (klumme이 지적했듯이)이 작은 구문 분석기를 변경해야합니다. 나는 정확히 어떻게 구현이 파싱 (d) 선언을 파싱하는지 확신 할 수 없지만, 내 추론이 여전히 유지된다고 가정하는 것이 안전하다. 왜냐하면 이후의 코드가 일 때 첫 번째 대시를 사용하면 구문 분석 오류가 발생하지 않으므로 대시 구문 분석기는 진행 방법을 결정하기 전에 <property> 또는 <custom-property-name> (또는 ,에 사용자 정의 소품을 지원하지 않으면 구문 분석 오류가 발생하는지) 여부를 판별 할 수 있습니다. 이 변화는 또한 CSS-변수에 반영

은 (I도 here 커버하는) section 2에서 규격 :

지정 속성는 이름이 두 개의 대시로 시작하는 재산권 (U이고 + 002D HYPHEN-MINUS)입니다 (예 : --foo). <custom-property-name> 프로덕션은 다음과 같습니다. 두 개의 대시로 시작하는 유효한 식별자로 정의됩니다.

그래서 대시 그들이 사소한 파서 변경 기존의 문법에 맞지 때문에 사용 및 공급 업체 접두사와 충돌 방지, 특히 이중된다 (대시와 밑줄, 그래서 하나의 밑줄 같으면 공급 업체 접두사에 대한 상호 교환주의를 그것도 자르지 마라). 그들의 질문은 사용자 정의 소품 이름에 대한 선택 접두사에 대해 아니었지만


1

는 사실, 나는 단지 몇 주 전에 다른 사람의 질문에 대한 응답으로 this very same reasoning했다.

+0

우수 감사합니다. @BoltClock – Chris

+0

나는 그것을 백업 할 수 없지만 막연히 "--prop"가 기존 공급 업체 접두사 구문을 다시 사용하지만 "null 공급 업체"가 사용된다는 사실을 기억하십시오. Tab Atkins는 그가 [직선 보간과 비슷한 것을 위해'$ '를 저장하기를 원한다고 말하는 기록에 남았다.] (http://www.xanthir.com/blog/b4KT0). – Tigt

1

내가 잠재적 업체들이 있다면 하이픈 표시 속성이 무시되는 자신의 접두사가하는 방법과 어떤 식 으로든 관련이 있다고 생각 브라우저/파서에 의해 이해되지 않는다. 나는 생각한다. 이미 존재하는 다른 CSS 기능이나 오브젝트와 충돌하지 않는 한 가지 방법이기도합니다.SASS$ 심볼을 사용하는 반면 LESS@ 같은 기호를 사용 예컨대

는 전처리기를. 이것은 Software Engineering SE에서 논의되었으며, 그 질문에 대한 답변은 꽤 괜찮습니다.

기본적으로 다른 무엇보다도 호환성 이유로 인해 인 것으로 보입니다. 어떤 사람은 & 기호와 % 기호와 같은 다른 것에 비해 변수가 무엇인지 나타내는 것도 쉽다는 것을 주장 할 수 있습니다. 여기

바닐라 CSS, LESS와 SASS 등

0

내 사고는 이전 버전과의 호환성과 관련이있다 인을 포함 CSS 트릭에 이상 CSS 변수의 차이에 대한 몇 가지 additional reading입니다. CSS에 무언가를 추가 할 때 구문을 명확하게 파싱 할 수있을뿐만 아니라 새로운 기능이 스타일 시트의 일부를 구문 분석하여 실제로 이해할 수있는 부분에 영향을 미치지 않도록해야합니다 .

변수가 규칙 집합 내에서 선언 될 수 있으므로 하나의 하이픈은 공급 업체 접두사와 혼동을 일으킬 수 있습니다. 클래스 선택기의 클래스 이름은 실제로 두 개의 하이픈 (적어도 the CSS 2.1 spec)으로 시작할 수 없습니다.