Абсолютное руководство для начинающих LESS

  1. Что такое препроцессор CSS?
  2. Что МЕНЬШЕ?
  3. Использование LESS
  4. МЕНЬШЕЕ Синтаксис: Переменные
  5. МЕНЬШЕ Синтаксис: Mixins
  6. МЕНЬШЕ Синтаксис: Вложение
  7. МЕНЬШЕЕ Синтаксис: Операции
  8. МЕНЬШЕЕ Синтаксис: Scope
  9. Заворачивать

CSS это простой язык CSS это простой язык. Это позволяет нам стилизовать свойства элементов HTML с помощью селекторов. Это облегчает начинающим работу с CSS.

Однако с ростом размера ваших веб-проектов вы в конечном итоге повторяете большую часть своего кода CSS. Если вы столкнулись с этой проблемой, то пришло время использовать препроцессор CSS.

В этом уроке мы собираемся объяснить, что такое препроцессор CSS. Мы также познакомим вас с одним из самых популярных CSS препроцессоров: LESS.

Что такое препроцессор CSS?

Препроцессоры CSS не заменяют CSS. Фактически, препроцессоры просто предоставляют нам дополнительную функциональность, такую ​​как переменные, миксины, операции и функции, с помощью которых мы можем упростить процесс создания и управления файлами CSS.

Препроцессоры позволяют нам определять свойства один раз, а затем повторно использовать их в нашем проекте гораздо более динамично, чем простой CSS.

Что МЕНЬШЕ?

LESS - относительно новый препроцессор, ему всего около 4 лет. Его часто сравнивают с SASS, чуть более старым препроцессором.

И LESS, и SASS имеют свои корни в языке программирования Ruby, но теперь используются гораздо шире. LESS теперь основан на Javascript.

Люди используют LESS для того, чтобы создать заранее определенный набор цветов для своего сайта. Они могут определить определенный стиль один раз, а затем повторно использовать его там, где это необходимо.

Использование LESS

Чтобы воспользоваться преимуществами LESS, мы сначала должны сохранить наш CSS-код в файле с расширением «.less». Использование LESS очень прямолинейно. Он работает как на веб-сервере, так и на стороне клиента.

Самый простой способ начать работу - на стороне клиента. Свяжите свои файлы .less со своей веб-страницей так же, как вы связываете свой CSS-файл, но для rel установите значение «stylesheet / less», за которым следует файл less.js, который можно загрузить с www.lesscss.org , Вот как будет выглядеть этот код:

<link rel = "stylesheet / less" type = "text / css" href = "/ styles.less" /> <script src = "/ less.js" type = "text / javascript"> </ script>

Этот метод работает только в современном браузере и хорош только при локальной разработке. Для производства рекомендуется использовать предварительную компиляцию, используя узел на веб-сервере или различные сторонние инструменты локально.

Некоторые из сторонних программ, которые вы можете использовать локально:

МЕНЬШЕЕ Синтаксис: Переменные

Одна из вещей, которая часто повторяется в файле CSS, - это цвет. Одни и те же цвета повторяются в файлах CSS для разных элементов, заголовков, ссылок и т. Д.

#header {background-color: #CCCCCC} .aside {background-color: #CCCCCC; цвет: # 000000; .sidebar a {border-bottom: 1px solid #CCCCCC; }

В LESS мы можем просто объявить переменную, чтобы сохранить цвет как:

@grey: #CCCCCC;

И затем снова используйте это как:

#header {background-color: @grey; } .aside {background-color: @grey; цвет: # 000000; } .sidebar a {border-bottom: 1px solid @grey; }

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

МЕНЬШЕ Синтаксис: Mixins

Переменные отлично подходят для повторного использования отдельных значений, таких как цвет и размер шрифта. В LESS с миксинами мы можем использовать целые свойства из одного набора правил в другой. Миксины можно использовать для оформления границ, установки размера шрифта, семейства шрифтов и т. Д.

.border_top_bottom {border-top: пунктир 1px # 000; граница снизу: сплошная 2px # 000; }

В приведенном выше коде мы определили стили top и border внутри класса .border_top_bottom. Теперь, когда мы хотим добавить этот стиль к другим элементам, теперь мы можем использовать их как:

#header {color: # 000000; .border_top_bottom; } .content a {color: # 000000; .border_top_bottom; }

Приведенный выше код выведет это:

#header {color: # 000000; граница сверху: пунктирная 1px # 000000; граница снизу: сплошная 2px # 000000; } .content a {color: # 000000; граница сверху: пунктирная 1px # 000000; граница снизу: сплошная 2px # 000000; }

Чтобы добавить больше гибкости, миксины также позволяют нам передавать переменные (также называемые здесь параметрами). Например:

.border-radius (@radius: 5px) {border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; }

В приведенном выше примере созданный нами параметр является радиусом. Мы также дали ему значение по умолчанию 5px, которое является необязательным. Теперь мы хотим добавить это к классу .button следующим образом:

.button {.border-radius (6px); }

Если мы уберем 6px из приведенного выше примера, применяется радиус границы, который используется по умолчанию в нашем классе .border-radius, который равен 5px.

МЕНЬШЕ Синтаксис: Вложение

В CSS часто встречаются длинные селекторы, которые нам часто приходится писать в стиле дочерних элементов, таких как:

nav {} nav li {} nav li a {} nav li a: hover {} nav li a.active {} nav li a.visited {}

И если у вас есть несколько подуровней в раскрывающемся меню, то это становится намного сложнее. В LESS это можно записать так:

nav {li {a {&: hover {} &: active {} &: посещения {}}}}

Символ «&» используется перед псевдоклассами в нашей вложенной структуре. Приведенная выше структура намного проще для понимания и показывает иерархию в точности так, как она есть.

МЕНЬШЕЕ Синтаксис: Операции

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

Допустим, мы объявили переменную padding, которая применяется ко всем нашим элементам H1, но мы хотим добавить дополнительный отступ к заголовку нашей домашней страницы. Мы можем сделать это так:

@padding: 5 пикселей; h1 {padding: @padding; } h1.page-title {padding: (@padding * 2); }

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

МЕНЬШЕЕ Синтаксис: Scope

Область действия в LESS аналогична области действия в других языках программирования. Переменные и миксины сначала ищутся локально, и если они не найдены, компилятор будет искать в родительской области видимости и так далее.

@var: красный; #page {@var: white; #header {color: @var; // выводит белый цвет}} #footer {color: @var; // выводит красный}

Заворачивать

Эта статья не охватывает все, что LESS может предложить. Цель состоит в том, чтобы объяснить, как использование LESS может помочь нам сделать наш CSS более динамичным. Помните, что CSS препроцессоры позволяют нам создавать и управлять CSS более эффективно.

Хорошее понимание CSS позволит вам использовать LESS и будет более продуктивным, поэтому, если вы являетесь новым веб-дизайнером, то изучение и освоение CSS важно, прежде чем вы начнете изучать LESS.


Стив является основателем OSTraining. Родом из Великобритании, сейчас он живет в Сарасоте в США. Работа Стива охватывает грань между преподаванием и веб-разработкой.


Что такое препроцессор CSS?
Что МЕНЬШЕ?
Что такое препроцессор CSS?
Что МЕНЬШЕ?