Pull to refresh

Comments 28

Как-то неудобно видеть смесь JavaScript и CSS в одном файле, но пример с полосками (идеей такого подхода) весьма интересен.
По скорости не скажете, как быстро он обрабатывает 1,10,100… Кб *.tea файла (в общем, и, возможно, чуть конкретнее, какие конструкции более тормозят)?
сам парсинг дешевый
скорость выполнения 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
все пихать в одну статью — накладно

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

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

так проект ваш, как я понял? а почему не open source не хотите сделать?
почему же )) я в следующих статьях напишу еще про «зеленую траву»
кусочек травы я оторвал уже в этой статье

просто если пытаться сводить какие-то универсальные системы к чему-то одному, что всегда выходит что-то вроде «вот главный принцип, задумайтесь, какие возможности это открывает»

это как спросить «зачем нужна кибернетика» — и вряд ли создатель скажет, что она была нужна, чтоб вы могли писать сообщения по 140 символов в твиттер )

так и тут, по сути все множество яваскрипт решений теперь доступно дизайнерам (под тонкой оберткой)
один пример я привел, приведу еще

поэтому, надеюсь, что я еще вас не потерял )

проект выложен на гитхабе
куда уж опенсорснее?
github.com/boomyjee/teacss
С teacss вы можете сделать графику параметрической тоже

не сочтите за рекламу, но может кому интересно будет, в тему данного поста.
tenphi.github.com/jcss/
хотя тут конечно без поддержки работы с цветами, там для этого отдельный плагин надо ставить.
У меня тоже есть подобная библиотечка, которая реализована в разы проще и немного функциональней (поддержка минификации цветов, rgb -> hex -> short hex).
да, я примерно с этого и начинал
отказался от подходя из-за нечитаемости JS — у него все-таки не декларативная природа, отсутствия обратной совместимости c СSS
ну а так было интересно с вами пообщаться на тему, для каких задач писали вы свой код
ну а так было интересно с вами пообщаться на тему, для каких задач писали вы свой код

Мне это нужно было для динамической генерации CSS.

Изначально реализация была только на Python, потом сделал версии для JS/CS, на случай что придется генерировать CSS на клиенте (но потом поменяли архитектуру приложения и от этой затеи отказались, хотя генерация CSS на клиенте была довольно шустрая, во всяком случае быстрей чем запрашивать файл с сервера).

Что касается формата, то это был не случайный выбор, т.к. синтаксис CSS схож с пиновским словарем ничего парсить не потребовалось (родной формат, простой обход свойст объекта).
У меня стояла задача сгенерировать CSS код (нужно было отдавать клиенту архив проекта, в котором находился CSS файл с уникальными стилями).
Самый простой способ это сделать — представить 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 — что мешает добавить то же самое, но кроссбраузерно?
> И страничка поедет с NoScript.
Что куда поедет — JS-парсер только для разработки, для продакшена используется серверсайд генерация.
Сгенерируйте мне на серверсайде такой код:
div {
 width: @window.innerWidth - 10;
}
ну вот так и пишете, как написали )
ну почти
div {
    width: @{$("#other_element").width() - 10}px;
}


просто в вашем примере вы хотите того, что не умеет в итоге сам CSS (т.е. хотите императивного подхода)
и по сути, хотите вещей неправильных (хотя их тоже можно делать на TeaCSS)
то, что вы написали, делается padding-ом

приведите живой случай или может списаться в личке и я попробую понять, чего вам не хватает и как это можно сделать

а teacss все-таки не совсем serverside, он просто не для продакшена, но по время разработки работает в браузере, поэтому фишки вроде вашей возможны
Ниже уже ответили, все и так кроссбраузерно. Это не решение для продакшена.
Лишаетесь — это не значит «не можете использовать», это значит что эти сущности отсутствуют как базовые в JS. Там нельзя переопределять операторы, а по факту запросить width любого дива и его использовать, переводить проценты в пиксели и так далее вы можете.

Тут, правда, напрашивается картинка с буханкой-троллейбусом.
1. Пример про генерацию картинок совсем не понравился, в то время как все пытаются «представление» и «контроллер» разъединить для написания более понятного кода, teacss наоборот объединяет и ещё как пример выставляет. Да ещё и даёт множество возможностей «выстрелить себе в ногу».
2. Не вижу преимуществ по сравнению с SASS, не мог бы автор расписать поподробнее.
1. не совсем уловил, где teacss объединяет эти сущности, наоборот, пытается разделись
картинки — часть представления, логично их смешать с CSS, а не открывать каждый раз фотошоп, чтоб увеличить ручками размер или цветовую гамму шапки
2. давайте так, я просто не очень пока понимаю, что будет преимуществом именно для вас
поэтому я готов попробовать рассказать вам больше (в формате диалога), а потом добавить суть диалога, если она там будет, в статью
1. По сути тут происходит генерация картинки, в моём понимании «представление» генерировать картинки не должно в принципе, оно отображает готовые данные. CSS описывает как документ будет выглядеть и создавать контент для отображения лучше на серверной стороне (ни в коем случае не забывайте о пользователях нетбуков и смартфонов, количество которых растёт всё больше и больше).
2. ок, я тогда подумаю как более ёмко изложить и спишемся
1. речь о картинках оформления (бордюры, фоны, шапки) и т.п., т.е. частях шаблона
к картинкам, которые часть контента — это не относится
2. конечно, всегда рад буду ответить
Как для меня, так плюс пред SASS в том, что можно сгенерировать css файл не устанавливая руби и еще каких дополнительных вещей, обязательно попробую teacss в следующем своем проекте :)
Мне понравилось. Только я бы предпочёл иметь линк на стиль в стандартом формате,
вместо что-нибудь такое, например:
<link rel="stylesheet" type="text/teacss" href="style.tea" />

rel — по желанию, type — как маркер типа линка, а href — чтобы можно было использовать как обычный линк с автораспознаванием URL (чтобы можно было открывать из девелопера, чтобы URL подчинялся <base /> при наличии последнего и прочие плюшки для URL)
Only those users with full accounts are able to leave comments. Log in, please.