Cách lấy giá trị của thuộc tính CSS trong SASS?

Question

Tôi muốn lưu trữ giá trị hiện tại của thuộc tính để sử dụng sau này. Nó đã được giải quyết cho jQuery.

Vấn đề là tôi đang sử dụng một @mixin để áp dụng một hack CSS ở một số nơi (Justified Block List) và tôi muốn khôi phục lại font-size tài sản trong .block-list * (hiện tất cả văn bản trong các phần tử chỉ là sụp đổ).

cách giải quyết Không đạt yêu cầu:

• Save the kích thước phông chữ mặc định toàn cầu trong một file riêng biệt và vượt qua nó để @mixin trên @import. Đây là tất nhiên trong trường hợp chung không phải là kích thước phông chữ giống như các đối tượng mà mixin được áp dụng cho.
• Lưu kích thước phông chữ bất cứ khi nào bạn thay đổi và vượt qua điều đó. Điều này rối lên các tập tin liên quan, vì nó không phải là rất thanh lịch để @include các stylesheet typography trong một số tập tin khác không liên quan.
• Sử dụng thêm jQuery.

cách giải quyết thỏa đáng Có thể:

• Override cỡ chữ với một quy tắc mạnh hơn về tổ tiên đầu tiên mà thay đổi nó. Điều này có thể khó khăn để xác định.

Answer 1

Không có cách nào để cho biết giá trị được tính của thuộc tính cho đến khi kiểu được áp dụng thực sự cho tài liệu (đó là những gì jQuery kiểm tra). Trong ngôn ngữ định kiểu, không có giá trị "hiện tại" ngoại trừ giá trị ban đầu hoặc giá trị bạn chỉ định.

Lưu kích thước phông chữ bất cứ khi nào bạn thay đổi và vượt qua điều đó có vẻ tốt nhất và @BeauSmith đã cấp a good example. Biến thể này cho phép bạn vượt qua kích thước hoặc dự phòng cho toàn bộ được xác định:

=block-list($font-size: $base-font-size) 
    font-size: 0 
    > li 
    font-size: $font-size 

Answer 2

Nếu bạn có một mixin đang làm điều gì đó "hacky" với kích thước phông chữ, thì có thể bạn sẽ cần phải đặt lại kích thước phông chữ như bạn đã nhận thấy. Tôi đề xuất những điều sau:

1. Tạo phần Sass để ghi lại các biến cấu hình dự án của bạn. Tôi đề xuất _config.sass.

2. Xác định cơ sở font-size của bạn trong _config.sass:

   $base-font-size: 16px 
   

3. Thêm @import _config.sass ở phía trên cùng của tập tin sass chính của bạn (s).

4. Cập nhật các mixin để thiết lập lại các font-size đến $ của bạn cơ sở-font-size:

   @mixin foo 
       nav 
       font-size: 0 // this is the hacky part 
       > li 
        font-size: $base-font-size // reset font-size 
   

Lưu ý: Nếu bạn đang sử dụng cú pháp SCSS, bạn sẽ cần để cập nhật các ví dụ ở đây.