影响嵌套变量的参数混合值（不）影响嵌套变量

Question

我试图允许一列中的元素是一行中唯一或第一项（给它适当的边距）添加.first类，仅限于和.firstOnly。有没有办法将参数混合中提供的值合并来定义（或更改）变量？

$colCount: 2; 
$colSpan: 1; 
$gutter: 4%; 

$width: $colSpan * ((100% - $gutter)/$colCount); 


@mixin width($colCount: 2, $colSpan: 1, $gutter: 4%) { 
    $width: $colSpan * ((100% - $gutter)/$colCount); 
} 

@mixin columns($colCount: 2, $colSpan: 1, $gutter: 4%) { 
    @content; 
    @include width() { 
     width: $width; 
    } 


    &.first { 
     @include first(); 
    } 

    &.only { 
     @include only(); 
    } 

    &.firstOnly { 
     @include firstOnly(); 
    } 
} 

@mixin first($colCount: 2, $colSpan: 1, $gutter: 4%) { 
    margin-left: 100% - $width; 
} 

@mixin only($colCount: 2, $colSpan: 1, $gutter: 4%) { 
    margin-left: 100% - (2 * $width) - (2 * $gutter); 
} 

@mixin firstOnly($colCount: 2, $colSpan: 1, $gutter: 4%) { 
    margin-left: 100% - $width - $gutter; 
    margin-right: 100% - $width; 
} 

Answer 1

你在这里有很多事情不是很对。

// If this is part of a reusable library, use the default flag 
// I typically prefer prefixing global variables to avoid collisions with other code 
// (eg. $grid-colCount instead of $colCount) 
$colCount: 2 !default; 
$colSpan: 1 !default; 
$gutter: 4% !default; 

// Mixin changed to a function, better for its intended purpose 
@function width($colCount: $colCount, $colSpan: $colSpan, $gutter: $gutter) { 
    @return $colSpan * ((100% - $gutter)/$colCount); 
} 

// The arguments are set to our global variables by default 
@mixin columns($colCount: $colCount, $colSpan: $colSpan, $gutter: $gutter) { 
    @content; 
    // Something weird was going on here that just plain didn't compile 
    width: width($colCount, $colSpan, $gutter); 

    &.first { 
     // This is where your mixin was getting messed up, 
     // it wasn't passing the values it received on to the mixins 
     @include first($colCount, $colSpan, $gutter); 
    } 

    &.only { 
     @include only($colCount, $colSpan, $gutter); 
    } 

    &.firstOnly { 
     @include firstOnly($colCount, $colSpan, $gutter); 
    } 
} 

@mixin first($colCount: $colCount, $colSpan: $colSpan, $gutter: $gutter) { 
    margin-left: 100% - width($colCount, $colSpan, $gutter); 
} 

@mixin only($colCount: $colCount, $colSpan: $colSpan, $gutter: $gutter) { 
    margin-left: 100% - (2 * width($colCount, $colSpan, $gutter)) - (2 * $gutter); 
} 

@mixin firstOnly($colCount: $colCount, $colSpan: $colSpan, $gutter: $gutter) { 
    margin-left: 100% - width($colCount, $colSpan, $gutter) - $gutter; 
    margin-right: 100% - width($colCount, $colSpan, $gutter); 
} 

当我们调用混入这样的：

.test { 
    @include columns(3, 8, 40%); 
} 

.test2 { 
    @include columns; 
} 

我们得到这样的结果：

.test { 
    width: 160%; 
} 

.test.first { 
    margin-left: -60%; 
} 

.test.only { 
    margin-left: -300%; 
} 

.test.firstOnly { 
    margin-left: -100%; 
    margin-right: -60%; 
} 


.test2 { 
    width: 48%; 
} 

.test2.first { 
    margin-left: 52%; 
} 

.test2.only { 
    margin-left: -4%; 
} 

.test2.firstOnly { 
    margin-left: 48%; 
    margin-right: 52%; 
}