2

我创建了一个jsFiddle来演示这个问题。这只是一个例子。

我在做什么

假设我正在制作一个灵活的网格。我的 HTML 如下所示：

<div>
    <p>a</p>
    <p>b</p>
    <p>c</p>
    <p>d</p>
</div>

四列。我有两个 mixins 和一个名为$ gutter 的全局变量。在我的 mixin 中，我调用这个变量来添加排水沟并改变宽度。

$gutter: 1%;

@mixin col($width){
    float: left;
    width: $width - ($gutter * 2);
    margin: 0 $gutter;
}
@mixin row(){
    width: 100%;
    overflow: hidden;
}

我像这样使用它：

div { @include row(); }
p { @include col(25%); }

我想做的事

现在假设我想向页面添加第二个不同的网格。我创建了这个 HTML 并给出了每个网格和 ID 来区分它们：

<div id="one">
    <p>a</p>
    <p>b</p>
    <p>c</p>
    <p>d</p>
</div>

<div id="two">
    <p>a</p>
    <p>b</p>
    <p>c</p>
    <p>d</p>
</div>​

我希望第二个网格具有不同的装订线宽度。或者，或者，没有排水沟。

#one { @include row(); }
#two { @include row($gutter: 0); }

这显然是行不通的。因为列数是可变的，所以我不能将这个 $gutter:0 声明添加到 @include col() 的每个实例中。它打破了 DRY 原则，最终（在复杂的布局中）变得无法维护。

问题

如何允许在一个 mixin 中设置的变量过滤到另一个（在子元素上）？我知道我可以简单地这样做：

@mixin row(){
    width: 100%;
    overflow: hidden;
    .col { etc etc etc }
}

但是类名可能并不总是.col。这有意义吗？我希望 col() mixin 继承我传递给 row() mixin 的变量。如何？

4

1 回答 1

1

我从 Sófka 分叉了 jsfiddle，并使用 CSS 子选择器 (">") 对其进行了扩展，以定位行中的任何标签。

// Inside the row mixin
& > * {
    @include col($columnWidth, $gutter);
}

此外，我将列宽属性添加到 mixin 并设置默认装订线。

$defaultGutter: 1% !default; // Make sure the variable is set
@mixin col($width, $gutter: $defaultGutter){
    ...
}

见：http: //jsfiddle.net/N44LW/12/

PS.：我不确定我是否完全理解你的问题，但希望这会有所帮助。

于 2012-11-15T09:03:43.153 回答