Тема посвященная stylus
 

Я спросил то, о чем многие хотели спросить, но молчали.

https://github.com/LearnBoost/stylus/issues/1329

Никто об этом не хотел спрашивать и это известно давно!

http://habrahabr.ru/company/yandex/blog/169415/

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

Открою тайну: Stylus пишет чувак, который работает в Яндексе :D, также как и Nib.

По ссылке: что именно нового ты сказал? это простой миксин. Rest интерфейса для псевдоэлементов и псевдоселекторов у них нет :(

kobezzza, ясно, удалите тему, заголовок вас путает, кто модеры есть переименуйте тему в "стайлус"

тему можно удалять

тогда это фитчареквест

Мега тупой вопрос, но как подключить стилус на клиенте не могу найти у них в репозитории

а разве он так может?

ну если я правильно понял то
Кстати в ангуляре ng-click обрабатывается через делегирование?

http://learnboost.github.io/stylus/try.html
Смотришь как сделано здесь

kobezzza, я не могу у них в репозитории найти stylus.min.js, хочу найти не сжатый файл

>> Vendor prefixing it is task for another tool (use autoprefixer for example).

я >> No, not true, stylus, too, need to do this. And do not just ignore this matter, cuz it is difficult to make feature that I asked..... ALL preprocessors is both autoprefixers


ВОТ ЧО ОН МОРОЗИТСЯ А!!! Мне еще и это говно форкать надо будет и переделывать? Мало мне ангуляра???

форкни его полностью))
Есть модуль для префиксов.

Тут другое, тут именно синтаксис, наддо иметь доступ к селектору из которого вызванна функция.

Используй
http://www.myth.io/

PS: вместо тысячи слов, которые ты там написал достаточно было сказать: нужна возможно перегрузки селекторов, для написания полифилов, также как это уже сделано с миксинами.

не ужели ни кто не знает что где можно его скачать?
ладно фиг с ним пошел искать другой препроцессор.

Префиксы это задачи отдельного инструмента типа nib

Ну или юзать Styl

Можно и самому за час накидал эти миксины:

// -*- coding: utf-8 indent-tabs-mode: nil tab-width: 4 c-basic-offset: 4 -*-

// ::selection
/*
+selection((moz webkit)) {
	color red
}
*/
selection(vendors)
	for vendor in vendors
		input::-{vendor}-selection
			{block}

	input::selection
		{block}


vendor-property(property, value, vendors)
	for vendor in vendors
		-{vendor}-{property} value

	{property} value


// transform
transform(value...)
	vendor-property('transform', value, (webkit moz o ms))

transform-origin(value...)
	vendor-property('transform-origin', value, (webkit moz o ms))

transform-style(value...)
	vendor-property('transform-style', value, (webkit moz))


// transition
transition(value...)
	vendor-property('transition', value, (webkit moz o))

transition-delay(value...)
	vendor-property('transition-delay', value, (webkit moz o))

transition-duration(value...)
	vendor-property('transition-duration', value, (webkit moz o))

transition-property(value...)
	vendor-property('transition-property', value, (webkit moz o))

transition-timing-function(value...)
	vendor-property('transition-timing-function', value, (webkit moz o))


// animation
animation-name(value...)
	vendor-property('animation-name', value, (webkit moz o ms))

animation-duration(value...)
	vendor-property('animation-duration', value, (webkit moz o ms))

animation-timing-function(value...)
	vendor-property('animation-timing-function', value, (webkit moz o ms))

animation-delay(value...)
	vendor-property('animation-delay', value, (webkit moz o ms))

animation-iteration-count(value...)
	vendor-property('animation-iteration-count', value, (webkit moz o ms))

animation-fill-mode(value...)
	vendor-property('animation-fill-mode', value, (webkit moz o ms))

animation-direction(value...)
	vendor-property('animation-direction', value, (webkit moz o ms))

animation-play-state(value...)
	vendor-property('animation-play-state', value, (webkit moz o ms))


// perspective
perspective(value...)
	vendor('perspective', value, (webkit moz))

perspective-origin(value...)
	vendor('perspective-origin', value, (webkit moz))


backface-visibility(value...)
	vendor('backface-visibility', value, (webkit moz))


background-size(value...)
	vendor-property('background-size', value, (webkit moz o))

// border
border-radius(value...)
	vendor-property('border-radius', value, (webkit moz))

border-bottom-left-radius(value...)
	vendor-property('border-bottom-left-radius', value, (webkit moz))

border-bottom-right-radius(value...)
	vendor-property('border-bottom-right-radius', value, (webkit moz))

border-top-left-radius(value...)
	vendor-property('border-top-left-radius', value, (webkit moz))

border-top-right-radius(value...)
	vendor-property('border-top-right-radius', value, (webkit moz))


// box
box-sizing(value...)
	vendor-property('box-sizing', value, (webkit moz))

box-shadow(value...)
	vendor-property('box-shadow', value, (webkit moz))


user-select(value...)
	vendor-property('user-select', value, (webkit moz ms))


text-shadow(value...)
	text-shadow value


text-overflow(value...)
	vendor-property('text-overflow', value, (o))


font-smoothing(value...)
	vendor-property('font-smoothing', value, (webkit))


appearance(value...)
	vendor-property('appearance', value, (webkit moz))


opacity(opacity)
	-ms-filter 'progid:DXImageTransform.Microsoft.Alpha(%d)' % (opacity * 100)
	opacity     opacity


