4

これが可能かどうかはわかりません。しかし、私はこれを行う方法があるべきだと感じています。私はSASSを使用しており、境界線を最適化する方法を見つけようとしています。境界線の辺のサイズ、タイプ、色をすべて1行で定義できるようにしたいと思います。

私が1、2、または3つの境界線を持っている場合があります。そして、私がやりたいのはです。SASSを使用して、すべてのプロパティを1行で定義できるものを記述します。問題は..

border-left：border-right: border-top:およびborder-bottom:

すべて別々のセレクターであり、それらを組み合わせたいと思います。

私が考えているのはこんな感じです...

SUDOコード：

border ($top,$left,$right,$bottom, $type, $color);

#div {
    @include border(1px, 1px, 1px, 0, solid, #CCC);
}

私はこれらの線に沿った何かが近いだろうと思っていました...しかし、問題はすべての境界セレクターを1つの線に結合して、有効なCSSとして出力することです。

@mixin borders {
  border:($top,$left,$right,$bottom, $type, $color);
}

@mixinを使用することはすべて間違っています、私はこれをかなり確信しています...それで私を正しい方向に向ける助けがあれば大いにありがたいです。前もって感謝します..

4

6 に答える 6

9

私は似たようなことをしようとしていて、この@mixinになってしまいました。

@mixin border ($style,  $sides...){

    @if ($style != "") {

        @if ($sides == "") {

            border: $style;

        } @else {

            @each $side in $sides {

               @if ($side == 'top' or
                    $side == 'right' or
                    $side == 'bottom' or
                    $side == 'left') {

                    border-#{$side}: $style;

                }

            }

        }

    }

}
于 2012-11-08T14:35:56.340 に答える
4

別の可能性:

@mixin border( $coordinates: 0 0 0 0, $colour: #000000, $style: solid ) {
  $top: nth($coordinates, 1);
  $right: nth($coordinates, 2);
  $bottom: nth($coordinates, 3);
  $left: nth($coordinates, 4);

  @if not(unitless($top)) {
    border-top: $top $style $colour;
  }
  @if not(unitless($right)) {
    border-right: $right $style $colour;
  }
  @if not(unitless($bottom)) {
    border-bottom: $bottom $style $colour;
  }
  @if not(unitless($left)) {
    border-left: $left $style $colour;
  }

}

$side: 1px;
@include border($side 0 $side 0, black);

CSS 出力:

 border-top: 1px solid black;
 border-bottom: 1px solid black;

このようにして、スタイルを上書きする必要がなくなりますが、すべての境界面をターゲットにする必要がある場合は、通常の css ショートハンドを使用したいと思います。

単一の $coordinates 値が渡された場合、おそらくこれを拡張して省略形のプロパティを出力できます。そうすれば、少なくともすべてのボーダー スタイルの呼び出しを標準化できます。

于 2013-02-21T23:18:09.450 に答える
2

わかりました、私のコメントへの返信がなかったので、最良の回答からのミックスインの使用方法を次に示します。

@mixin border($style, $color, $sides) {
    @if ($style != "") {

        @if ($sides == "") {
            border: $style $color;

        } @else {
            @each $side in $sides {
               @if ($side == 'top' or
                    $side == 'right' or
                    $side == 'bottom' or
                    $side == 'left') {

                    border-#{$side}: $style $color;
                }
            }
        }  

    }
}

使用法：

.use-border {
   @include border(1px solid, #22222, bottom right);
}

最後の引数で複数の方向を定義できます。素敵で便利なミックスイン！

于 2016-01-22T12:30:50.077 に答える
1

これが私のバージョンです。完璧ではありませんが、短いです。

@mixin border($side, $style) {
  @if $side == all {
border: $style;
  } @else {
border-#{$side}: $style;
  }
}
于 2015-10-21T14:17:34.027 に答える
0 
@mixin  border($color: $white, $opacity: 1,$width : 1px,$style : solid, $position: '') {

  @if $position != '' {
    $position : "-#{$position}";
  }
  border#{$position}:#{$width } #{$style} #{$color};
  border#{$position}:#{$width } #{$style} #{rgba($color,$opacity)};
}
于 2017-08-10T15:06:34.143 に答える
-3

ミックスインは必要ありません。MDN に記載されているように、プレーン CSS を使用できます。

CSS の border プロパティは、スタイル シート内の 1 つの場所で個々の border プロパティ値を設定するための省略形のプロパティです。border は、border-width、border-style、border-color の 1 つ以上の値を設定するために使用できます。

短縮形を使用してすべての境界線の幅、スタイル、および色を設定する例:

border: 1px solid #CCC

これは、1 行で両側に適用されます。異なるものにしたい場合は、特定の側をオーバーライドできます。

border: 1px solid #CCC
border-top: 0
于 2012-08-02T18:40:15.050 に答える