특정 요소에 대한 변수 값 오버라이드

Question

저는 작은 프로젝트를 가지고 있는데, 처음에는 Zurb Foundation 프레임 워크를 사용했고, 커스텀 화를 위해 SASS 변수를 많이 사용했습니다. 문제가 하나 있습니다.

나는 광범위하게 자신의 block-grid를 사용하고 난하지만 단지 #gallery 요소 내부, rem-calc(2)에 $block-grid-default-spacing: 변수 값을 변경해야하고, 다른 곳에서 기본값으로 둡니다.

그것이 내가 Foudation 페이지의 문서에서

<section id="gallery-container" class="row"> 
    <ul id="gallery" class="clearing-thumbs small-block-grid-2 medium-block-grid-3 large-block-grid-4" data-clearing> 
     {foreach from=$offer->photos->get() item=photo} 
      <li> 
       <a href="{$photo->image->thumb()}"><img src="{$photo->image->thumb(true, 295, 230, 5)}" alt="{$offer->title->get()}"/></a> 
      </li> 
     {/foreach} 
    </ul> 
</section> 

Answer 1

(일부 관련이없는 스마티 템플릿에) 내 갤러리를위한 간단한 코드를 사용, 도움이된다면, 나는 그들이 자신을 만드는 데 사용할 수있는 믹스 인 것 같아요 블록 격자. 다음은 http://foundation.zurb.com/docs/components/block_grid.html에서 수행되었다 : block-grid 믹스 인을 사용하여

.your-class-name { 
    @include block-grid(
     // This controls how many elements will be on each row of the block grid. Set this to whatever number you need, up to the max allowed in the variable. 
     // Available options: 1-12 by default, and false. 
     $per-row: 3, 

     // This controls how much space is between each item in the block grid. 
     // Use a variable or any pixel or em values. 
     $spacing: $block-grid-default-spacing, 

     // This controls whether or not base styles come through, set to false to leave out. 
     $base-style: true 
    ); 
} 

Answer 2

내 문제를 해결 좋은 생각으로 밝혀졌다. 이것이 내 코드가 마지막에 어떻게 생겼는지를 보여줍니다.

#gallery 
    @media #{$small-up} 
    +block-grid(2, rem-calc(3)) 

    @media #{$medium-up} 
    +block-grid(3, rem-calc(3)) 

    @media #{$large-up} 
    +block-grid(4, rem-calc(3))