gradient-to-top(value, multiple = 'none')
	background-image: -webkit-linear-gradient(bottom, split-value(value)), unquote(multiple)
	background-image: -moz-linear-gradient(bottom, split-value(value)), unquote(multiple)
	background-image: -o-linear-gradient(bottom, split-value(value)), unquote(multiple)
	background-image: -ms-linear-gradient(bottom, split-value(value)), unquote(multiple)
	background-image: linear-gradient(to top, split-value(value)), unquote(multiple)


gradient-to-bottom(value, multiple = 'none')
	background-image: -webkit-linear-gradient(top, split-value(value)), unquote(multiple)
	background-image: -moz-linear-gradient(top, split-value(value)), unquote(multiple)
	background-image: -o-linear-gradient(top, split-value(value)), unquote(multiple)
	background-image: -ms-linear-gradient(top, split-value(value)), unquote(multiple)
	background-image: linear-gradient(to bottom, split-value(value)), unquote(multiple)


gradient-top-bottom-rgba(start, end)
	background-color: end
	background-image: -webkit-gradient(linear, left top, left bottom, from(start), to(end))
	background-image: -webkit-linear-gradient(top, start, end)
	background-image:    -moz-linear-gradient(top, start, end)
	background-image:     -ms-linear-gradient(top, start, end)
	background-image:      -o-linear-gradient(top, start, end)
	background-image:         linear-gradient(to bottom, start, end)


gradient-top-bottom-rgba-without-bg(start, end)
	background-image: -webkit-gradient(linear, left top, left bottom, from(start), to(end))
	background-image: -webkit-linear-gradient(top, start, end)
	background-image:    -moz-linear-gradient(top, start, end)
	background-image:     -ms-linear-gradient(top, start, end)
	background-image:      -o-linear-gradient(top, start, end)
	background-image:         linear-gradient(to bottom, start, end)


gradient-top-bottom(start, end)
	gradient-top-bottom-rgba(start, end)
	-ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=%s, endColorstr=%s)' % (start end)

Ну как, клонишь репозитарий и собираешь код. Для сборки модулей ноды под браузер есть либы.

чет новенькое, пошел гуглить, спасибо :thanks:

А это где-то заявлено? ;)

PS: затея безумная

я думал если файл подключен на сайте то по сути он и в репозитории должен быть -я ошибся :)

сенк, попробую когда на линукс переключусь :)

Радуйся максимус:)

http://javascript.ru/forum/offtopic/...tml#post288868

он сам говорит об этом на видео http://video.yandex.ru/users/ya-even...events&cid=135

говно здесь только ты :) Кроме того я же говорил, что ui - это просто переименованный форк ангуляра

эээ.. в смысле?

ну там в директиве типа

element.bind('click',function(){
    scope.$eval(attrs['ngClick'])(); // наша функция
    scope.$digest();
})

лол, чо у него баттхерд то такой))

https://github.com/LearnBoost/stylus/issues/1329

руки из жопы так пусть и скажет

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

ДА ТЫ БЛИН ГЕНИЙ)!!! СПАСИБО)

бля, да там все русские)

Пасоны, а что если стайлусу дать такой мощный синтаксис чтобы можно было писать полифилы?

к примеру я добавил элементу арибут ng-click, клик поэтому элементу обрабатывается через всплытие, они же не навешивают обработчик на каждый элемент?

я им наводку дал)) он говорит что думает над синтексом а я в этом бятька))

помогу уж ребятам так и быть:





cyber,

вешают, click это директива и она применяется к каждому элементу на котором обьявлена. А почему бы им собственно не вешать?

великий создатель ui учит ребят уму разуму)



https://github.com/visionmedia/styl/issues/29

ну по сути если много деректив то вешать на каждую отдельно будет достаточно накладно, или я ошибаюсь ?
Они получают колекцию всех элементов с атрибутом ng-click и вешают на них обработчики?

представляю через неделю статью на хабре " у разработчика stylus нервный срыв, разработка временно преостановлена" :)

ошибаешься) это мелочи) и 500 киллобайт не наберется


Ебать они непробиваемые

А почему ты создал issue в Styl, а не в Stylus ? Или ты и там теперь тоже буянишь:)

Ну у них не только ngClick, и все атрибуты они переберают??

не будь кросс-темным какальщиком. Задавай вопросы в правильных местах :)

nerv_, я из за максимуса в ту тему не захожу:)

Просто это делать сложно и мутно, ведь селектор может быть очень сложным, а проверять его по рег экспу будет оч накладно, тем более Stylus и так не блещет скоростью.

Вот вполне частый кейз селектора

.foo {
  &_bar{a + 1}, .next {
     &:hover {
         ...
     }
  }
}

Не знаю как ты, а я вложенные селекторы с родительской ссылкой (&) юзаю постоянно.
Вот реальный пример из проекта:

.i-block {
	&_size {
		for el in (xxs 0.6) (xs 0.8) (s 0.9) (m 1) (l 1.2) (xl 1.4) (xxl 1.8) {
			&_{el[0]} {
				font-size: el[1]rem;
			}
		}
	}
}

Вот и получается, что сделать что ты хочешь конечно было бы круто, но это реально мутно и данная фича на самом деле нужна только для префиксов и уже существует rework (кстати тоже от создателя Stylus) и основанные на нём myth и styl в которых проблема решена, т.е. предлагается юзать Stylus + что-то.

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

PS: кстати они не договаривают, что для @keyframes полифил зашит в сам Stylus (и даже есть служебная глобальная переменная vendors), хотя по их же словам это не правильно :)
http://learnboost.github.io/stylus/docs/keyframes.html