Обрабатывать сложные стили с помощью js / ts вместо препроцессоров css - PullRequest
Новая
       44

Обрабатывать сложные стили с помощью js / ts вместо препроцессоров css

2 голосов
/ 13 октября 2019

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

Программируя в Vue, я удивляюсь, почему бы просто не переключиться полностью на стиль, управляемый js / ts, написать полностью гибкие функции поддержки стиля, а затем просто назначить «стили».

Пример: 

<template>
   <div v-for="(el, index) in elements" :key="el.id" :style="getStyle(el.value)">
   </div>
</template>

<script>
   getStyle(index) {    
      return colorScaleHelper(background, index)
   }


   // helper function; potentially with a variety of different possibilities to calculate and define the right colors for different use cases

   colorScaleHelper(prop: string, index: number, range?: number, reverse?: boolean) {
        // ...

        const colors = ['rgba(negative, 1)', 'rgba(negative, 0.75)', 'rgba(warning, 1)', 'rgba(positive, 0.75)', 'rgba(positive, 1)']

        return `${prop}: ${colors[index]}`
   }
</script>

Глядя на этот подход, он выглядит более гибким, когда мы обрабатываем стили через скрипт. Я не являюсь разработчиком React и все еще довольно новичок в программировании, но я думаю, что я слышал похожую концепцию и там. По какой причине я не видел это чаще? Зачем создавать сложные CSS, например, с помощью scss? И если этот подход возможен, каковы потенциальные недостатки или риски?

Большое спасибо за ваш вклад и мнения!

...