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

[kabantejay]

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

насчет scss и less - хорошая вещь, так же советую почитать про псевдо-пост-процессор, PostCss. сам не пробовал, но судя по написанному, фичам и скорости работы в недалеком будущем он будет убийцей less и scss. так же хочется процитировать Марка Отто - создателя bootstrap:

Oh, btw—Bootstrap 4 will be in SCSS. And if you care, v5 will likely be in PostCSS because holy crap that sounds cool.

 

Примерный перевод:

Оу, кстати - Бутстрап 4 будет на SCCS. И если вам не все равно, v5_{(бутстрап 5)} скорее всего будет на PostCSS потому что, черт подери, это круто!

 

так же обещает что постарается сделать порт sccs в postCSS, грит, пока не представляет как это сделать :) но если кто-то хочет помочь - только за!

[ArtemPitov]

команда тут вообще никаким боком.

 

Почитайте описание хоть одного препроцессора и все сами поймете. попробуйте.

 

Вы программист?

Вы писали когда нибудь на ассемблере?

Вот если потом перейдете на Си++, то сразу почувствуете разницу.

 

Кода становится меньше. Его быстрее писать. Проще изменять.

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

 

пример:

background: -webkit-linear-gradient(top, #fff, #c5c5c5);
background: -moz-linear-gradient(top, #fff, #c5c5c5);
background: -o-linear-gradient(top, #fff, #c5c5c5);
background: -ms-linear-gradient(top, #fff, #c5c5c5);
background: linear-gradient(to bottom, #fff, #c5c5c5);
-pie-background: linear-gradient(to bottom, #fff, #c5c5c5);
behavior: url("/catalog/view/theme/default/stylesheet/PIE.htc");

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

К тому же здесь учтено, что старые браузеры поддерживают старую спецификацию направления "top", а новые поддерживают новую "to bottom".

Я даже намеренно убрал лишние строчки для самых старых браузеров, иначе код получился бы еще длиннее.

 

Это было бы если я писал бы код на голом CSS.

 

А вот как это выглядит на Stylus:

background: linear-gradient(to bottom, #fff, #c5c5c5);

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

 

И колоссальное преимущество Stylus в том, что вообще не нужно думать о миксинах или функциях когда дело идет о вендорных префиксах и результате для всех браузеров на свете.  Вы даже можете вообще не знать что такое Stylus, и писать при этом на обычном CSS, но Stylus сам сгенерирует нужный код где надо.  В других препроцессорах вам нужно всегда самостоятельно заботиться о том чтобы вставить в нужное место указание на то, что нужно генерировать вендорные коды.  Причем это нужно делать в каждом месте.  Поэтому мой выбор - Stylus. В нем еще масса других преимуществ.

 

И при необходимости я легко могу поменять цвета всего лишь в одной строчке и без необходимой проверки во всех браузерах (а вдруг я что-то забыл и в одном из браузеров цвет выглядит не так?)

 

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

Все я теперь точно пошел изучать документацию Stylus ) Спасибо за пояснение  :-) 

[sitecreator]

так же советую почитать про псевдо-пост-процессор, PostCss. сам не пробовал, но судя по написанному, фичам и скорости работы в недалеком будущем он будет убийцей less и scss.

 

 

 

 

это совершенно другие вещи - постпроцессоры.  Код после Stylus, например, не нуждается ни в каком послепроцессоре.

 

но PostCss, судя по всему - это опять же тот же "препроцессор", я бы сказал, что компилятор. Собственно и Stylus является таковым.

 

Stylus работает на порядок быстрее SASS/SCSS, я писал об этом выше.  Я сам делал всевозможные измерения производительности.  Беда в том, что Stylus не умеет работать в несколько потоков и многоядерные процессоры никак не ускоряют дело. Так уж написан он, хотя сама среда node.js позволяет делать вычисления в несколько потоков.

 

LESS, SASS тоже однопоточные. у SASS вообще жутко долгая обработка если использовать его классическую среду.  код в 3000 строк компилируется несколько секунд.

[ArtemPitov]

Кстати посоветуйте еще плагин для минификации css ... работаю в php шторме и Саблайме 3-м 

[kabantejay]

 

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

[sitecreator]

работаю в php шторме

 

 

как раз для Stylus подходящая среда. не забудьте установить плагин. Сразу появится автодополнение кода для Stylus.

 

для минификации css

 

 

для сжатия?

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

[sitecreator]

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

 

Да там вообще с ним не так все просто.

Ни одна IDE не в состоянии с ним работать.

 

Но на досуге обязательно пощупаю.

Для меня Sylus - почти идеал. Если бы еще компиляция происходила мгновенно. Но после нескольких секунд компиляции 4000 строк исходного текста за несколько секунд (4...7) на SASS, компиляция за одну секунду такого же проекта на Stylus кажется просто реактивно быстрой. Но хочется 0.1 сек. Чтобы сделал изменение и мгновенно в браузере увидел.

[Dotrox]

я вообще не понимаю зачем эти php шаблонизаторы нужны

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

Но использовать их, как дань моде - действительно нет смысла.

 

 

 Объекты обменивающиеся сообщениями и взаимодействующие друг с другом, чем не ООП в MVC ? 

В ООП есть несколько базовых принципов, без которых ООП - не ООП и эти принципы не имеют никакого отношения к MVC. И вообще, MVC можно организовать и полностью без участия ООП.

Собственно, и наличие ООП в ОпенКарте довольно условное.

 

 

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

А если сравнивать с SCSS?

 

 

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

А как на счёт устаревших префиксов, их он тоже добавляет (например, для border-radius)?

 

Кстати посоветуйте еще плагин для минификации css ... работаю в php шторме и Саблайме 3-м 

Выберите Grunt или Gulp и найдите для них соответствующий плагин в их репозиториях.

Один из них вам в любом случае понадобиться, если будете работать с препроцессорами (по крайней мере, упростит немного жизнь).

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

[sitecreator]

А если сравнивать с SCSS?

 

 

Я когда пишу sass, то подразумеваю SCSS.

SCSS меня разочаровал своим неумением делать простые вещи, которые умеет делать LESS.  Но я довольно долго работал с SCSS поскольку в совокупности его возможности намного выше и гибче LESS.

 

А как на счёт устаревших префиксов, их он тоже добавляет (например, для border-radius)?

 

 

добавляет любые какие нужно. Можно настраивать (и модифицировать алгоритм) самостоятельно при желании. Я вообще не думаю о префиксах. один раз настроил и забыл. Можете скормить Стилусу обычный CSS, в котором нет никаких префиксов, а только чисто валидный CSS по последней спецификации, и Стилус сам поставит везде нужные префиксы.

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

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

[Dotrox]

добавляет любые какие нужно. Можно настраивать (и модифицировать) самостоятельно при желании.

Так в том и суть, что не надо. Если можно отключить лишнее, то хорошо.

[sitecreator]

Так в том и суть, что не надо. Если можно отключить лишнее, то хорошо.

 

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

 

у меня сейчас так генерирует с установками по умолчанию (градиенты дополнительно настраивал):

 

 

а исходник вот:

 

a.show-options {
display: inline-block;
padding: 5px 14px;
text-decoration: none;
btn();
font-weight: normal;
}

почему не отключил "-webkit-border-radius"? Потому что на iPad (том самом первом) Сафари 5-й версии поддерживает именно этот префикс.

 

Но современные проекты проверяю на Сафари не ниже 6-й версии. Так что в принципе можно отключить эту древность.

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

[ArtemPitov]

как раз для Stylus подходящая среда. не забудьте установить плагин. Сразу появится автодополнение кода для Stylus.

 

 

для сжатия?

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

Для саблайма кажется тоже есть плагин под Stylus, мне что-то последнее время по душе пришелся именно он, по поводу сжатия страниц отрисовывается быстрее сайт, а тем боли на мобильных дивайсах которые занимают 30 а то и 40% трафика повсеместно.

[ArtemPitov]

Выберите Grunt или Gulp и найдите для них соответствующий плагин в их репозиториях.

Один из них вам в любом случае понадобиться, если будете работать с препроцессорами (по крайней мере, упростит немного жизнь).

О спасибо, возьму на вооружение

[ArtemPitov]

Вот по поводу кроссбраузерности, пои IE какой версии отталкиваться, как по мне щяс большинство браузеров новых работают в унисон, но могу ошибаться, принципе  все префиксы пишу вдруг ли что

[Гість]

9 версия

[ArtemPitov]

9 версия

а еще есть такие ? 

[sitecreator]

принципе  все префиксы пишу вдруг ли что

 

 

Для некоторых свойств это все еще актуально даже для современных браузеров.

box-sizing до сих пор еще требует префиксов. Даже для свежих Firefox.

Лучше доверить это автоматически делать Stylus-у. 

 

IE какой версии отталкиваться

 

 

я делаю для ie9+.

 

Только нужно помнить, что в ряде случаев префиксами не обойтись. У IE (9-ка) либо вообще данного свойства нету в принципе (см. выше пример про градиент), либо у IE свойства вообще могут по другому называться или требуют даже сразу несколько строчек других невалидных (чисто микрософтовских) свойств со своими параметрами.  Особая путаница, например, с градусами (направлением).  Даже в последних ie и др. браузерах используются разные спецификации на этот счет. Проблема связана с тем, что сначала для начала отсчета приняли одно положение вектора, а потом спустя время передумали и решили, что нулевой вектор нужно отсчитывать иначе.

 

Вот тут то Stylus выручает от запоминания всей этой галиматьи некчемной. Другие препроцессоры тоже это умеют. Но у Стилуса это реализовано удобнее всего и на полном автомате (другие этого не умеют).

[Dotrox]

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

Не совсем. У Сафари многое из относительно нового, что в Мозилле и Хроме давно без префиксов, не работает без префикса.

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

Меньше всего в префиксах сейчас Мозилла нуждается.

[shoputils]

а еще есть такие ?

В офисном сегменте (аудитории) - полно.

[ArtemPitov]

Для некоторых свойств это все еще актуально даже для современных браузеров.

box-sizing до сих пор еще требует префиксов. Даже для свежих Firefox.

Лучше доверить это автоматически делать Stylus-у. 

 

 

я делаю для ie9+.

 

Только нужно помнить, что в ряде случаев префиксами не обойтись. У IE (9-ка) либо вообще данного свойства нету в принципе (см. выше пример про градиент), либо у IE свойства вообще могут по другому называться или требуют даже сразу несколько строчек других невалидных (чисто микрософтовских) свойств со своими параметрами.  Особая путаница, например, с градусами (направлением).  Даже в последних ie и др. браузерах используются разные спецификации на этот счет. Проблема связана с тем, что сначала для начала отсчета приняли одно положение вектора, а потом спустя время передумали и решили, что нулевой вектор нужно отсчитывать иначе.

 

Вот тут то Stylus выручает от запоминания всей этой галиматьи некчемной. Другие препроцессоры тоже это умеют. Но у Стилуса это реализовано удобнее всего и на полном автомате (другие этого не умеют).

Вот именно из-за этого я и буду знакомиться с синтаксисом Стайлуса, но как я понял там нет ничего сильно отдаленного и не понятного, вот только интересен такой вопрос если есть уже готовый сss скажем тот же дефолтный опенкартовский как тогда подключить так что бы все это корректно компилировалось ?  А по поводу -moz -webkit -ms мне помогает еммит хороший плагин из разряда для лентяев 

[ArtemPitov]

В офисном сегменте (аудитории) - полно.

а вот это реально прискорбно

[sitecreator]

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

 

 

 

это легко.

просто переименовываете файл из *.CSS  в *.styl и все уже готово. 

А дальше просто выкидываете из этого файла все вендорные строки за ненадобностью. И забываете как страшный сон.

 

И уже жить становится веселее сразу.

 

Любой валидный CSS есть валидный *.styl.

Просто Стилус позволяет писать еще проще. вообще без знаков ":" ";" и фигурных скобок. Для этого используются только отступы.

Если это вам сильно непривычно, то пользуйтесь обычными фигурными скобками.

 

Также Стилус (Стайлас) позволяет сам перевести исходный CSS в свой формат с отступами без лишних знаков вроде фигурных скобок. По началу это непривычно, но потом экономит массу времени на набивании лишних знаков. в phpStorm это вообще легко, т. к. IDE в основном сама где нужно подставляет отступы.

 

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

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

[sitecreator]

ArtenPitov, Мне рыжая нравится!  А Мукла ваще достала! Но приходится и ее любить трахать.

[ArtemPitov]

это легко.

...

Спасибо за ответ, поставил плагин стайлуса на саблайм 3й но пока еще не разбирался с настройками и толком информации не нашел,  поставлю на штор там мне как то проще настроить будет, кстати стайлус в шторме дружит с Емитом  ?  

 

По поводу сжатия, это да только на продакшене сжимать, а так смысл

[ArtemPitov]

Мне рыжая нравится!  А Мукла ваще достала! Но приходится и ее любить трахать.

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