Шаблонизаторы SASS LESS

[sitecreator]

поставлю на штор там мне как то проще настроить будет, кстати стайлус в шторме дружит с Емитом  ?

 

Дружит почти со всем на свете, что есть в phpstorm-е.

 

А мне вообще хром и опера по кайфу, почему то не люблю я мозилу

 

Хромом как основным не пользуюсь по той причине, что шрифты у него замыленные в windows, свое зрение как-то дорого.

 

И главное, только Лиса умеет дружить с полноценным Firebug-om, дающим нам полноценный CSS-X-Fire.

А знаете что это такое?

 

Это когда изменения делаем прямо в браузере (firebug), а информация в том числе передается в исходный файл в phpstorm-а.  Например, визуально правите padding и наблюдаете в браузере, а phpstorm все это отслеживает и запоминает.  Причем конечные изменения подтверждаете вы сами, без вашего ведома файлы не будут переписаны, вам лишь указывают на изменения, а вам решать подтверждать или нет. Есть подобное и для Хрома, но с определенными ограничениями.

 

кроме того я могу видеть номер строки исходного текста прямо в firebuge-е.

 

Я сам делал дополнение к Firefox-у для этого. (тот, который на странице addons является нерабочим и очень древний, не обновляется ) Для Хрома такого нету.

Можно переключить отображение:

Змінено 11 грудня 2015 користувачем sitecreator

[Einshtein]

Дружит почти со всем на свете, что есть в phpstorm-е.

...

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

Я какое-то время использовал шторм. Но он достаточно тяжеловесный, когда-то юзал дримвивер, но последние пол года-год только notepad+ - легкий, быстрый, функциональный и привычный.

Змінено 11 грудня 2015 користувачем afwollis

[ArtemPitov]

Дружит почти со всем на свете, что есть в phpstorm-е.

...

так для стайлуса есть в пхп штроме плагин для показа кода в консоли Stylus plugin for gulp но правда я пока великоват не разбирался еще могу ошибаться

[sitecreator]

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

 

CSS-X-Fire работает только со Штормом.

 

нечто похожее есть в netbeans. но он со Стилусом не умеет работать.

 

Последний 10-й phpstopm меня огорчил тем, что они изменили рендеринговый механизм шрифтов, и теперь он замыленный!

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

 

покажу пример:

это в 9-ке (четко)Ж

 

 

а это в 10-ке:

уже и шрифты менял в phpstorm. не помогает.

[afwollis]

И главное, только Лиса умеет дружить с полноценным Firebug-om...

а их js-библиотека, которую можно подключить к любому сайту в любом браузере, - не "полноценный firebug"?

или её уже нет?..

...дающим нам полноценный CSS-X-Fire.

А знаете что это такое?

Это когда изменения делаем прямо в браузере (firebug), а информация в том числе передается в исходный файл в phpstorm-а.  Например, визуально правите padding и наблюдаете в браузере, а phpstorm все это отслеживает и запоминает.  Причем конечные изменения подтверждаете вы сами, без вашего ведома файлы не будут переписаны, вам лишь указывают на изменения, а вам решать подтверждать или нет. Есть подобное и для Хрома, но с определенными ограничениями.

на*уя зачем это?

кроме того я могу видеть номер строки исходного текста прямо в firebuge-е.

при использовании того же google.chrome тебе глаза завязывают?

покажу пример:

это в 9-ке (четко)Ж

корявый рваный шрифт.

а это в 10-ке:

хороший более тонкий шрифт со сглаживанием ("true type" такие зовутся, если не ошибаюсь).

[sitecreator]

на*уя зачем это?

 

 

очень странный вопрос... и неожиданный.

 

вы визуально в дримвивере блоки с абсолютным позиционированием передвигали? Или только в коде подставляли значения top и left, а потом смотрели что получится и так много раз подряд?

 

А можно ведь и в браузере блоки передвигать визуально просто стрелочками. Передвигаем не глядя на циферки.  Ставим в нужное место чисто визуально.

 

Если и так непонятно, то это явно не ваше...

 

а их js-библиотека, которую можно подключить к любому сайту в любом браузере, - не "полноценный firebug"?

или её уже нет?..

 

 

вообще то вы ключевое слово в кавычки взяли, а оно как раз ключевое... ну да ладно, видимо, вам без разницы.

Но возможно, что я просто в неведении, да и автор firebug-а вводит в заблуждение людей, а заодно и авторы phpstorm-а. Для чего то делают разные версии того же CSS-X-Fire под разные браузеры (Хром и FF)...

 

при использовании того же google.chrome тебе глаза завязывают?

 

 

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

 

я же четко писал

 

номер строки исходного текста

 

 

покажите, плиз, как в Хроме, просматривая конечный файл в формате CSS и видя строку результирующего "кода" CSS, узнать в какой строке нужно править исходный код в *.styl?  причем, без файла map.

 

Вы имеете ввиду работу с FireBug Lite?

 

С препроцессорами работаете?

 

