Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 28
Как-то неудобно видеть смесь JavaScript и CSS в одном файле, но пример с полосками (идеей такого подхода) весьма интересен.
По скорости не скажете, как быстро он обрабатывает 1,10,100… Кб *.tea файла (в общем, и, возможно, чуть конкретнее, какие конструкции более тормозят)?
По скорости не скажете, как быстро он обрабатывает 1,10,100… Кб *.tea файла (в общем, и, возможно, чуть конкретнее, какие конструкции более тормозят)?
сам парсинг дешевый
скорость выполнения JS в современных браузерах очень высокая
тем более выполнять tea нужно только при разработке
операции с канвасом достаточно быстрые т.к. используется WebGL,
можете потыкать тут — evanw.github.com/glfx.js/demo/, очень похожий принцип
в дальнейшем я опишу, как добавить гуи для дизайнеров прямо в dev версию странички и тогда можно будет буквально «поиграть с цветом», как любят писать забавные заказчики
смесь JS и CSS нужна только при написании библиотек (вы или программист пишете сложные библиотеки генерации графики на том же JS, а потом просто вызываете нужный миксин)
если вы используете только переменные и миксины, то синтаксис практически не отличается от LESS
т.е.
скорость выполнения JS в современных браузерах очень высокая
тем более выполнять tea нужно только при разработке
операции с канвасом достаточно быстрые т.к. используется WebGL,
можете потыкать тут — evanw.github.com/glfx.js/demo/, очень похожий принцип
в дальнейшем я опишу, как добавить гуи для дизайнеров прямо в dev версию странички и тогда можно будет буквально «поиграть с цветом», как любят писать забавные заказчики
смесь JS и CSS нужна только при написании библиотек (вы или программист пишете сложные библиотеки генерации графики на том же JS, а потом просто вызываете нужный миксин)
если вы используете только переменные и миксины, то синтаксис практически не отличается от LESS
т.е.
@ my_color = 'blue';
body {
color: @my_color;
}
Вы так и не ответили на самый первый вопрос — зачем? «не плодит новых сущностей» — так себе повод читать статью дальше и тем более изучать новый язык.
нет никакого нового языка, в этом и ответ
при этом сам факт, что можно при генерации использовать JS, позволяет представить, что можно сделать
если сразу само собой не представляется, то я расскажу в серии статей дальше ( про общую сборку проекта, тестирование, подвязку к общему билду, генерацию иструментов для дизайнера и IDE, как часть страницы )
первый пример есть в этой статье — про изображения, при этом синтаксис такой же как у HTML Canvas
все пихать в одну статью — накладно
надеюсь, у вас хватит терпения подождать
даже для этой статьи мне пришлось подчистить сайт, убрать с него остальные возможности т.к. они очень хорошо документированы
сам процесс перевода библиотек из местного использования в паблик — это дополнительная работа ) и ее нужно сделать, чтоб вам, в том числе, легче жилось ( ну при условии, что вы ответите для себя на вопрос «зачем» )
при этом сам факт, что можно при генерации использовать JS, позволяет представить, что можно сделать
если сразу само собой не представляется, то я расскажу в серии статей дальше ( про общую сборку проекта, тестирование, подвязку к общему билду, генерацию иструментов для дизайнера и IDE, как часть страницы )
первый пример есть в этой статье — про изображения, при этом синтаксис такой же как у HTML Canvas
все пихать в одну статью — накладно
надеюсь, у вас хватит терпения подождать
даже для этой статьи мне пришлось подчистить сайт, убрать с него остальные возможности т.к. они очень хорошо документированы
сам процесс перевода библиотек из местного использования в паблик — это дополнительная работа ) и ее нужно сделать, чтоб вам, в том числе, легче жилось ( ну при условии, что вы ответите для себя на вопрос «зачем» )
* не очень хорошо документированы
вы говорите: «вот есть такая штука — вы сами можете представить что с ней можно сделать». это неправильный подход, если, конечно, вы хотите кого-то заинтересовать.
надо как-то так: «работать вам будет проще, выспитесь наконец, трава зеленее станет». ну, вы поняли. мотивация какая-то должна быть. про себя скажу — мне лень представлять, мне факты подавай зачем мне про какую-то непонятную штуку писать. за остальных говорить не буду, но одного читателя с таким подходом потереяте:) невелика потеря, но все же.
так проект ваш, как я понял? а почему не open source не хотите сделать?
надо как-то так: «работать вам будет проще, выспитесь наконец, трава зеленее станет». ну, вы поняли. мотивация какая-то должна быть. про себя скажу — мне лень представлять, мне факты подавай зачем мне про какую-то непонятную штуку писать. за остальных говорить не буду, но одного читателя с таким подходом потереяте:) невелика потеря, но все же.
так проект ваш, как я понял? а почему не open source не хотите сделать?
почему же )) я в следующих статьях напишу еще про «зеленую траву»
кусочек травы я оторвал уже в этой статье
просто если пытаться сводить какие-то универсальные системы к чему-то одному, что всегда выходит что-то вроде «вот главный принцип, задумайтесь, какие возможности это открывает»
это как спросить «зачем нужна кибернетика» — и вряд ли создатель скажет, что она была нужна, чтоб вы могли писать сообщения по 140 символов в твиттер )
так и тут, по сути все множество яваскрипт решений теперь доступно дизайнерам (под тонкой оберткой)
один пример я привел, приведу еще
поэтому, надеюсь, что я еще вас не потерял )
проект выложен на гитхабе
куда уж опенсорснее?
github.com/boomyjee/teacss
кусочек травы я оторвал уже в этой статье
просто если пытаться сводить какие-то универсальные системы к чему-то одному, что всегда выходит что-то вроде «вот главный принцип, задумайтесь, какие возможности это открывает»
это как спросить «зачем нужна кибернетика» — и вряд ли создатель скажет, что она была нужна, чтоб вы могли писать сообщения по 140 символов в твиттер )
так и тут, по сути все множество яваскрипт решений теперь доступно дизайнерам (под тонкой оберткой)
один пример я привел, приведу еще
поэтому, надеюсь, что я еще вас не потерял )
проект выложен на гитхабе
куда уж опенсорснее?
github.com/boomyjee/teacss
С teacss вы можете сделать графику параметрической тоже
не сочтите за рекламу, но может кому интересно будет, в тему данного поста.
tenphi.github.com/jcss/
хотя тут конечно без поддержки работы с цветами, там для этого отдельный плагин надо ставить.
tenphi.github.com/jcss/
хотя тут конечно без поддержки работы с цветами, там для этого отдельный плагин надо ставить.
У меня тоже есть подобная библиотечка, которая реализована в разы проще и немного функциональней (поддержка минификации цветов, rgb -> hex -> short hex).
да, я примерно с этого и начинал
отказался от подходя из-за нечитаемости JS — у него все-таки не декларативная природа, отсутствия обратной совместимости c СSS
ну а так было интересно с вами пообщаться на тему, для каких задач писали вы свой код
отказался от подходя из-за нечитаемости JS — у него все-таки не декларативная природа, отсутствия обратной совместимости c СSS
ну а так было интересно с вами пообщаться на тему, для каких задач писали вы свой код
ну а так было интересно с вами пообщаться на тему, для каких задач писали вы свой код
Мне это нужно было для динамической генерации CSS.
Изначально реализация была только на Python, потом сделал версии для JS/CS, на случай что придется генерировать CSS на клиенте (но потом поменяли архитектуру приложения и от этой затеи отказались, хотя генерация CSS на клиенте была довольно шустрая, во всяком случае быстрей чем запрашивать файл с сервера).
Что касается формата, то это был не случайный выбор, т.к. синтаксис CSS схож с пиновским словарем ничего парсить не потребовалось (родной формат, простой обход свойст объекта).
а чем SASS/LESS не устроили?
У меня стояла задача сгенерировать CSS код (нужно было отдавать клиенту архив проекта, в котором находился CSS файл с уникальными стилями).
Самый простой способ это сделать — представить CSS-структуру в виде объекта (ключ/значение).
Результат:
В этом случае, не нужно писать парсер (это значит что работать с CSS можно как с обычным объектом и не нужно придерживаться какого-то специфического синтаксиса).
На клиентской стороне генерация CSS кода будет быстрей чем запрашивать файл с сервера или использовать LESS.
К тому же, когда я это делал, мне потребовалось всего 30 минут для реализации (больше бы времени ушло на чтение, установку и сравнение документации для SASS/LESS).
Самый простой способ это сделать — представить CSS-структуру в виде объекта (ключ/значение).
# Допустим значения будут браться из БД
sql = query 'select color, position from WIDGET_SETTINGS'
# Валидный объект
css =
html:
body:
background: sql.color
div:
position: if sql.position is 'bottom' then 'left' else 'right'
# Добавить в объект новое правило
css.span = color: 'red'
to = require './toCSS.coffee'
# открыть/создать файл на запись
file = fs.createWriteStream 'file.css',
flags: 'a'
encoding: 'utf-8'
mode: 0666
# Записать CSS в 'file.css'
file.write to.toCSS css
Результат:
html body {
background: green;
}
div {
position: left;
}
span {
color: red
}
В этом случае, не нужно писать парсер (это значит что работать с CSS можно как с обычным объектом и не нужно придерживаться какого-то специфического синтаксиса).
На клиентской стороне генерация CSS кода будет быстрей чем запрашивать файл с сервера или использовать LESS.
К тому же, когда я это делал, мне потребовалось всего 30 минут для реализации (больше бы времени ушло на чтение, установку и сравнение документации для SASS/LESS).
TeaCSS — CoffeeScript…
А теперь по делу.
> Файл tea преобразуется в JavaScript
И страничка поедет с NoScript.
> Вы все-таки лишаетесь некоторых сущностей предметной области CSS, таких как «пиксели», «проценты»...
А вот это зря. Мне давно хочется вычитать пиксели из процентов, и всякие функции типа -moz-calc мне в этом помогают. Раз уж всё равно JS — что мешает добавить то же самое, но кроссбраузерно?
А теперь по делу.
> Файл tea преобразуется в JavaScript
И страничка поедет с NoScript.
> Вы все-таки лишаетесь некоторых сущностей предметной области CSS, таких как «пиксели», «проценты»...
А вот это зря. Мне давно хочется вычитать пиксели из процентов, и всякие функции типа -moz-calc мне в этом помогают. Раз уж всё равно JS — что мешает добавить то же самое, но кроссбраузерно?
> И страничка поедет с NoScript.
Что куда поедет — JS-парсер только для разработки, для продакшена используется серверсайд генерация.
Что куда поедет — JS-парсер только для разработки, для продакшена используется серверсайд генерация.
Сгенерируйте мне на серверсайде такой код:
div {
width: @window.innerWidth - 10;
}
ну вот так и пишете, как написали )
ну почти
просто в вашем примере вы хотите того, что не умеет в итоге сам CSS (т.е. хотите императивного подхода)
и по сути, хотите вещей неправильных (хотя их тоже можно делать на TeaCSS)
то, что вы написали, делается padding-ом
приведите живой случай или может списаться в личке и я попробую понять, чего вам не хватает и как это можно сделать
а teacss все-таки не совсем serverside, он просто не для продакшена, но по время разработки работает в браузере, поэтому фишки вроде вашей возможны
ну почти
div {
width: @{$("#other_element").width() - 10}px;
}
просто в вашем примере вы хотите того, что не умеет в итоге сам CSS (т.е. хотите императивного подхода)
и по сути, хотите вещей неправильных (хотя их тоже можно делать на TeaCSS)
то, что вы написали, делается padding-ом
приведите живой случай или может списаться в личке и я попробую понять, чего вам не хватает и как это можно сделать
а teacss все-таки не совсем serverside, он просто не для продакшена, но по время разработки работает в браузере, поэтому фишки вроде вашей возможны
«Будет тебе и кофе, и какао с чаем!»
Нужен ещё CacaoHTML
Нужен ещё CacaoHTML
Ниже уже ответили, все и так кроссбраузерно. Это не решение для продакшена.
Лишаетесь — это не значит «не можете использовать», это значит что эти сущности отсутствуют как базовые в JS. Там нельзя переопределять операторы, а по факту запросить width любого дива и его использовать, переводить проценты в пиксели и так далее вы можете.
Тут, правда, напрашивается картинка с буханкой-троллейбусом.
Лишаетесь — это не значит «не можете использовать», это значит что эти сущности отсутствуют как базовые в JS. Там нельзя переопределять операторы, а по факту запросить width любого дива и его использовать, переводить проценты в пиксели и так далее вы можете.
Тут, правда, напрашивается картинка с буханкой-троллейбусом.
1. Пример про генерацию картинок совсем не понравился, в то время как все пытаются «представление» и «контроллер» разъединить для написания более понятного кода, teacss наоборот объединяет и ещё как пример выставляет. Да ещё и даёт множество возможностей «выстрелить себе в ногу».
2. Не вижу преимуществ по сравнению с SASS, не мог бы автор расписать поподробнее.
2. Не вижу преимуществ по сравнению с SASS, не мог бы автор расписать поподробнее.
1. не совсем уловил, где teacss объединяет эти сущности, наоборот, пытается разделись
картинки — часть представления, логично их смешать с CSS, а не открывать каждый раз фотошоп, чтоб увеличить ручками размер или цветовую гамму шапки
2. давайте так, я просто не очень пока понимаю, что будет преимуществом именно для вас
поэтому я готов попробовать рассказать вам больше (в формате диалога), а потом добавить суть диалога, если она там будет, в статью
картинки — часть представления, логично их смешать с CSS, а не открывать каждый раз фотошоп, чтоб увеличить ручками размер или цветовую гамму шапки
2. давайте так, я просто не очень пока понимаю, что будет преимуществом именно для вас
поэтому я готов попробовать рассказать вам больше (в формате диалога), а потом добавить суть диалога, если она там будет, в статью
1. По сути тут происходит генерация картинки, в моём понимании «представление» генерировать картинки не должно в принципе, оно отображает готовые данные. CSS описывает как документ будет выглядеть и создавать контент для отображения лучше на серверной стороне (ни в коем случае не забывайте о пользователях нетбуков и смартфонов, количество которых растёт всё больше и больше).
2. ок, я тогда подумаю как более ёмко изложить и спишемся
2. ок, я тогда подумаю как более ёмко изложить и спишемся
Как для меня, так плюс пред SASS в том, что можно сгенерировать css файл не устанавливая руби и еще каких дополнительных вещей, обязательно попробую teacss в следующем своем проекте :)
Мне понравилось. Только я бы предпочёл иметь линк на стиль в стандартом формате,
вместо что-нибудь такое, например:
rel — по желанию, type — как маркер типа линка, а href — чтобы можно было использовать как обычный линк с автораспознаванием URL (чтобы можно было открывать из девелопера, чтобы URL подчинялся <base /> при наличии последнего и прочие плюшки для URL)
вместо что-нибудь такое, например:
<link rel="stylesheet" type="text/teacss" href="style.tea" />
rel — по желанию, type — как маркер типа линка, а href — чтобы можно было использовать как обычный линк с автораспознаванием URL (чтобы можно было открывать из девелопера, чтобы URL подчинялся <base /> при наличии последнего и прочие плюшки для URL)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
TeaCSS – очевидный подход к созданию стилей