sass - 他の場合とのサスミックスイン

Question

私は次のミックスインを持っています

@mixin arrows($arrowdirection:"left", $arrowsize:"5px", $arrowcolor:$navbgblue ) {
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    @if $arrowdirection == "right" {
        border-top: $arrowsize + px;
        border-bottom: $arrowsize + px;
        border-left: $arrowsize + px $arrowcolor;
    } @else if $arrowdirection == "left" {
        border-top: $arrowsize + px;
        border-bottom: $arrowsize + px;
        border-right:$arrowsize + px $arrowcolor;
    } @else if $arrowdirection == "up" {
        border-bottom: $arrowsize + px $arrowcolor;
        border-left: $arrowsize + px;
        border-right: $arrowsize + px;
    } @else if $arrowdirection == "down" {
        border-left: $arrowsize + px;
        border-right: $arrowsize + px;
        border-top: $arrowsize + px $arrowcolor;
    }
}

これは、いくつかの（間違いなく明らかな）理由で、デフォルトを使用するか、何かを渡すと、動作を拒否します

.test{
    @include arrows("left", "5px", "blue");
}

私はCSSだけを取得します

width: 0;
height: 0;
border-color: transparent;
border-style: solid;

だから私のif/elseはどういうわけかキックインしていません。なぜお願いしますか？

score 33 · Accepted Answer

ええ、最適化には間違いなくある種のバグがあります。しかし、これは機能します

@mixin leftarrow($size:5px, $direction:left) {
  border-width: $size;
  border-color: transparent;
  border-style: solid;
  display: inline-block;
  height: 0px;
  width: 0px;

  @if $direction == "right" {
   border-left-color: $navbgblue;
   border-right-width: 0px;
 } @else if $direction == "left" {
   border-right-color: $navbgblue;
   border-left-width: 0px;
 } @else if $direction == "up" {
   border-bottom-color: $navbgblue;
   border-top-width: 0px;
 } @else if $direction == "down" {
   border-top-color: $navbgblue;
   border-bottom-width: 0px;
 }
}

.test{
  @include leftarrow(5px, up);
}

だから私はそれを使います:-)

score 14 · Accepted Answer

これは、わずか4行のコードでミックスインを実行しています。

/*
 * Creates CSS triangle
 * direction options: top, right, bottom, left.
 * Example @include cssTriangle(bottom, red, 50px);
 */
@mixin cssTriangle($direction:left, $color:#89D4E7, $width:34px) {
    $opposite: nth((top,right,bottom,left), index((bottom,left,top,right),$direction));
    border: solid $width transparent;
    border-#{$direction}: none;
    border-#{$opposite}: solid $width $color;
}

score 5 · Accepted Answer

まず、変数を文字列として扱いたい場合を除いて、変数を引用符で囲みたくありません（文字列はCSS出力で引用符で囲まれます）。デフォルト値を「elseif」ではなく「else」の一部にすることをお勧めします。

生成されたCSSを見ていますか、それともFirebugのようなものの中から見ていますか？ミックスインをそのままコピーして貼り付けると、次の出力が得られるためです。

.test {
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-top: "5pxpx";
  border-bottom: "5pxpx";
  border-right: "5pxpx" blue;
}

これは、すべての引用符と余分な「px」が削除されたミックスインのリファクタリングバージョンです。

@mixin arrows($arrowdirection: left, $arrowsize: 5px, $arrowcolor: green) {
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;

    @if $arrowdirection == right {
        border-top: $arrowsize;
        border-bottom: $arrowsize;
        border-left: $arrowsize $arrowcolor;
    } @else if $arrowdirection == up {
        border-bottom: $arrowsize $arrowcolor;
        border-left: $arrowsize;
        border-right: $arrowsize;
    } @else if $arrowdirection == down {
        border-left: $arrowsize;
        border-right: $arrowsize;
        border-top: $arrowsize $arrowcolor;
    } @else {
        border-top: $arrowsize;
        border-bottom: $arrowsize;
        border-right:$arrowsize $arrowcolor;
    }
}

.test {
    @include arrows;
}

.test2 {
    @include arrows(right, 10px, blue);
}

次の出力が得られます。

.test {
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-top: 5px;
  border-bottom: 5px;
  border-right: 5px green;
}

.test2 {
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-top: 10px;
  border-bottom: 10px;
  border-left: 10px blue;
}

score 1 · Accepted Answer

これは私のために働いた。ボーダーショートカットを使用すると、それ自体と競合する混合およびマッシュされたcssが作成されます

@mixin arrows($arrowdirection: left, $arrowsize: 5px, $arrowcolor: green) {
    /*
     * Creates css arrows
     * direction options: top, right, bottom, left. (to match border-'direction' of css)
     * Example @include arrows(bottom, 12px, #f00);
     */
    width: 0;
    height: 0;
    @if $arrowdirection == top {
        border-left: $arrowsize solid transparent;
        border-right: $arrowsize solid transparent;
        border-bottom: $arrowsize solid $arrowcolor;
    } @else if $arrowdirection == right {
        border-top: $arrowsize solid transparent;
        border-bottom: $arrowsize solid transparent;
        border-left: $arrowsize solid $arrowcolor;
    } @else if $arrowdirection == bottom {
        border-left: $arrowsize solid transparent;
        border-right: $arrowsize solid transparent;
        border-top: $arrowsize solid $arrowcolor;
    } @else {
        border-top: $arrowsize solid transparent;
        border-bottom: $arrowsize solid transparent;
        border-right: $arrowsize solid $arrowcolor;
    }
}

http://css-tricks.com/snippets/css/css-triangle/と@cinnamonの肩に立っている

score 1 · Accepted Answer

@mixinを呼び出すときに、一致する$ arrowdirection引数を渡す必要がありますが、次のように別の@else条件で@error（メッセージ）を追加できます：-

$navbgblue: #587cd7;    
@mixin leftarrow($size:5px, $direction:left) {
      border-width: $size;
      border-color: transparent;
      border-style: solid;
      display: inline-block;
      height: 0px;
      width: 0px;

      @if $direction == "right" {
       border-left-color: $navbgblue;
       border-right-width: 0px;
     } @else if $direction == "left" {
       border-right-color: $navbgblue;
       border-left-width: 0px;
     } @else if $direction == "up" {
       border-bottom-color: $navbgblue;
       border-top-width: 0px;
     } @else if $direction == "down" {
       border-top-color: $navbgblue;
       border-bottom-width: 0px;
     } @else{
        @error('please provide correct direction [up,right,bottom,left]')
     }
    }

.test{
  @include leftarrow(5px, blue);
}

これにより、ユーザーはデフォルトまたは一致する引数を指定する必要があり、ユーザーは常に準拠したミックスインを取得します。

sass - 他の場合とのサスミックスイン

5 に答える 5

Related

Reference