Tạo một bộ sưu tập (mảng) trong Sass để sử dụng trong vòng lặp @for

Question

tôi đang học Sass và tôi đang cố gắng để vượt qua một tập hợp các dữ liệu (một mảng) vào một quá trình @mixin và dựa trên đó. Vấn đề tôi đang gặp là việc xác định cấu trúc dữ liệu để vượt qua các giá trị vào các @mixin

Dưới đây là một số mã giả:

 
@mixin roundcorners($collection) { 

    $collectionLength = length(collection); 

    @for($i from 0 to $collectionLength) { 
     border-#{$collection[$i]}-radius: 9px; 
    } 

} 

.mybox { 

    @include roundcorners(['top-right','bottom-left']); 

} 

các đầu ra mong muốn sẽ là:

 
.mybox { 
    border-top-right-radius: 9px; 
    border-bottom-left-radius: 9px; 
} 

Answer 1

Điều gần nhất SASS có một mảng là một danh sách mà bạn có thể lặp lại với chỉ thị @each, như vậy:

@mixin roundcorners($collection: (top-left, top-right, bottom-right, bottom-left), $radius: 0) 
    @each $corner in $collection 
    border-#{$corner}-radius: $radius 

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive

Tôi đã sử dụng chuỗi suy giảm giá trị của các mục nhập danh sách vào quy tắc riêng của mình - Tôi không hoàn toàn chắc chắn đó là hợp pháp, nhưng tôi không về dev của tôi. máy để kiểm tra.

Tôi cũng đã sử dụng giá trị mặc định trên các đối số, có nghĩa là bạn có thể chuyển vào bán kính tùy chỉnh. Nếu bạn vượt qua ở bất kỳ góc nào trong danh sách, bạn sẽ xóa toàn bộ danh sách mặc định (mà tôi nghĩ là những gì bạn muốn, nhưng một điều cần lưu ý).

Một khác nhau, cách đơn giản hơn để làm điều này có thể là:

@mixin rounded($topLeft:false, $topRight:false, $bottomRight:false, $bottomRight:false) 
    @if $topLeft != false 
    border-top-left-radius: $topLeft 
    @if $topRight != false 
    border-top-right-radius: $topRight 
    @if $bottomRight != false 
    border-bottom-right-radius: $bottomRight 
    @if $topLeft != false 
    border-bottom-left-radius: $topLeft 

Bằng cách đặt giá trị mặc định, bạn có thể gọi mixin này như:

@include rounded(false, 9px, false, 9px) 

Sử dụng 'false' thay vì 0 như mặc định có nghĩa là bạn không tạo ra các quy tắc bán kính hơn bạn cần. Nó cũng có nghĩa là bạn có thể ghi đè và thiết lập các góc quay lại bán kính 0 nếu bạn cần.

Answer 2

Sử dụng mã được cung cấp bởi @Beejamin Tôi có thể đưa ra giải pháp sau đây sau khi khắc phục một số vấn đề về cú pháp.

@mixin roundcorners($collection: (top-left, top-right, bottom-right, bottom-left), $radius: 0) { 
    @each $corner in $collection { 
     border-#{$corner}-radius: $radius 
    } 
} 

@include roundcorners((top-right, bottom-left), 9px); 

Tuy nhiên, tôi thích giải pháp cuối cùng cho phép tôi chỉ định bán kính khác nhau cho mỗi góc.

Answer 3

Đây là cách tôi đã giải quyết và cho phép bạn đặt bán kính khác nhau.

@mixin border-radius($radius:5px){ 
    @if length($radius) != 1 { 
     $i:1; 
     //covers older modzilla browsers 
     @each $position in (topleft, topright, bottomright, bottomright) { 
      -moz-border-radius-#{$position}:nth($radius, $i); 
      $i:$i+1; 
     } 
     //Covers webkit browsers 
     -webkit-border-radius:nth($radius, 1) nth($radius, 2) nth($radius, 3) nth($radius, 4); 
     //Standard CSS3 
     border-radius: nth($radius, 1) nth($radius, 2) nth($radius, 3) nth($radius, 4); 
    } @else { 
     -webkit-border-radius: $radius; 
     -moz-border-radius: $radius; 
     border-radius: $radius; 
    } 
} 

Có nghĩa là bạn có thể đặt tất cả các bán kính giống nhau:

@include border-radius(5px) 

hoặc khác nhau như thế này:

@include border-radius((5px, 0, 5px, 0)) 

Hy vọng giữ CSS tạo của bạn gọn gàng quá :)