HTML параграфы и HTML абзацы: их назначение и использование в документах
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел…
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я открываю новую рубрику: Верстка сайтов. Постепенно в рубрику верстка сайтов будут переноситься статьи из других разделов так или иначе связанных с версткой и, конечно, эти статьи будут корректироваться и редактироваться в процессе переноса, так как информации на моем сайте достаточно много на тему верстки, но подана информация не самым лучшим образом, как минимум, не систематизирована. И еще данная статья начинает раздел Препроцессор LESS, в котором мы подробно изучим все возможности препроцессора LESS, а возможно, попробуем сделать HTML шаблон с LESS.
Данная запись про препроцессор LESS вводная, из нее вы узнаете: о том, что такое препроцессор LESS, почему LESS в разы ускоряет верстки HTML шаблонов и в разы облегчает их дальнейшее обслуживание, познакомитесь с функциями, реализованными в CSS препроцессоре LESS и в конце мы поговорим о преимуществах и недостатках LESS. Хочу заметить, что данные записи не будут вам интересны, если вы не знаете принципов работы CSS.
Содержание статьи:
LESS – это препроцессор CSS, который очень сильно ускоряет оформление HTML страниц сайта при помощи таблицы стилей CSS. Препроцессор LESS – представляет собой язык (отчасти напоминающий язык программирования, но намного проще), который значительно расширит ваши возможности при написании CSS кода.
Мы определились, что препроцессор LESS – это язык, если говорить просто, то код, написанный на языке LESS компилируется в CSS код при помощи специальных компиляторов LESS, которые мы, конечно же, рассмотрим. Стоит заметить, что компиляторы LESS генерируют кросс-браузерный код.
В этой рубрике я буду писать исключительно о препроцессоре LESS, поэтому рассчитываю, что вы уже умеете пользоваться браузерами, редакторами кода и можете самостоятельно создать HTML шаблон сайта и оформить его при помощи CSS. То есть подробно останавливаться на технических моментах, не связанных с препроцессором LESS я не буду, в рамках этих записей.
CSS препроцессор LESS разработан на языке JavaScript, поэтому файлы LESS можно использовать на сайте, компилятор будет отдавать браузеру переваренные в CSS файлы, а на самом деле на вашем сервере будет лежать файл с расширением .less.
Надеюсь, вы разобрались с тем, что такое препроцессор LESS и, думаю, что осознали его преимущества, если нет, то пойдем далее.
Когда я пишу про CSS, трудно подобрать термин, который бы характеризовал написание CSS кода, поэтому я буду использовать, либо CSS кодирование, либо верстка CSS. А теперь поговорим о том, как препроцессор LESS расширяет возможности CSS. Обратите внимание: если вы сейчас не совсем улавливаете, о том, что написано в тексте, то по завершению изучения LESS, вы сможете создавать собственные HTML шаблоны с LESS в разы быстрее, а вносимые корректировки во время использования шаблона будут в разы проще.
Первое, что есть у препроцессора LESS и нет у CSS, точнее у CSS есть, но реализовано не так эффективно: вложенные правила. Вложенные правила LESS делают код более понятным и читабельным.
Вложенные директивы препроцессора LESS позволяют сократить написание CSS кода на треть, а иногда и больше, согласитесь, лучше написать 10 строчек, чем 15.
Математические операторы поддерживаются препроцессором LESS, что бывает очень удобно при верстки адаптивных макетов сайта.
В LESS есть такая штука, как Escaping, называть ее побегом или спасением язык не поворачивается, поэтому пишу, как есть. Конструкция Escaping в LESS позволяет задавать CSS правила динамически. Ну, например, какой-нибудь жуткий кросс-браузерный градиент можно реализовать в LESS как Escaping и затем использовать его несколько раз в вашем CSS коде.
В препроцессоре LESS реализованы функции, которые могут изменять значения ваших CSS правил, как и в языке программирования, функциям в LESS передаются параметры.
В LESS есть пространства имен, которые используются для группировки правил, сгруппировав правила, вы можете их легко добавлять к другим элементам ваших страниц.
Препроцессор LESS реализует область видимости, как и в языках программирования, если вы еще не знаете, что такое область видимости, то мы поговорим об этом в дальнейшем.
LESS поддерживает еще и комментарии.
В LESS есть расширения, вернее будет сказать наследование, это когда один элемент может наследовать стили другого элемента.
В препроцессоре LESS есть переменные, которые дают кучу возможностей по сокращению CSS кода.
В LESS есть миксины или примеси: мы просто стили одного элемента можем добавить (примешать, смешать) со стилями другого элемента, чтобы не дублировать код. Это похоже на наследование классов в ООП.
Если простых миксин в LESS мало, то LESS позволяет использовать параметрические миксины. Принцип их действия схож, но параметрические миксины могут, как и функции принимать один или несколько параметров, а сами параметры могут быть переменными.
Чего нет, того нет, в LESS нет операторов условия, но есть охранники. Guards в LESS чем-то похожи на языковую конструкцию if.
Циклы в LESS есть и их даже используют и, стоит сказать, что циклы в LESS могут значительно вам помочь при написании CSS кода.
В LESS есть слияние, которое используется для объединения двух разных правил CSS в одно.
В LESS очень много встроенных функций, о которых мы будем говорить и которые мы будем рассматривать подробно далее.
В CSS часто можно встретить селекторы, имена которых состоят из 5-6 слов, а есть селекторы с эквивалентными именами, но состоящие не из 5, а из трех или четырех слов, обычно такие селекторы пишутся для вложенных элементов, чтобы не писать имя класса из 5-6 слов препроцессор LESS реализует дочерние селекторы.
Это был лишь краткий, но довольно полный обзор функционала препроцессора LESS. Надеюсь, вы теперь понимаете, зачем вам LESS и почему стоит его изучить, если вы всё еще считаете, что вам LESS не нужен, подумайте о том, что функции языка LESS можно комбинировать. Или подумайте хотя бы о том, что сайт, какой бы он ни был, оформляется однотипно, например, цвет ссылок на сайте обычно везде одинаков или многие элементы сайта имеют одинаковые цвета, так, наверное, проще один раз записать цвет в переменную и потом писать эту переменную, а не набор цифр и букв?
Давайте сперва поговорим о преимуществах, которые есть у LESS:
А теперь давайте перечислим недостатки препроцессора LESS:
Мне кажется, мы разобрались в этой записи с вопросами: что такое LESS, зачем нужно использовать LESS и чем хорош препроцессор LESS. Можем приступать к его изучению.
Выберете удобный для себя способ, чтобы оставить комментарий