Примерно полгода назад я прочитал статью «Почему стоит использовать препроцессоры». В ней автор описывает преимущества препроцессоров на примере реализации кастомных кнопок. Статья оказалась познавательна и очень интересна. Автор приводил в примеры разные препроцессоры и объяснял, почему остановился на Sass. На счет цвета карандашей и вкуса я не в праве спорить, у каждого свои взгляды. Но еще тогда мне показались не справедливыми описания о том, что Less не достаточно мощный. Еще тогда хотелось сделать что-то подобное, воплотить идею автора на других препроцессорных языках (Less, Stylus). На момент прочтения статьи времени что-то сделать свое не было. И вот недавно, в один из выходных, я вспомнил об этой статье и решил реализовать идею автора — только средствами Less. Делать что-то новое я не видел смысла, поэтому решил помочь автору в развитии проекта, сделал форк с его репозитория, проделал необходимую работу и создал pull request.
Less или Sass или Stylus или еще что-то там ?
Все зависит от особенностей вашего проекта и от ваших потребностей. Если вы не знакомы ни с одним из вышеперечисленных препроцессорных языков, самое время начать знакомиться. Мало того, что откроете для себя много нового и интересного, так еще получите хороший level up. В наших проектах мы используем Less. И вы знаете, за 2 с хвостиком года я ни разу не задумался о том, что Less обделен функциональностью, скоростью или еще чем-то там. Да, в первых реализациях он был сыроват и требовал серьезных доработок, но на данный момент он очень функционален и на нем можно реализовать много ваших задумок, стоит просто почитать документацию и объединить те возможности, которые нам предлагает этот препроцессорный язык. Часто слышу, что препроцессоры это тяжело, они только затрудняют написание кода, чтобы их использовать нужны дополнительные инструменты. Не слушайте никого и начните использовать препроцессоры.
Преимущества препроцессоров
Переменные, миксины, импорты, вложенности и многое другое. Я не зря первыми назвал переменные, миксины, импорты и вложенности, именно они составляют большую часть всего кода, все остальные фичи того или иного препроцессорного языка дополняют их. Эта веселая четверка позволяет нам с легкостью реализовать принцип DRY, сделать поддержку кода более простой и легкой, избавиться от лишнего копипаста.
Переменные
Я не представляю, как сейчас, в реалиях бурного развития Front End можно жить без переменных. Те кто говорят, что переменные не нужны, они только мешают, загромождают код — они нагло врут не правы. Простой пример, нужно в 2 файлах в 4 местах поменять цвет линки с красного на синий. Задача простая, но что если будет не 2 файла, а 22, и менять нужно не в 4х места, а скажем, на каждой 5й строке каждого файла. И тут начинается: открываем все 22 файла, поиском ищем нужный цвет, меняем, сохраняем, проверяем работу. Ошибка, давай по новой. А если бы был файл с переменными, все было намного проще — открываем этот файл, меняем всего одну строчку, сохраняем, профит. Результат на лицо. И работы меньше и % ошибок намного меньше (я бы сказал, что он стремится к нулю). Простой пример файла с переменными, который я использовал _variables.less
@brands-name: amazon, delicious, digg, disqus, eventbrite, eventful, intensedebate, lanyrd, pinboard, songkick, stumbleupon, gmail, google, evernote, grooveshark, instapaper, itunes, opentable, logmein, ninetyninedesigns, paypal, pocket, scribd, spotify, statusnet, stripe, yahoo, yelp, wikipedia, wordpress, ycombinator, bitcoin, cloudapp, creativecommons, dropbox, html5, ie, podcast, rss, skype, steam, windows, android, appstore, googleplay, macstore, appnet, blogger, bitbucket, dribbble, facebook, flattr, flickr, foursquare, github, googleplus, gowalla, instagram, klout, lastfm, linkedin, meetup, myspace, pinterest, quora, reddit, plurk, smashing, soundcloud, stackoverflow, tumblr, twitter, viadeo, vimeo, vk, weibo, xing, youtube, csgo, dota2, gm, lol, minecraft, tf2, quake, wot;
@brands-color: rgb(242,158,55), rgb(50,113,203), rgb(22,70,115), rgb(46,159,255), rgb(255,86,22), rgb(55,96,149), rgb(0,153,225), rgb(46,106,194), rgb(0,0,255), rgb(255,0,80), rgb(235,73,36), rgb(219,64,56), rgb(78,108,247), rgb(107,177,48), rgb(233,122,47), rgb(34,34,34), rgb(82,81,82), rgb(153,0,0), rgb(0,0,0), rgb(7,34,67), rgb(50,104,154), rgb(222,90,95), rgb(35,28,26), rgb(96,175,0), rgb(130,157,37), rgb(47,126,214), rgb(162,0,194), rgb(230,0,16), rgb(17,17,17), rgb(70,70,70), rgb(255,102,0), rgb(235,151,55), rgb(49,44,42), rgb(0,0,0), rgb(0,126,229), rgb(255,54,23), rgb(0,161,217), rgb(147,101,206), rgb(255,127,37), rgb(0,162,237), rgb(0,0,0), rgb(72,187,239), rgb(164,198,57), rgb(0,0,0), rgb(185,193,62), rgb(0,125,203), rgb(49,120,189), rgb(238,90,34), rgb(32,80,129), rgb(234,76,137), rgb(72,99,174), rgb(138,186,66), rgb(255,0,132), rgb(0,114,177), rgb(23,21,21), rgb(221,74,56), rgb(255,114,10), rgb(63,114,155), rgb(227,74,37), rgb(220,26,35), rgb(0,131,168), rgb(255,0,38), rgb(0,0,0), rgb(201,22,24), rgb(168,36,0), rgb(255,87,0), rgb(207,104,47), rgb(255,79,39), rgb(255,69,0), rgb(241,132,54), rgb(55,74,97), rgb(70,192,251), rgb(231,115,46), rgb(0,162,205), rgb(69,104,142), rgb(215,88,77), rgb(10,93,94), rgb(255,0,0), rgb(182,115,0), rgb(195,61,43), rgb(17,148,240), rgb(215, 153, 34), rgb(148,200,100), rgb(179,82,21), rgb(205,24,0), rgb(255,64,5);
@brands-count: length(@brands-name);
В нем мы храним названия брендов (@brands-name), цвета (@brands-color), которые соответствуют этим брендам и общее количество элементов в списке (@brands-count).
Миксины
Примеси, миксины — уже одно название говорит нам о том, что мы можем взять несколько кусков кода и поместить их под одним названием. Более того, внутри можно указать названия классов, использовать родительский селектор, указать локальные переменные, задать условия и многое другое. Самый очевидный плюс — один раз написали много раз используем по всему проекту. Миксины очень похожи на функции в языках программирования. Их можно создавать как с параметрами так и без параметров, с условиями, применять как функции, которые возвращают результаты своей работы. Один раз у меня была задача реализовать теги к товарам в виде бирок с текстом с длинными тенями. Тени могли быть разного размера и цвета. Количество бирок, их цвет тоже могли варьироваться. Немного подумав, почитав официальную документацию пришел к такому варианту. Если бы мы не использовали Less или любой другой перпроцессор, то на чистом CSS такое решение занимало бы много строк кода, имя каждого класса нужно было бы прописывать ручками, каждый шаг тени указывать явно. Я конечно люблю сложные задачи, но не до такой степени. Данный пример можно реализовать не только на Less, но и на других препроцессорных языках.
Импорты
В стандартном CSS все @imрort правила должны идти в самом начале файла за исключением @сharset, если такой есть (@imрort rule). Препроцессоры добавляют свои фичи для этой директивы. В частности для Less не имеет значения, в какой части файла будет @imрort. Если после @imрort “filename” не указать расширение, то по умолчанию будет импортироваться файл с расширением .less. Также есть возможность импортировать php и css файлы. Доступны и другие опции для @imрort правил. Очевидная выгода, при использовании @imрort директив — это организация файлов внутри проекта и последующее их использование. Так как мы делали с файлами миксинов и переменных, а потом их импортировали в другие файлы и повторно использовали. Пример.
Вложенности
Это одновременно и преимущество и недостаток. Объясню, почему недостаток. Многие неокрепшие умы начинают полностью повторять свое DOM-дерево, забывая о том, что на выходе мы получим очень медленный и тяжело поддерживаемый код. У нас на проекте есть свой Style guide, который описывает много всего интересного, в том числе и какое максимальное количество вложенности может быть. Для того, чтобы не порождать темы для дискуссий, скажу лишь, что с вложенностями нужно быть крайне осторожным, иначе можно прийти к ситуации, что для того, чтобы переопределить тот или иной стиль нужно будет прибегать к услугам !import, что чревато последствиями. Также стоит упомянуть про родительский селектор. Он открывает перед нами невиданные возможности, которые в чистом CSS нам были не доступны. Только опять же повторюсь, используйте его с осторожностью, только тогда, когда на 100% понимаете логику его работы. Пример.
Что еще
Все те преимущества, которые нам дают препроцессоры, а в частности Less – это далеко не весь список. На самом деле — вкуснятины хватает. И это касается не только Less. Поэтому, читайте мануалы, практикуйтесь, объединяйте несколько фич в одну и вы увидите на сколько мощные и функциональные препроцессоры.
Спасибо за внимание.
Если есть какие-то неточности в тексте статьи — пишите в личку.
Автор: var_bin
