Sass mixin với nếu khác

Question

tôi có những điều sau mixin

@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; 
    } 
} 

mà đối với một số (không rõ ràng nghi ngờ) lý do từ chối làm việc nếu tôi sử dụng một trong hai mặc định hoặc vượt qua một cái gì đó trong

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

tôi chỉ nhận được CSS

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

vì vậy nếu/khác của tôi bằng cách nào đó không khởi động. tại sao xin vui lòng?

Answer 1

yeah chắc chắn là một loại lỗi nào đó, với tối ưu hóa. Nhưng điều này làm việc

@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); 
} 

vì vậy tôi sẽ sử dụng mà :-)

Answer 2

Trước hết, bạn không muốn trích dẫn các biến của mình trừ khi bạn muốn chúng được coi là chuỗi (chuỗi được trích dẫn trong đầu ra CSS của bạn). Đó là một ý tưởng thực sự tốt để có giá trị mặc định của bạn như là một phần của một "khác" thay vì một "khác nếu".

Bạn đang xem CSS được tạo hay nhìn vào nó từ bên trong một cái gì đó như Firebug? Bởi vì nếu tôi sao chép/dán mixin của bạn như là, tôi nhận được kết quả này:

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

Dưới đây là một phiên bản refactored của mixin bạn với tất cả các dấu ngoặc kép và "px" thêm loại bỏ:

@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); 
} 

tôi có được kết quả như sau:

.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; 
} 

Answer 3

này đã làm việc cho tôi. Sử dụng phím tắt biên giới tạo hỗn hợp và nghiền css mà mâu thuẫn với chính nó

@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; 
    } 
} 

• đứng trên vai của những http://css-tricks.com/snippets/css/css-triangle/ và @cinnamon

Answer 4

đây đang làm việc mixin chỉ với 4 dòng mã:

/* 
* 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; 
} 

Answer 5

Bạn cần chuyển đối số $ arrowdirection khớp trong khi gọi @ mixin.But bạn có thể thêm @error (thông điệp của bạn) vào @else co riêng biệt như sau: -

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

buộc người dùng cung cấp đối số mặc định hoặc đối sánh và người dùng luôn nhận được hỗn hợp tuân thủ.