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

[ArtemPitov]

Доброго времени суток 

 

Возник вопрос по поводу шаблонизаторов СSS, немного почитал о них, синтаксис весьма интересный и простой, кто работал SASS / LESS, на практике он сильно упрощает жизнь  ?

 

ЗЫ // Какие Вы можете посоветовать шаблонизаторы PHP и стоит ли вообще использовать их в быту ?  

[markimax]

ЗЫ // Какие Вы можете посоветовать шаблонизаторы PHP и стоит ли вообще использовать их в быту ?  

PHP сам по себе язык "шаблонизатор"

Даже не вздумайте использовать что то "другое" тем более смарти

Разного рода шаблонизаторы используют дилетанты в проектировании архитектуры ПО

[ArtemPitov]

Спасибо, я о PHP примерно тоже думал  :-)

[AlexFisher]

пробовал sass, но на уровне "поиграться". интересная штука, но мне применять пока негде.

пробовал less - не понравился. не такой удобный, как sass, как по мне.

[Гість]

LESS . Представьте себе вы в в контроллере вместо того чтоб присвоить 1 раз переменную $color = '#000' дублируете ее 100 раз. А Less помогает этого избежать.

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

Шаблонизаторы PHP , я кардинально не согласенс выше сказанным мнением. Шаблонизаторы - это удобно, и мне в 100 раз удобней прописать знак = чтоб сделать экранирование, кеширование статитики  и тд..тп....

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

[Dotrox]

Sass и Less - это никаким боком не шаблонизаторы, это CSS препроцессоры и к PHP они никакого отношения не имеют (как и к шаблонам).

 

ЗЫ // Какие Вы можете посоветовать шаблонизаторы PHP и стоит ли вообще использовать их в быту ?  

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

[ArtemPitov]

Sass и Less - это никаким боком не шаблонизаторы, это CSS препроцессоры и к PHP они никакого отношения не имеют (как и к шаблонам).

 

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

Да Вы правы препроцессоры СSS, но суть вопроса в том нужны ли они в быту или проще сделать дополнительные те же классы с дефолтом для проекта (цвет, размер, и тд. ) и дописывать к элементам по типу как в бутстрпе с блоками, последний  вариант весить меньше будет по идее  

[chukcha]

SASS / LESS,

Smarty

PHP

 

смешались в кучу, кони, люди (с)

 

Любой язык, framework требует изучения и понимания его внутренней структуры

 

Я согласен, что PHP лучший шаблонизатор.

 

а smarty - платформо независим с точки зрения шаблона, а не ядра.

[chukcha]

или проще сделать дополнительные те же классы с дефолтом

 

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Чем плох?

Один раз задал и забыл, и меняешь только в одном месте.

 

И код стилей становится платформо независимым

<?php
$color = '#000';
?>

#header {
  color: <?php echo $color; ?>;
}
h2 {
  color: <?php echo $color; ?>;
}

Зависит от наличия PHP

[sv2109]

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

1. нужно изучать доп. синтаксис, разный для кажного шаблонизатора

2. скорость работы сайта уменьшается так как появляется еще один слой

3. возможностей по сравнению с php, который сам по себе является шаблонизатором - меньше

и все для чего? Чтобы вместо

<?php echo $foo; ?>

написать

{$foo}

[ArtemPitov]

Да дошли до вывода, что в PHP шаблонизаторы это не нужная приблуда

 

А вот по поводу "минимизации" сss возникла вот такая мысль, есть смысл делать или нет дефолтные стили, а потом их дописывать нужным элементам ? 

 

.px15{

font-size:15px !important;

}

 

.defBgColor{

...

}

 

.defBorderRadius{

..

}

[chukcha]

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

1. нужно изучать доп. синтаксис, разный для кажного шаблонизатора

2. скорость работы сайта уменьшается так как появляется еще один слой

3. возможностей по сравнению с php, который сам по себе является шаблонизатором - меньше

и все для чего? Чтобы вместо

<?php echo $foo; ?>

написать

{$foo}

 

 

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

 

 

а для шаблонизатора php также нужны еще и живые данные

 

smarty далеко пошел, в том числе и с кешированием. отдельных блоков.

