覆蓋特定元素的變量值

Question

我有一個小項目，我首先嚐試了Zurb Foundation框架，大量使用SASS變量進行定製，並且遇到了一個問題。

我用自己的block-grid廣泛，我需要$block-grid-default-spacing:變量的值更改爲rem-calc(2)，但只有#gallery元素中，並在默認值讓它在別處。

如果有幫助，我用簡單的代碼我的圖片庫（有一些無關痛癢的Smarty的模板）

<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

從Foudation的頁面上的文檔，我認爲他們有一個混合可用來創建自己的塊網格。下面是採取從http://foundation.zurb.com/docs/components/block_grid.html：

.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

使用block-grid混入竟然是解決我的問題一個偉大的想法。這就是我的代碼最終看起來像：

#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))