Как получить значение свойства CSS в SASS?

Question

Я хотел бы сохранить текущее значение свойства для последующего использования.Это уже решено для jQuery .

Проблема в том, что я использую @mixin для применения хака CSS в нескольких местах ( Обоснованный черный список )и я хотел бы восстановить свойство font-size в .block-list * (в настоящее время весь текст в подэлементах просто свернут).

Неудовлетворительные обходные пути:

• Сохраните глобальный размер шрифта по умолчанию в отдельном файле и передайте его @mixin на @import.Конечно, в общем случае это не тот же размер шрифта, что у объектов, к которым применяется миксин.
• Сохраняйте размер шрифта всякий раз, когда вы его изменяете, и пропускаете его.Это запутывает задействованные файлы, поскольку не очень элегантно @include таблица стилей типографики в нескольких, иначе не связанных файлах.
• Использовать больше jQuery.

Возможно, удовлетворительные обходные пути:

• Переопределите размер шрифта более строгим правилом для первого предка, который его меняет.Это может быть сложно определить.

Answer 1

Невозможно сообщить вычисленное значение свойства *1001* до тех пор, пока стили фактически не будут применены к документу (это то, что исследует jQuery). В языках таблиц стилей нет «текущего» значения, кроме начального значения или указанного вами значения.

Сохраняйте размер шрифта всякий раз, когда вы меняете его, и передайте, что кажется лучшим, и @BeauSmith дал хороший пример . Этот вариант позволяет передать размер или запасной вариант в определенный глобальный объект:

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

Answer 2

Если у вас есть миксин, который делает что-то «хакерское» с размером шрифта, то вам, вероятно, придется сбросить размер шрифта, как вы заметили. Я предлагаю следующее:

1. Создайте частичку Sass для записи переменных конфигурации ваших проектов. Я предлагаю _config.sass.

2. Определите базовый размер шрифта в _config.sass:

   $base-font-size: 16px
   

3. Добавьте @import _config.sass вверху вашего основного файла sass.

4. Обновите миксин, чтобы сбросить размер шрифта до вашего $ base-font-size:

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

Примечание: Если вы используете синтаксис SCSS, вам необходимо обновить примеры здесь.