SASS：在mixin中从父级继承集合变量答案

【问题标题】：SASS: Inheriting set variable from parent in mixinSASS：在mixin中从父级继承集合变量
【发布时间】：2012-06-16 08:51:35
【问题描述】：

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

我在做什么

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

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

四列。我有两个 mixin 和一个名为 $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 的变量。如何？

【问题讨论】：

所以这个灵魂：jsfiddle.net/Cm7NR/2 对你不起作用？我没有使用类名，而是使用了一个标签，该标签仅在包含 mixin 的元素内部使用。
这行不通。它并不总是一个标签，而且您的方法不允许单独设置列宽。

标签： css variables inheritance sass

【解决方案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.：我不确定我是否完全理解你的问题，但希望这会有所帮助。

【讨论】：

我正在寻找 & * {} 不错的电话。