2014-02-05 2 views
0

Singularity의 isolation-span 방법에 대해 도움을 줄 수있는 사람이 있습니까? 실제로는 명확하지 않습니다. 나는 isolation-span (4, 3, 'both')을 가진 article/div (클래스 .special)을 놓았고 뒤이어야하는 두 개의 열 (grid-span을 사용)에 의해 겹쳐졌다. 'both'는 다음 div를 지우는 것이지 그렇지 않습니다. 격리 구간 이후에 빈 div (id = spacer)를 추가해야하고 심지어 그 빈 div에 격리 구간 (1,1, 'both')을 주어 모든 것을 명확하게해야했습니다. 나는 중단 점에 대해 다른 위치를 사용하여이 작업을 해왔으며 이것이 작동하도록하는 유일한 방법이다. 나는 'Bundler'를 사용하여 Singularity 1.1.2와 다양한 의존성을 Ruby 2.0 gem으로 설치했습니다. 나는 .scss를 포함한다. .left_inset은 잘 동작합니다; 내 해결 방법 없이는 작동하지 않는 .special입니다. HTML은 그리드가 3, 8 ($ breaktab) 및 12 ($ breakdesk) 인 Lorem 필러가있는 왼쪽 및 오른쪽 단락 몇 개입니다. 특별한 격리를 제외하고는 모두 작동합니다.Singularity Isolation-Span을 지울 수 없습니다.

#main { 
    #special { 
     border-left: 1px solid white; 
     border-right: 1px solid white; 
     padding: 10px; 
    } 
    @include breakpoint($breaktab) { 
     .left { 
      @include grid-span(4, 1); 
     } 
     .right { 
      @include grid-span(4, 5); 
     } 
     .left_inset { 
      @include isolation-span(3, 2, 'both'); 
     } 
     .special { 
      @include isolation-span(4, 3, 'both'); 
     } 
    } 
    @include breakpoint($breakdesk) { 
     .left { 
      @include grid-span(6, 1); 
     } 
     .right { 
      @include grid-span(6, 7); 
     } 
     .left_inset { 
      @include isolation-span(5, 2, 'both'); 
     } 
     .special { 
      @include isolation-span(6, 4, 'both'); 
     }  
    } 
} 
#spacer { 
    @include breakpoint($breaktab) { 
     @include isolation-span(1, 1, 'both'); 
    } 
} 

대답이 같은 플로트 기간에 .left 블록을 만들 수 있습니다 : 다음 올바르게 컴파일 및 분리-범위 다음 블록이 취소 강제 그건

@include breakpoint($breaktab) { 
     .left { 
      @include float-span(4, 'first'); 
     } 
     .right { 
      @include grid-span(4, 5); 
     } 
     .left_inset { 
      @include isolation-span(3, 2, 'both'); 
     } 
     .special { 
      @include isolation-span(4, 3, 'both'); 
     } 
    } 

.

답변

0

both을 따옴표로 묶어서 문자열로 인쇄하기 때문에 문제가있는 것 같습니다. 따옴표를 끄면 값으로 인쇄되고 정상적으로 작동합니다. 인용문 문제에 대해 알려 주신 file an issue을 보내 주시면 Singularity 1.2.0이 출시되기 전에 살펴 보겠습니다.

+0

감사합니다. 위키는 격리 스팬을 (4, 3, 'both') 따옴표로 명확하게 보여줍니다. 따옴표를 제거하고 spacer div를 제거했습니다. .special div가 다음 두 div (기사)에 의해 중첩 된 사각형으로 돌아갑니다. .inset 격리 간격에서 따옴표를 제거했고 .inset은 여전히 ​​작동했습니다. 나는 breakpoint 외부로 .special을 이동 시키려고 시도했다. (즉, main 내에서 직접 스타일을 사용한다.) no-break. 만약 breakpoint 안에 넣지 않고 고립 스팬을 놓으면, 오른쪽으로 치우치게된다. – prasutagus

+0

더 많은 지원이 필요하면 Sassmeister (http://sassmeister.com/)에서 문제를 복제하고 문제 큐 – Snugug

+0

에 게시하십시오. 컴파일 된 CSS를 검토했습니다. LiveReload를 사용하여 분리 - span 다음 두 블록은 class .left와 class .right 클래스입니다 .left 클래스는 명확한 오른쪽 및 부동 소수점을가집니다. 왼쪽 부동을 지우려면 CSS를 변경하면 분리 스팬이 작동합니다. 그래서 SCSS는 CSS가 제대로 작동하도록 컴파일하지 않습니다. 이제는 종속성을 점검하여 무언가가 잘못되었는지 확인합니다. 어딘가에 잘못이있을 것입니다! – prasutagus