Jak uzyskać wartość właściwości CSS w SASS?

Question

Chciałbym zapisać bieżącą wartość nieruchomości do późniejszego wykorzystania. Zostało już rozwiązane dla jQuery.

Problem jest, że używam @mixin zastosować hack CSS w kilku miejscach (Justified Block List) i chciałbym przywrócić własność font-size w .block-list * (obecnie wszystko tekst w podelementów właśnie zawalił).

Niezadowalające obejścia:

• Zapisz globalny domyślny rozmiar czcionki w oddzielnym pliku i przekazać je do @mixin na @import. Jest to oczywiście w ogólnym przypadku nie ten sam rozmiar czcionki co obiekty, do których stosuje się mixin.
• Zapisz rozmiar czcionki za każdym razem, gdy go zmienisz i przekaż. Wiąże się to z zaangażowanymi plikami, ponieważ nie jest zbyt elegancka dla arkusza stylów typografii w kilku innych niezwiązanych ze sobą plikach.
• Użyj więcej jQuery.

Ewentualnie zadowalające obejścia:

• Zastąp rozmiar czcionki z silniejszą zasadą pierwszego przodka, który zmienia go. Może to być trudne do określenia.

Answer 1

Nie można określić wartości właściwości, dopóki style nie zostaną faktycznie zastosowane do dokumentu (tak właśnie analizuje jQuery). W językach arkuszy stylów nie ma wartości "aktualnej" z wyjątkiem wartości początkowej lub określonej przez użytkownika.

Zapisz rozmiar czcionki za każdym razem, gdy go zmienisz, i przekaż, że wydaje się najlepszy, a @BeauSmith podał a good example. Ten wariant umożliwia przekazanie rozmiaru lub powrotu do zdefiniowanego globalnego kodu:

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

Answer 2

Jeśli masz mixin, który robi coś "hacky" z rozmiarem czcionki, prawdopodobnie będziesz musiał zresetować rozmiar czcionki, jak zauważyłeś. Sugeruję następujące:

1. Utwórz część Sass, aby nagrać zmienne konfiguracyjne projektów. Sugeruję _config.sass.

2. Określ swój podstawowy rozmiar czcionki w _config.sass:

   $base-font-size: 16px 
   

3. Dodaj @import _config.sass w górnej części głównego pliku (ów) Sass.

4. Aktualizacja mixin zresetować rozmiar czcionki do $ base-font-size:

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

Uwaga: Jeśli używasz składni SCSS, będziesz musiał aby zaktualizować przykłady tutaj.