[markimax]

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

1. нужно изучать доп. синтаксис, разный для кажного шаблонизатора

2. скорость работы сайта уменьшается так как появляется еще один слой

3. возможностей по сравнению с php, который сам по себе является шаблонизатором - меньше

и все для чего? Чтобы вместо

<?php echo $foo; ?>

написать

{$foo}

Согласен по всем пунктам

[chukcha]

потому что нужно разделять

слой VIEW от модели и контроллера.

[ArtemPitov]

потому что нужно разделять

слой VIEW от модели и контроллера.

ну да верно, это как не как каноны ООП

[markimax]

потому что нужно разделять

слой VIEW от модели и контроллера.

Шаблонизатор никак не "слой" view

Это костыль

[chukcha]

Ну... про костыли я уже слышал

 

 

Шаблонизатор получает на вход данные

 

И каким способом он это выведет - никого не интересует

 

И именно поэтому - это слой VIEW

[freelancer]

потому что нужно разделять

слой VIEW от модели и контроллера.

 

ну да верно, это как не как каноны ООП

 

 

эмм.. а вы видите связь между ООП и MVC ?

 

https://ru.wikipedia.org/wiki/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%BD%D0%BE-%D0%BE%D1%80%D0%B8%D0%B5%D0%BD%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D0%BE%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5

https://ru.wikipedia.org/wiki/Model-View-Controller

[ArtemPitov]

эмм.. а вы видите связь между ООП и MVC ?

 

https://ru.wikipedia.org/wiki/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%BD%D0%BE-%D0%BE%D1%80%D0%B8%D0%B5%D0%BD%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D0%BE%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5

https://ru.wikipedia.org/wiki/Model-View-Controller

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

[freelancer]

вопросов нет

[chukcha]

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

 

выполнить код в шаблоне - невозможно, в частности, smarty вырежет php код

[sitecreator]

кто работал SASS / LESS, на практике он сильно упрощает жизнь  ?

 

 

Работал и работаю.

 

Начинал именно с LESS. Потом возможностей стало мало, перешел на SASS.

 

Но теперь только Stylus.  Ничего лучшего нет.  Превосходит оба предыдущих языка по всем аспектам.

 

Кроме того Stylus на порядок быстрее компилируется чем SASS.  Раз эдак в 10 или 15 быстрее.

Впрочем и сам SCSS можно заставить работать на порядок быстрее если перейти с Java/Ruby на платформу node.js.  Но, к сожалению, SCSS без связки Compass - штука на порядок менее полезная, а Compass на node.js заставить работать нельзя.

 

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

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

[sitecreator]

пробовал sass, но на уровне "поиграться". интересная штука, но мне применять пока негде.

пробовал less - не понравился. не такой удобный, как sass, как по мне.

 

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

Но мне не хватило в нем условных операторов.  Впрочем, несколько поизвращавшись и их можно в less сделать, т. к. он позволяет делать вставки кода на Javascript.  Но это извращение.

[ArtemPitov]

Работал и работаю.

 

Начинал именно с LESS. Потом возможностей стало мало, перешел на SASS.

 

Но теперь только Stylus.  Ничего лучшего нет.  Превосходит оба предыдущих языка по всем аспектам.

 

Кроме того Stylus на порядок быстрее компилируется чем SASS.  Раз эдак в 10 или 15 быстрее.

Впрочем и сам SCSS можно заставить работать на порядок быстрее если перейти с Java/Ruby на платформу node.js.  Но, к сожалению, SCSS без связки Compass - штука на порядок менее полезная, а Compass на node.js заставить работать нельзя.

 

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

Какие преимущества препроцессоров  Вы можете выделить на практике по сравнении писать это все "по старинке"  ? И почувствовать всю мощь как я понимаю можно только на крупных проектах когда работает команда ?  

[sitecreator]

Какие преимущества препроцессоров  Вы можете выделить на практике по сравнении писать это все "по старинке"  ? И почувствовать всю мощь как я понимаю можно только на крупных проектах когда работает команда ?  

 

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

 

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

 

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

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

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

 

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

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

 

пример:

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. В нем еще масса других преимуществ.

 

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

 

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

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