SASS, cách chính xác để gọi mixin là gì?

Question

Tôi chỉ mới bắt đầu sử dụng Sass và tôi đang cố gắng tìm hiểu làm thế nào để tạo ra một mixin hộp bóng ...

tôi sao chép mixin này từ một tràn bài chồng ..

@mixin box-shadow($top, $left, $blur, $color, $inset:"") { 

     -webkit-box-shadow:$top $left $blur $color #{$inset}; 
     -moz-box-shadow:$top $left $blur $color #{$inset}; 
     box-shadow:$top $left $blur $color #{$inset}; 
    } 

Tuy nhiên tôi không chắc chắn chính xác làm thế nào để định dạng của tôi @include

Đây là những gì tôi có cho đến nay cho @include tôi

@include box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 

Và đây là lỗi đầu ra của tôi ...

error(Line 1003: Invalid CSS after "...lude box-shadow": expected "}", was ": inset 0 1px 1...") 

Answer 1

Bad cú pháp.

Sử dụng @include box-shadow(0, 1px, 1px, rgba(0, 0, 0, 0.075), inset);

(Edited vào năm 2014 bao gồm những thay đổi cú pháp Sass' được thực hiện trong vài năm trở lại đây)

Answer 2

Tôi mới đến Sass và câu trả lời được chấp nhận không làm việc với tôi; thứ tự của các giá trị có vẻ sai và các giá trị cũng yêu cầu dấu phẩy sau mỗi giá trị. Tôi sử dụng như sau:

@include box-shadow(0, 1px, 1px, rgba(0, 0, 0, 0.075), inset); 

Answer 3

Đối với 'Silverback' một ví dụ sẽ là:

@include box-shadow(inset 0, 1px, 1px, rgba(0, 0, 0, 0.075)); 

Nó bao gồm các dấu phẩy quên rằng 'pixel 67' nhận xét.

Answer 4

Tôi nghĩ bạn nên bao gồm một số giá trị mặc định:

@mixin box-shadow($left:0, $top:2px, $blur:2px, $color:#000, $inset:"") { 
     -webkit-box-shadow:$left $top $blur $color #{$inset}; 
     -moz-box-shadow:$left $top $blur $color #{$inset}; 
     box-shadow:$left $top $blur $color #{$inset}; 
} 

Bằng cách đó, bạn không cần phải thiết lập tùy chọn của bạn mỗi khi nếu bạn muốn sử dụng cùng mã:

.your-selector { 
    @include box-shadow(); 
} 

tôi cũng đã sửa thứ tự của các tùy chọn: ngang thường xuất hiện trước khi thẳng đứng.

Answer 5

Trong năm 2016, có vẻ như mọi thứ đã thay đổi một lần nữa từ các câu trả lời được chấp nhận. Referecing tài liệu Compass và examples here, sau đây sẽ làm việc trong một tập tin SCSS:

@include box-shadow(rgba(0, 0, 0, 0.075)0 0 3px 1px inset);

Đó bóng rất mờ nhạt, vì vậy tôi thực sự được sử dụng:

@include box-shadow(rgba(0, 0, 0, 0.75)0 0 3px 1px inset);

Đối với nhiều bóng tối: Phân tách từng bóng bằng dấu phẩy.

@include box-shadow(rgba(0, 0, 0, 0.75)0 0 3px 1px inset, rgba(blue, 0.4) 0 0 5px 5px);