0

.first、.only、および .firstOnly のクラスを追加して、列内の要素が行の唯一または最初の項目である (適切な余白を与える) インスタンスを許可しようとしています。変数を定義 (または変更) するために、パラメトリック mixin で提供される値を組み込む方法はありますか?

$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;
}
4

1 に答える 1

2

ここでは、正しくない多くのことが進行中です。

// 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%;
}
于 2012-12-30T12:53:16.457 に答える