Препроцессор Stylus
 

И как это понимать вообще?

Читай доку внимательней.

border-radius(val) {
  border-radius: (val / 3);
}

.cont {
  border-radius: 10px;
}

или так:

border-radius(val) {
  border-radius: operate('/', val, 3);
}

.cont {
  border-radius: 10px;
}

уже понял)

Да простит мою рукожопость аллах...

Кстати, обрати внимание, что помимо миксинов можно писать простые функции, например:

border-radius(val) {
  a = 0;
  for key in val {
    a += key;
  }
  
  return a;
}

.cont {
  border: border-radius(10 1 2);
}

А циклы на первый взгляд могут показаться избыточными, но на самом деле это мега удобно, пример из реального проекта:

.i-block {
	/**
	 * Стандартные размеры: xxs, xs, s, m, l, xl, xxl
	 *
	 * @mod
	 */
	&_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;
			}
		}
	}
}

В общем я когда попробывал Stylus, то выкинул LESS и SCSS на помойку :)

я бы кончил если бы они на клиенте еще и перепросчитывались при изменениях dom ))

Я бы тоже, но увы:)

но я могу это сделать так то)
отслеживать дом мутейшен, и.т.п. но не слишком ли это накладно будет?

надо как то отслеживать применяемые правила к элементам и событие измененимя правила применения и.т.п. но этого нет....


кстати ты уже понял чо я хочу сделать? как это делается тут?

Хрен его знает, попробуй:)

Ну да arguments можно юзать, бегать по нему в цикле тоже можно.
А почему ты не хочешь заюзать http://visionmedia.github.io/nib/ там же уже полифилы почти на всё есть: градиенты (причём даже есть возможно генерации статичной картинки), флекбоксы и т.д.

PS: или ты спрашивал, как узнать, что справа от вызова функции? current-property[0]
http://learnboost.github.io/stylus/docs/bifs.html, искать add-property

kobezzza,
блин чувак ты для меня седня открыл новый мир) спасибо

а как обратиться к this, функция вызывается и возвращает то что подставится в свойство, как обратиться к тому К ЧЕМУ ПРИНАДЖЕЖИТ это свойство)? то есть сделать не функцию а процедуру. я думаю никак?

типа пишем

ololo(){
   $this{
     qq : 11px
   }

   trololo
}


.container {
  background: ololo();
}

а получаем

.container {
  background: trololo;
  qq        : 11px;
}

Чёт я не понял, напиши что хочешь получить в итоге.

UPD: писал же http://learnboost.github.io/stylus/docs/bifs.html - и смотришь функцию add-property

something(n) {
   add-property(current-property[0], s('-webkit-something(%s)', n));
   add-property(current-property[0], s('-moz-something(%s)', n));
   s('something(%s)', n);
}

body {
  foo: something(15px);
}

Нез)

Обьясни нубу как nib устанавливать?

https://github.com/visionmedia/nib
Тут подробно описано.

У себя в проекте я подключаю так:

var nib = require('nib'),
     stylus = require('stylus');

stylus('Текст нашего styl файла')
	.include(nib.path)
	.render(function (err, css) {
            // Тут я делаю дополнительные обработки, css - это результат обработки
        });

ну и в .styl (хотя можно и в JS .import('nib'))

@import 'nib';

ЗЫ: ты кстати проникся директивой @extend ?)

КУДА черт возьми ты прописываешь этот код? Мой проект ВООБЩЕ не на node.


я использую ватчеры которые перекомпи.. ну ты понял

В скрипт сборки проекта конечно. На чём проект не важно, а важно то, что транслятор Stylus на node. Тебе нужно написать скриптик настройку и написать для него cmd, чтобы повесит вотчер. К сожалению больше сказать не могу, т.к. у меня трансляция идёт на этапе сборке проекта с помощью своего скриптика, а не вотчеров в шторме.

UPD: а собственно чего мы тупим, тупо скопируй ниб к себе в проекте и повесь на него импорт (stylus же поддерживает импорты) в .styl и всё.
https://github.com/visionmedia/nib/tree/master/lib/nib

жесть какая.... я то думал этот модуль взаимодействует с модулем stylus добавляя в него новые функции..... а тут бред какой-то... файлы какие-то создавать.. херня полная.

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

Это библиотека, написанная на языке Stylus, никто не мешает тебе просто взять файлы styl и подключить их. Но у stylus есть JS API, которое реализует интерфейс модулей и подключить можно через него (как я например делаю).

Догадаться, ты же программист :)

Кароч сделай тупо импорт нужных тебе файлов в проект и всё и не парься.

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

Просто у меня сборка проекта это куча всего, поэтому мне удобней через JS, нез:)

а, и вопрос, градиенты base64 он не будет генерить без js api как я понял?

О вот это хз, я если честно не пользуюсь этой функций. Для работы этой фичи нужен модуль node-canvas, по идеи тебе нужно просто сделать npm install и всё, но я точно хз.

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

Угу, к сожалению пока вотчеры в шторме уж очень узконаправленные. Напиши хотелку в джет бреинс)
Ну а вообще ты можешь повесить слушатель на файловую систему тупо через туже ноду :)
http://nodejs.org/api/fs.html#fs_fs_...tions_listener

PS: но сам стилус поддерживает импорты, т.е. если ты напишеш @import, то он сам сходит рекурсивно по урлу и скомпилит всё, что нужно.

