Tại sao ánh sáng ($ màu, 50%) phân tích thành màu trắng?

Question

sass này đoạn mã:

$red: #f00 

$lightred: lighten($red, 50%) 

body 
    background: $lightred 

là phân tích cú pháp để:

body { 
    background: white; } 

Nếu bạn thay vì làm 45% thay vì 50%, có vẻ như để làm việc như mong đợi:

$lightred2: lighten($red, 45%) 
... 
background-color: #ffe5e5 

Tại sao điều này biến thành màu trắng thay vì 50% màu đỏ dự kiến?

Bạn có thể nhìn thấy nó trong hành động ở đây http://tinkerbin.com/OefelPoi

(Lưu ý - chức năng lưu dường như có một lỗi, trên diện tích css, chọn Sass Cũ Cú pháp một lần nữa, và chạy lại)

Cập nhật -

Kết thúc lên những gì tôi muốn là để trộn màu trắng với màu gốc để có được một bóng râm màu:

mix($color,white, 10%) 

Answer 1

Vì chức năng làm sáng được mô tả trên màu HSL và màu đỏ của bạn # f90 được dịch là hsl (0, 100%, 50%)

do đó lighten ($ lightred, 50%) bằng hsl (0, 0 , 100%) hoặc màu trắng