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

从基础页面上的文档中，我认为他们有一个可用于创建自己的块网格的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
    );
}

Answer 2

使用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))

覆盖特定元素的变量值

2 个答案: