0

ボックスの隅にグラフィック効果を追加するための mixin を作成しています。

グラフィック効果のスクリーンショット例

mixin は、コーナーの位置 (tl、tr、bl、br)、サイズ、および色を受け入れます。

@mixin notch($notch-location, $size, $foreground-color, $background-color) {
    %top--left {
        @extend %notch;

        &:before {
            top: 0; left: 0;
            border-width: $size $size 0 0;
        }
    }

    // etc ...

    %notch {
        position: relative;

        &:before {
            @extend .pel;

            position: absolute;
            border-style: solid;
            border-color: $foreground-color $background-color;
        }
    }

    @if $notch-location == top-left {
        @extend %top--left;
    }

    // etc ...
}

次に、セレクターで mixin を使用します。次に例を示します。

a {
    @include notch(top-left, 24px, $color-brand, #fff);
}

残念ながら、結果のCSSは私が期待しているものではありません:

.menu.collapsed .nav .nav--current a a:before {
  top: 0;
  left: 0;
  border-width: 24px 24px 0 0;
}
.menu.collapsed .nav .nav--current a a {
  position: relative;
}
.menu.collapsed .nav .nav--current a a:before {
  position: absolute;
  border-style: solid;
  border-color: #ec5b25 white;
}

例：

ご覧のとおり、ミックスインを介して追加されたスタイルは、余分な で修飾されていaます。なぜこうなった？

4

2 に答える 2

2

extends の性質上、出力は期待どおりです。クラスは%notch親セレクターに属します(aあなたの場合)。代わりに変更すると.notch、それが明らかになります。

拡張クラスは一時的なものではありません。再利用を計画している mixin 内でそれらを定義することは避けることをお勧めします。そうすることで、ミックスインを呼び出すたびにクラスが生成され、あらゆる場所でコードの重複が発生します (これはおそらく望ましくありません)。

%notch {
    position: relative;

    &:before {
        @extend .pel;

        position: absolute;
        border-style: solid;
    }
}

@mixin notch($notch-location, $size, $foreground-color, $background-color) {
    @extend %notch;
    border-color: $foreground-color $background-color;

    &:before {
        @if $notch-location == top-left {
            top: 0; left: 0;
            border-width: $size $size 0 0;
        } @else if $notch-location == top-right {
            top: 0; right: 0;
            border-width: $size 0 0 $size;
        } @else if $notch-location == bottom-left {
            bottom: 0; left: 0;
            border-width: 0 $size $size 0;
        } @else {
            bottom: 0; right: 0;
            border-width: 0 0 $size $size;
        }
    }
}

a {
    display: block;
    width: 100px; height: 100px;
    background: #0f0;

    @include notch(top-left, 24px, #0f0, #0f0);
}

また、extends が常に最適な選択であるとは限らないことにも注意してください。セレクターを繰り返すことにより、単純にコードを複製した場合よりもコードが大きくなる可能性があります。

于 2013-07-17T11:33:43.967 に答える
0

コード構造を台無しにしてしまったようです。

このエクストラが表示される理由はわかりませんaが、コードをリファクタリングして適切な構造にすると、問題はなくなります。

$color-brand: pink;

%notch {
    position: relative;

    &:before {
        @extend .pel !optional;

        position: absolute;
        border-style: solid;
    }
}

%top--left {
    @extend %notch;

    &:before {
        top: 0; left: 0;
    }
}

@mixin notch($notch-location, $size, $foreground-color, $background-color) {

    border-color: $foreground-color $background-color;

    @if $notch-location == top-left {
        @extend %top--left;
        border-width: $size $size 0 0;
    }
    // etc ...
}


a {
    @include notch(top-left, 24px, $color-brand, #fff);
}

デモ: http://sassbin.com/gist/6019481/

于 2013-07-17T10:39:28.143 に答える