Использование style='foo' в jade для изменения css, связанного с псевдоэлементом: перед

РЕДАКТИРОВАТЬ: я попытался реализовать совет пользователя 1737909. Использование классов (т. е. .pie.size-{size}:BEFORE) вместо селекторов атрибутов (т. е. .pie[data-value={size}]:BEFORE) помогло мне пройти первый шаг и не препятствует загрузке файла .css. К сожалению, мне не удалось установить величину поворота из-за трудностей с объединением строк в переменные в стилусе. Ни одна из следующих работ. Каков правильный синтаксис?

transform rotate(size+1+'deg')

transform rotate({size}+1+'deg')

foo = size+1+'deg'
transform rotate(foo)

bar = 'rotate('+size+1+'deg)'
transform bar
-webkit-transform bar

В противном случае, есть ли у кого-нибудь идеи для создания датчика css/html?

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

<div class="pie" data-start="0" data-value="30"></div>

К сожалению, код соответствует статическому css:

.pie[data-value="30"]:BEFORE {
    -moz-transform: rotate(31deg); /* Firefox */
    -ms-transform: rotate(31deg); /* IE */
    -webkit-transform: rotate(31deg); /* Safari and Chrome */
    -o-transform: rotate(31deg); /* Opera */
    transform:rotate(31deg);
}

Это работает для статической иллюстрации, но на моей странице будет множество клиньев разного размера. Самым простым решением было бы сделать новые записи для всех 360 градусов, но это кажется ужасной идеей.

Моя идея состоит в том, чтобы определить стиль для каждого датчика внутри нефритового миксина в то же время, когда я устанавливаю «значение данных». Что-то вроде:

pieStyle = '-moz-tranform: rotate('+ degreesPlusOne + 'deg); -ms-tranform: rotate('+ degreesPlusOne + 'deg); -o-tranform: rotate('+ degreesPlusOne + 'deg); -webkit-tranform: rotate('+ degreesPlusOne + 'deg); tranform: rotate('+ degreesPlusOne + 'deg)'

.pie2(data-start='0', data-value=degrees, style=pieStyle)

К сожалению, стиль должен быть установлен не для .pie, а скорее для .pie:BEFORE. Можно ли как-нибудь установить стиль с этим псевдоэлементом в миксине?

В качестве альтернативы есть способ решить это с помощью стилуса? Сайт, над которым я работаю, является агрегатором новостей, и любой пользователь увидит десятки, а то и сотни таких датчиков. В такой среде мне было бы лучше в не столь долгосрочной перспективе просто передать все наборы 360 как часть css и ссылаться на них в кеше в будущем?

Заранее спасибо.


css stylus pug
person Henry Marshall    schedule 14.04.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы определенно можете сделать это с помощью стилуса

for size in 30 60 180 360
  .pie.size-{size}
    transform: rotate(size+1)

С пером transform будет иметь весь свой префикс :).

person Ven    schedule 14.04.2013
comment
Синтаксис transform rotate(61deg), а не transform rotate(61). Объединение 'deg' с таким образом transform rotate(size+1+'deg') не работает. Спасибо за подсказку про ниб. - person Henry Marshall; 10.05.2013