Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   Препроцессор Stylus (https://javascript.ru/forum/offtopic/37192-preprocessor-stylus.html)

megaupload 10.04.2013 21:48

Препроцессор Stylus
 
И как это понимать вообще?


kobezzza 10.04.2013 21:53

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

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

.cont {
  border-radius: 10px;
}


или так:
border-radius(val) {
  border-radius: operate('/', val, 3);
}

.cont {
  border-radius: 10px;
}

megaupload 10.04.2013 21:57

уже понял)

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


kobezzza 10.04.2013 22:04

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

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 на помойку :)

megaupload 10.04.2013 22:14

Цитата:

Сообщение от kobezzza
можно писать простые функции

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

kobezzza 10.04.2013 22:19

Цитата:

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

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

megaupload 10.04.2013 22:57

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

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


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

kobezzza 10.04.2013 23:08

Цитата:

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

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

Цитата:

Сообщение от megaupload (Сообщение 245399)
кстати ты уже понял чо я хочу сделать? как это делается тут?

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

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

megaupload 10.04.2013 23:24

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

megaupload 10.04.2013 23:25

Цитата:

Сообщение от kobezzza
или ты спрашивал, как узнать, что справа от вызова функции? current-property[0]

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

типа пишем

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

   trololo
}


.container {
  background: ololo();
}



а получаем

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


Часовой пояс GMT +3, время: 09:47.