Стилус может генерировать map файл, но как то  весьма неточно. Map -файл современные браузеры умеют видеть. Но мне не удалось получить map без ошибок, возможно что безошибочно он генерируется если использовать вариант без использования фигурных скобок. Но Стилус умеет и по другому ссылаться на источник, так как это делает, например, компилятор SCSS без map-файла. Причем в этом случае все четко и без ошибок работает.

Вы сами то каким способом пользуетесь?

 

хороший более тонкий шрифт со сглаживанием ("true type" такие зовутся, если не ошибаюсь).

 

 

дело не в шрифтах. true type и на windows XP был, и отлично сглаживался. Без всякого замыливания.

Нету проблем со шрифтами  на Linux (Ubuntu и т. д. и т. п.), потому вам вряд ли почувствовать эту проблему.

 

 

[afwollis]

...в дримвивере...

понятно...

... блоки с абсолютным позиционированием передвигали? Или только в коде подставляли значения top и left, а потом смотрели что получится и так много раз подряд?

по-моему - если "двигаешь много раз подряд" - ты либо не знаешь, чего хочешь (или не определился), либо не знаешь, как это делается.

вообще то вы ключевое слово в кавычки взяли, а оно как раз ключевое... ну да ладно, видимо, вам без разницы.

Но возможно, что я просто в неведении, да и автор firebug-а вводит в заблуждение людей, а заодно и авторы phpstorm-а. Для чего то делают разные версии того же CSS-X-Fire под разные браузеры (Хром и FF)...

вообще-то там у меня вопрос, а не утверждение.

firebug я не смотрел со времен перехода на google-chrome.

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

покажите, плиз, как в Хроме, просматривая конечный файл в формате CSS и видя строку результирующего "кода" CSS, узнать в какой строке нужно править исходный код в *.styl?  причем, без файла map.

эмм... мышь.rightClick -> "просмотр кода элемента"

дело не в шрифтах. true type и на windows XP был, и отлично сглаживался. Без всякого замыливания.

Нету проблем со шрифтами  на Linux (Ubuntu и т. д. и т. п.), потому вам вряд ли почувствовать эту проблему.

ну, хз.

своё мнение по поводу "шрифтов на двух скриншотах" я озвучил.

если оно не совпадает с чьим-либо - ну и ладно. все фломастеры разные.

[sitecreator]

по-моему - если "двигаешь много раз подряд" - ты либо не знаешь, чего хочешь (или не определился), либо не знаешь, как это делается.

 

 

Я вам пример привел лишь для наглядности.

 

Да, и для меня очень часто верстка - это не верстка по готовому макету, а именно творческий процесс, когда я сам создаю дизайн.

 

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

 

 

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

 

 

firebug я не смотрел со времен перехода на google-chrome.

 

 

Полноценный есть только для FF.  Для всех остальных есть Lite версия, но она меня не устраивает, не хватает многих возможностей.

 

эмм... мышь.rightClick -> "просмотр кода элемента"

 

 

 

Так мы же совершенно про разные вещи говорим...

Какое отношение этот код элемента имеет к коду "языка более высокого уровня"? Чтобы сделать изменения, я же не в CSS буду правки делать, а в исходном коде *.styl.  Поэтому мне и нужно знать где править именно в исходном коде, а именно номер строки в исходном коде.

 

Я не вижу в вашем примере чтобы Хром показал мне место именно в файле style.styl, поскольку Хром и знать не знает, что такой файл существовал.  А может исходник вообще был на SCSS?

 

своё мнение по поводу "шрифтов на двух скриншотах" я озвучил.

 

 

Мне нравится и вполне устраивают шрифты и их отображение в Ubuntu и на Мак-е. Но я не могу добиться такой же четкости на Windows последних версий потому, что тамошние разработчики в один момент решили, что они лучше знают как должны выглядеть шрифты на моем мониторе. Если раньше действительно было сглаживание, то теперь мыло.  Поэтому и приходится костыли использовать. Уж лучше такой "рубленый" шрифт чем мыло, с которым вообще невозможно работать.

 

 

[afwollis]

Так мы же совершенно про разные вещи говорим...

возможно, ибо вот это

...я же не в CSS буду правки делать, а в исходном коде *.styl.

вызывает у меня лишь один вопрос - "WTF???".

[Гість]

И фотошоп и верстка, и программирование, печаль ...

[sitecreator]

возможно, ибо вот это

вызывает у меня лишь один вопрос - "WTF???".

 

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

 

WTF - относится к "зачем делать правки в коде styl"  или вы "зачем вообще использовать stylus"?

У вас очень категорично лаконичные ответы, но мало несущие информации для собеседника.

Вы пытаетесь представить дело так, что вот вы точно знаете как нужно, а другие фигней страдают?

 

Вы лично сами используете препроцессоры?

[sitecreator]

И фотошоп и верстка, и программирование, печаль ...

 

Что вас смутило в "фотошоп и верстка", что привело в печальное расположение?

[AlexFisher]

Фотошоп - то макетирование. И текущая пилорама. Предпочитаю в векторе все затевать, типа корела или люстры, а затем через шоп делать красиво. А верстается оно все-таки отак - [голова][меню][колонки][контент][колонки][контент][футер]

И делается это все максимум на бумажке. А у крутых ассов - в уме =)