А что если запускать вачтер с волшебным параметром)?
и вот внизу импорт есть

У меня вопрос, почему стилус ДО СИХ ПОР не популярнее сраных sccs less и прочей херни???

kobezzza,
блин чувак, ну ты сделал мой день) ложусь с мыслью что завтра ох заживуууу..

Что то я совсем забыл про консольное АПИ, под вечер бошка перестала варить, ну да - это самый логичный вариант.

Стилус ещё прост молодой совсем, а тот же SCSS появился ещё в 2006. Но уже во многих круныйх проектах, вроде Яндекс.Почты, юзают именно его (Stylus).

stylus ??????

?)

кстати баг нашел

пишу

@import "nib";

.container {
  background    : linear-gradient(left, red, blue, red);
}

превращается в

.container {
    background: -webkit-linear-gradient(left, #f00 0%, #00f 33.33333333333333%, #f00 100%);
    background: -moz-linear-gradient(left, #f00 0%, #00f 33.33333333333333%, #f00 100%);
    background: -o-linear-gradient(left, #f00 0%, #00f 33.33333333333333%, #f00 100%);
    background: -ms-linear-gradient(left, #f00 0%, #00f 33.33333333333333%, #f00 100%);
    background: linear-gradient(left, #f00 0%, #00f 33.33333333333333%, #f00 100%);
}

вопрос, какие нахер 33.33333333333333% ????

1) позиций вообще не должно быть где они не указаны
2) если уж и ставить то должно получаться 50% а не 33%


научи меня как мне отправить ему свою версию исправления этого бага?

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

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

Ну а вобще: ты можешь к репозитарию написать вопрос: issues (на гитхабе) и там описать багу и сказать, что ты её например решил и дать ссылку на форк.

Я могу продолжить разработку сам??? И елси люди зайдут в мою версию этой либы то у меня будет своя MASTER ветка а у того чувака в его репозитории будет ЕГО мастер ветка и они будут разные?
или у меня будет ПОКАЗЫВАТЬСЯ что это не настоящий репозиторий а лишь ветка вот от такого то, и будет ссылка на настоящий мастер репозиторий?

какой вариант?

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

Пример из жизни: недавно гугл перестали развивать проект WebKit, а сделали форк от него - Blink и в новых версиях хрома теперь будет он, таким образом теперь только Apple развивает проект WebKit.

kobezzza,
выручай, как сделать это?


в доках видал где то но просрал и найти не могу....

@width

PS: если ты юзаешь Nib, то для позиционирования можно юзать синтаксис:

absolute: top 10px left 20px;

Обнаружил, что в Nib нет полифила для calc, написал сам, если нужен:

/**
 * Заменить подстроку в строке на другую
 *
 * @param {string} expr - исходная строка
 * @param {string} str - заменяемая подстрока
 * @param {string} val - новая подстрока
 * @return {string}
 */
replace(expr, str, val) {
	expr = clone(expr);
	for e, i in expr {
		if str == e {
			expr[i] = val;
		}
	}

	return expr;
}

/**
 * Кроссбраузерный calc
 *
 * @param {string} attr - значение
 */
calc(attr) {
	add-property(current-property[0], replace(current-property[1], '__CALL__', s('-webkit-calc(%s)', attr)));
	s('calc(%s)', attr);
}

С использованием есть нюанс, чтобы выражения внутри calc Stylus не высчитывал, то нужно экранировать операторы, например:

.a {
  width: calc(100% \- 10px);
}

Охренеть)!!!!! Спасибо! И раз уж ты тут!

есть ли там функция делающая цвет прозрачным?

например transparent(red, 40%) ну чо то типа того чтобы rgba не писать

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

п.с. мне показалось или ты только -webkit-calc делаешь?

Для работы со цветом есть целая куча встроенных функций, то, что тебе нужно - это функция rgba, у неё есть перегрузки позволяющие писать так:

rgba(red, 0.1);

или так

rgba(#F00, 0.1);

ну и конечно встроенный синтаксис также поддерживается:

rgba(255, 0, 0, 0.1);

Им можно таск создать, т.к. моя реализация имхо не полная, т.к. рассчитана на современные браузеры, а для старого ишака например можно юзать expression в CSS. Кстати, Nib делают ребята из Яндекса вроде как.

Я делаю calc (ФФ, ИЕ) и -webkit-calc (сафари и хром). В опере вроде нет поддержки пока, но в 14 будет, т.к. она будет на двигле хрома.

Есть 3 части, логика , структура и оформление.
Уже становится понятно что простой декларации в оформлении становится недостаточно, и приходится логику оформления пихать в явскрипт.

что если добавить нативную (динамическую) поддержку

<style type='styler/stylesheet' src='/main.styl'></style>

и свойства можно будет писать вообще так

width: 100% - 10px;

НУ ПОЧЕМУ ОНИ так не сделают а....... НУ ПОЧЕМУ ОНИ ХОТЯТ ПЛОХО!!1111

Они могут сделать, но если не будет единого стандарта, то не факт, что в других браузерах это сделают и сделают также, ну а w3c тормозит как обычно, поэтому Mozilla и Google придумали решение этой проблемы: Mozilla сделали низкоуровневый диалект JS с типами данных и ручной сборкой мусора, который именуется asm.js - по скорости эта штука уже всего в 2 раза медленнее аналогичного С++ кода и в релиз уйдёт уже через пару месяцев, а ну Гугл предложили NACL.

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