Блог

У меня есть небольшой проект, в котором я впервые попробовал 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>
  

Из документов на странице Foudation я думаю, что у них есть mixin, который доступен для создания вашей собственной блочной сетки. Следующее было взято из 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
    );
}
  

Использование block-grid mixin оказалось отличной идеей, которая решила мою проблему. Вот так в итоге выглядел мой код:

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