линейный градиент в scss с динамическими процентами

Question

Я хочу сделать индикатор с фоновым линейным градиентом и использовать предопределенные цвета темы в scss в vue. Такие как:

.progress{
  background-image: linear-gradient(to right, $start-color 0%, $start-color 50%, $end-color 50%, $end-color 100%);
}

50% динамически изменяется кодом в vue. Если я напишу стиль в :style="{}", я не смогу использовать предопределенный цвет scss $start-color и $end-color

Answer 1

Вы должны использовать блок :export из Interoperable CSS в модулях CSS.

В качестве примера рассмотрим приведенные ниже выдержки, сначала в вашем файле sass, в котором определены цвета (скажем colors.scss):

$primaryColor: #fcf5ed;
$secondaryColor: #402f2b;

:export {
    primaryColor: $primaryColor;
    darkColor: $secondaryColor;
}

С этой настройкой вместе с вашими загрузчиками стилей (которые вы в настоящее время должны иметь настройку) вы можете просто импортировать файл как обычные js-модули, как показано ниже в вашем приложении Vue:

import colorVariables from 'colors.scss'

colorVariables.primaryColor // => Will now have the value of the color as a string.

Теперь вы можете просто использовать привязку: стиля Vue для определения линейного градиента. Подробнее о export можно прочитать по следующей ссылке: Совместимый CSS -: экспорт в CSS-модули.