Biến cài đặt thành @mixin trong Sass?

Question

Có cách nào để đặt @include mixin(); thành biến không? Tôi cố gắng này

@mixin bg-gradient($fallback, $type, $positionX, $positionY, $from, $from-percent, $to, $to-percent){ 
    background: $fallback; 
    background: -webkit-#{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent); 
    background: -moz-#{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent); 
    background:   #{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent); 
} 

$navBg: @include bg-gradient(#eee, radial, top, center, #999, 0%, #555, 100%); 
body { $navBg; } // it gave me an error 

Answer 1

Tôi không biết cách nào để làm điều đó đặc biệt, nhưng nếu bạn đang cố gắng chỉ làm khô các thiết lập của bạn trên kiểu đặc biệt của gradient, bạn có thể viết một mixin wrapper cho nó :

@mixin navBg() { 
    @include bg-gradient(#eee, radial, top, center, #999, 0%, #555, 100%); 
} 
body { @include navBg; } 

Sửa:

Here 'sa danh sách các kiểu dữ liệu được hỗ trợ bởi các biến Sass. Cả hai cuộc gọi mixin, cũng không phải kết quả của chúng (toàn bộ các quy tắc CSS), đều được bao gồm. Tôi cũng đã cố gắng xử lý bao gồm như một chuỗi và nội suy nó, nhưng điều đó chỉ hoạt động cho CSS kết quả cuối cùng, không chỉ thị thêm nữa.

Answer 2

@mixin gradient ($place, $bcolor1, $bcolor2){`<br>` 
    background-image: linear-gradient($place, $bcolor1, $bcolor2)`<br>` 
    background-image: -o-linear-gradient($place, $bcolor1, $bcolor2)`<br>` 
    background-image: -moz-linear-gradient($place, $bcolor1, $bcolor2)`<br>` 
    background-image: -webkit-linear-gradient($place, $bcolor1, $bcolor2)`<br>` 
    background-image: -ms-linear-gradient($place, $bcolor1, $bcolor2)`<br>` 
} 

body{ 
    @include gradient(bottom, #F90000 18%, #FF4C4C 66%) 
} 

Answer 3

Nếu bạn đang cố đặt giá trị trả về thành biến SASS, bạn cần sử dụng @function, chứ không phải @mixin. Điều này treo tôi lên một chút và không nhận thức được @ chức năng. Ví dụ:

@function font($font-size, $line-height: 1.4, $font-family: Arial) { 

    @if $line-height == 1.4 { 
     $line-height: round($line-height*$font-size); 
    } 

    @return #{$font-size}/#{$line-height} $font-family; 
} 

$font-medium: font(20px); 

BTW, mặc dù điều này không giải quyết chính xác những gì người dùng này đang tìm kiếm trên tìm kiếm trên internet về việc đặt var vào danh sách kết hợp nên tôi muốn chia sẻ điều này ở đây để người khác biết phải làm gì nếu tình trạng này xuất hiện.