Затем в любом блокноте, да.

[ArtemPitov]

Фотошоп - то макетирование. И текущая пилорама. Предпочитаю в векторе все затевать, типа корела или люстры, а затем через шоп делать красиво. А верстается оно все-таки отак - [голова][меню][колонки][контент][колонки][контент][футер]

И делается это все максимум на бумажке. А у крутых ассов - в уме =)

Затем в любом блокноте, да.

Поддерживаю, а то сначала на играйся с макетом и еще верстай, накидал на бумажке или в голове (но так реально в 2-3 раза дольше и много примерок) и вуаля 

[Dotrox]

возможно, ибо вот это

вызывает у меня лишь один вопрос - "WTF???".

Значит, вы никогда не работали с препроцессорами. При работе с ними правки вносятся не в CSS, а в файл кода для препроцессора, который затем компилируется в CSS.

Соответственно, когда браузер показывает номер строки только в скомпилированном CSS толку от этого мало.

[sitecreator]

о, диванные теоретики доказывают что жизни на марсе в стилусе нет

 

о, и вы это тоже заметили? :-)

[ArtemPitov]

Попробовал я Стайлус, нет слов одни эмоции, это же просто ах***о ! :eek:

а о библиотеки nib просто сказка ! 

Змінено 26 грудня 2015 користувачем ArtenPitov

[rb2]

http://livestyle.emmet.io/

Для тех, кому "в хроме такого нет"

[Tom]

Жаль что это только для Sublime Text, как то не разобрался в нём с наскока.Хотя сам Emmet в нотпаде юзаю давно.Кстати есть видео вполне адекватное,для тех кому интересна эта тема.

 

[ArtemPitov]

Жаль что это только для Sublime Text, как то не разобрался в нём с наскока.Хотя сам Emmet в нотпаде юзаю давно.Кстати есть видео вполне адекватное,для тех кому интересна эта тема.

 

познавательно, спасибо 

[sitecreator]

Попробовал я Стайлус, нет слов одни эмоции, это же просто ах***о ! :eek:

а о библиотеки nib просто сказка ! 

 

Замечательно, что вам понравилось.

А если еще и привыкните писать без всяких скобок { } и ";" и ":", то код писать еще быстрее получится.

 

nib - это обязательная штука.  И что удобно, так это можно ее править под себя при необходимости.

Я, например, для генерации градиентов для древних ie вроде IE9 (с меньшими не работаю) добавил свою вставочку.  Замечу, что полноценные (точнее - никакие не умеет) градиенты ie9 делать не умеет, тем более если у объекта заливки закругленные края.

[sitecreator]

http://livestyle.emmet.io/

Для тех, кому "в хроме такого нет"

 

кто-то говорил, что нет такого?

тот же phpstorm давно внедрил именно для Хрома Liveedit, когда любая правка в HTML или CSS в редакторе отображается в реальном времени в браузере.

И обратный механизм также есть для Хрома, работает через firebug Lite.

Меня не устроил именно облегченный вариант Lite, поэтому и пользуюсь FireFox-ом.

 

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

 

Правда, здесь чуть раньше вообще задавались вопросом для чего ("WTF") все это живое редактирование.

Змінено 27 грудня 2015 користувачем sitecreator

[sitecreator]

И кстати, в реальной жизни не так все просто если файл CSS большой.

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

 

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

 

Даю пример:

 

исходник:

.style bordrer : 1px solid #777;
.......
.........
.style border-top: none;

а в браузере мы решили править

.style border-top: 1px solid red;

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

[sitecreator]

Жаль что это только для Sublime Text, как то не разобрался в нём с наскока.Хотя сам Emmet в нотпаде юзаю давно.Кстати есть видео вполне адекватное,для тех кому интересна эта тема.

 

 

Соглашусь в первую очередь с утверждением, что "ускорение работы в Фотошоп при верстке - это отказ от Фотошоп".

Давно уже следую этому принципу.

 

Например, векторные (и др.) возможности современных браузеров делают бессмысленными некоторые этапы вроде рисования кнопок в Фотошопе.

 

В остальном, ничего нового именно для себя не услышал.

Для начинающих "ускорение" все в основном по делу сказано. Хоть есть и сомнительные утверждения местами.

Змінено 27 грудня 2015 користувачем sitecreator

[ArtemPitov]

Замечательно, что вам понравилось.

А если еще и привыкните писать без всяких скобок { } и ";" и ":", то код писать еще быстрее получится.

 

nib - это обязательная штука.  И что удобно, так это можно ее править под себя при необходимости.

Я, например, для генерации градиентов для древних ie вроде IE9 (с меньшими не работаю) добавил свою вставочку.  Замечу, что полноценные (точнее - никакие не умеет) градиенты ie9 делать не умеет, тем более если у объекта заливки закругленные края.

Я сразу начал  без кавычек и прочего не нужного в Stylus, для IE есть две фичи интересные одна от яндекса http://habrahabr.ru/company/yandex/blog/169415/ правда еще не совсем понял как подключать, и для гридиентов на гитхабе есть интересные миксины для генерацией png для ie

 

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