Phạm vi biến Stylus hoạt động như thế nào trên các tệp?

Question

Lý tưởng nhất, tôi muốn thiết lập một tập tin "colors.styl" nơi tôi có thể xác định tất cả các màu sắc được sử dụng trên các trang web như vậy:

// --------------- GENERAL VARIABLE DEFINITIONS 
$beige  = #F2F2F2 
$darkGrey  = #282828 
$errorRed  = #B94A48 

Khi tôi cố gắng truy cập vào các biến trong các tập tin khác, tôi chỉ lấy lại tên biến thay vì giá trị được giải quyết:

body { 
    background-color: $beige; 

Tôi đang biên soạn các tệp theo thứ tự để màu sắc.styl đi trước phần còn lại. Các biến có mất phạm vi của chúng trong các tệp trong Stylus không?

Answer 1

Có, các biến mất phạm vi của chúng trong các tệp.

Nhưng bạn có thể @import color trong các tệp khác để truy cập các biến.

Answer 2

Thay vì làm @import "colors" trong mỗi tập tin, bạn cũng có thể tạo một tập tin nạp chính, như thế này:

@import "colors" 

@import "styles1" 
@import "styles2" 

biến quy định tại colors.styl sau đó sẽ có mặt tại styles1.styl và styles2.styl. Đầu ra từ bút stylus sẽ là một tệp css lớn chứa tất cả các kiểu của bạn.