2011-05-02 3 views
22
나는 아주 긴 시간 동안 SASS를 사용하지 않은

작업 및 :first-child 또는 :last-child 같은 의사 요소와 어떤 문제가 있는지 알고 싶어하지? 모든말대꾸 : 첫 아이

+0

무엇이 문제입니까? – sandeep

+0

** scss ** 내가해야 할 일 :'div {> div : nth-child (1) {styles}}' – protoEvangelion

답변

40

, 지원하는 모든 시간을 개선하고 있습니다.

귀하의 질문에 관해서는, 어떤 문제가 있습니까? 의사 요소에 대한 구문이 약간 까다로울 수 있지만, 특히 처음에는 그것을 밖으로 sussing 때, 나는 실제로 본적이 없다고 말하고 싶지만. 그래서 :

div#top-level{ 
    declarations... } 
div#top-level div.inside { 
    declarations... } 
div#top-level div.inside:first-child { 
    declarations... } 

내가 "말대꾸는 CSS가 할 수있는 모든 것을 할 수있는 문 저장이의에 어떤 문서를 보지 못했다 : 하나 기대하는 것처럼 컴파일

div#top-level 
    declarations: ... 
    div.inside 
    declarations: ... 
    &:first-child 
     declarations: ... 

. " 항상 그렇듯이 Haml과 SASS에서는 들여 쓰기가 모든 것입니다.

+3

매우 유용합니다 - 위와 같이 ** & : **의 첫 번째 자식 ** 앞에 ** & **를 넣는 것을 잊지 마십시오 -child ** –

+1

예를 들어 div # top-level : first-child로 컴파일하면 안됩니까? & : first-child는 div.inside 블록 외부에 있는데 왜 div.inside에 적용됩니까? – Danny

+0

@ 대니 : 절대적으로 맞습니다 - 반영 할 예제를 업데이트했습니다. – nomadkbro

0

첫째, 여전히 그 의사 요소를 지원하지 않는 거기하는 브라우저가 있습니다 (예 :. 마지막으로 아이 : 첫 아이)이 문제와 '거래'에, 그래서.

는 의사 요소를 사용하지 않고 그 일을하는 방법 좋은 예입니다 :

http://www.darowski.com/tracesofinspiration/2010/01/11/this-newbies-first-impressions-of-haml-and-sass/

              - 디바이더 파이프 예를 참조하십시오.

나는 그것이 유용 바랍니다. @Andre 특히 나이 (IE) 브라우저에서, 의사 요소와 그들의 지원에 문제가 있음을 올바른 동안

+1

사이드 노트에서, 첫 아이는 CSS2 이후로 우리와 함께하고 따라서 광범위하게 지원된다 : last-child는 CSS3에서만 추가되었다. – Ronny

+0

@ 로니와 동의하지만 여전히 사람들은 이전 버전의 브라우저에서 몇 가지 문제에 직면 해 있습니다 : first_child가 CSS2에 등장했지만 이전 브라우저는 버그가 있습니다. 참조 : http://reference.sitepoint.com/css/pseudoclass-firstchild – sfat

+0

가장 일반적인 경우에 작업 할 때 - 첫 번째/마지막 테두리를 제거하는 등의 이유로 짝수 레이스를 사용하지 않아도됩니다. 지원되는 선택기. 그 외, 나는 모두 공격적으로 분해하려고합니다 .-) – Ronny

10

내 expirience는 :first-of-type, :nth-of-type(), :last-of-type 인 것이 더 좋다고 생각합니다. 그것은 약간의 규칙 변경으로 부엉이가 될 수 있지만, *-of-type, *-child 선택자보다 훨씬 더 많은 것을 할 수있었습니다.