Gần đây, Material Design đã xuất hiện khắp nơi. Một phần của nó bao gồm việc xếp chồng các lớp lên nhau như những tờ giấy thật. Để đạt được hiệu ứng như vậy trong CSS, chúng ta cần sử dụng thuộc box-shadowtính.
Để tránh phải viết bóng mỗi lần theo cách thủ công, chúng ta có thể tạo một chút hỗn hợp Sass cho nó. Điều duy nhất mà mixin này sẽ làm là xuất ra một box-shadowkhai báo dựa trên giá trị đã cho $depth(từ 0 đến 5). Bóng thực sự sẽ được tính toán bởi hai hàm: bottom-shadowvà top-shadow.
/// Gives a card depth effect. /// @param (Number) $depth - depth level (between 1 and 5) /// @link http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality Google Design /// @requires (function) top-shadow /// @requires (function) bottom-shadow @mixin card($depth) ( @if $depth 5 ( @warn "Invalid $depth `#($depth)` for mixin `card`."; ) @else ( box-shadow: bottom-shadow($depth), top-shadow($depth); ) )Đừng quên hai chức năng của chúng tôi:
/// Computes a top-shadow for a card effect. /// @param (Number) $depth - depth level /// @return (List) @function top-shadow($depth) ( $primary-offset: nth(1.5 3 10 14 19, $depth) * 1px; $blur: nth(1.5 3 10 14 19, $depth) * 4px; $color: rgba(black, nth(.12 .16 .19 .25 .30, $depth)); @return 0 $primary-offset $blur $color; ) /// Computes a bottom-shadow for a card effect. /// @param (Number) $depth - depth level /// @return (List) @function bottom-shadow($depth) ( $primary-offset: nth(1.5 3 6 10 15, $depth) * 1px; $blur: nth(1 3 3 5 6, $depth) * 4px; $color: rgba(black, nth(.24 .23 .23 .22 .22, $depth)); @return 0 $primary-offset $blur $color; )Xem bóng Pen Material của Hugo Giraudel (@HugoGiraudel) trên CodePen.