Абсолютное руководство для начинающих 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. Родом из Великобритании, сейчас он живет в Сарасоте в США. Работа Стива охватывает грань между преподаванием и веб-разработкой.


Похожие

Что такое Кровавая Супер Луна?
Blood Moon - полное лунное затмение в Миннеаполисе, штат Миннесота, 15 апреля 2014 года. Рис. Tomruen / Wikimedia 28 сентября 2015 года мы увидим Кровавую Супер-Луну в ночном небе. Звучит страшно. И неправильно. Время от времени я вижу информацию о «Кровавой
Что такое запись PTR и как сделать обратный поиск IP?
... что такое запись PTR и как проверить, установлена ​​ли она для IP-адреса. Что такое запись PTR Короче говоря, запись PTR похожа на обратную версию записи A. Запись сопоставляет доменное имя с IP-адресом, PTR сопоставляет IP-адрес с именем хоста. Однако эти две записи независимы. Например, запись hostinger.com может указывать на IP-адрес 21.21.128.xx, в то время как 23.23.128.xx может быть сопоставлен с совершенно другим именем хоста. Зачем вам нужна запись
CSS Layout | слои, абсолютное и относительное позиционирование и плавающие элементы
Путь // → → CSS LAYOUT Одним из основных преимуществ использования CSS является то, что вы больше не обязаны размещать свои сайты в таблицы , Возможности компоновки CSS дают вам полный контроль над позициями и размерами всех элементов страницы. Если вы пытались разместить страницу с таблицами, в прошлом вы, вероятно, были раздражены неспособностью вашего браузера отображать вашу страницу именно так, как вы этого хотели.
Что такое Google Диск и как он работает? A 2019 Пошаговое руководство
... меньше, если вы купили столько памяти. Одна из приятных особенностей Google Диска заключается в том, что он позволяет просматривать файлы из браузера без предварительной загрузки. Много с нулевым знанием Сервисы не позволяют вам этого делать, так как сервис не может расшифровать ваши файлы. Предварительные просмотры доступны для Microsoft Office, Adobe и общих
Apple SIM: все, что нужно знать об SIM-карте для iPad
IPad стал предпочтительным рабочим инструментом для многих. Он мощный и легкий в транспортировке, гораздо больше, чем ноутбук благодаря своей легкости и изяществу. Он идеально подходит для офисных задач, ответов на электронные письма и просмотра веб-страниц в поисках информации. Однако, когда у нас нет Wi-Fi соединения, оно теряет много сил . Чтобы решить эту проблему, некоторые люди совместно используют соединение своего смартфона в качестве маршрутизатора для доступа
Нагрузочное тестирование на AWS с публичным IP-адресом
Частый запрос от Операций к командам QA: Если вы хотите загрузить тест, мне понадобится публичный IP-адрес для ваших агентов загрузки. Это справедливый запрос от команд операций, но по умолчанию агенты загрузки эфемерны. Некоторые из дорого инструменты предоставляют своим собственным агентам загрузки фиксированные IP-адреса, за которые вы платите большую премию.
Компоненты пользовательского интерфейса Styling с нуля: кнопки и формы
... чтобы ваши кнопки и формы выглядели хорошо, а также были совместимы с разными браузерами. Самое простое решение - использовать такую ​​среду, как Bootstrap или Foundation, но это не поможет вам понять основы. На самом деле это не так сложно, как кажется, и в этой статье я покажу вам, как это сделать. Чтобы облегчить себе жизнь, я собрал все это в свои собственные рамки, Примитивный (который также
Windows Live SkyDrive
В повседневной жизни мы часто сталкиваемся с различными жалобами среди друзей по поводу того, что в их компьютерах есть носители данных со слишком маленькой емкостью. Или у них есть важная документация, которую они боятся придерживаться на жестких дисках компьютера из-за возможности их потери во время сбоя носителя или когда потребуется форматировать диск без возможности предварительного копирования данных. Следующая услуга, предлагаемая гигантом из Редмонда, - это как раз такие получатели,
SEO - что это значит? <Блог Sirius Pro
Знаете ли вы, что означает понятие SEO и какая история стоит за созданием одной из самых популярных индустрий интернет-маркетинга в мире? SEO - что это значит в маркетинге SEO - это сокращение поисковой оптимизации, которое при переводе на наш язык означает поисковую оптимизацию . Впервые это выражение стало появляться еще в середине 90-х годов и было связано с популяризацией поисковых систем, таких как Altavista и Infoseek
USB Type-C и USB 3.1 объяснил
Порт универсальной последовательной шины является, пожалуй, наиболее часто используемым и легко узнаваемым стандартом подключения к ПК на современном оборудовании. Но, как бы ни был распространен прямоугольный порт и соответствующий ему стандарт передачи данных, ситуация может измениться с появлением USB Type-C, который с выпуском нового CL100 Mini-PC дебютирует в мире IPC. Меньший, реверсивный овальный
Проверьте сайты, с которых вы загружаете приложения, Facebook и Apple борются за приложение и ирландскую ...
Проверьте сайты, с которых вы загружаете приложения, Facebook и Apple борются за приложение и ирландскую телефонную компанию, смущенную после кражи ноутбука. Добро пожаловать в кибербезопасность сегодня. Сегодня пятница, 24 августа. Чтобы прослушать подкаст, нажмите на стрелку ниже: Вот еще одно предупреждение о загрузке настольных или мобильных приложений.

Комментарии

Что такое порт 7547 и TR-069 и почему это проблема?
Что такое порт 7547 и TR-069 и почему это проблема? Порт 7547 является портом управления на домашних маршрутизаторах. Это позволяет интернет-провайдерам управлять маршрутизаторами, которые их клиенты используют в своих домашних сетях. Он использует протокол TR-069 для обеспечения интерфейса управления. Протокол TR-069 может использоваться для предоставления устройств, обеспечения технической поддержки и удаленного управления, мониторинга маршрутизаторов на наличие неисправностей, диагностики,
Так что же такое USB Type-C и как он улучшается по сравнению с его предшественниками?
Так что же такое USB Type-C и как он улучшается по сравнению с его предшественниками? Что такое USB Type-C? Type-C относится к физической форме новейшего USB-разъема. Разъем USB Type-C не следует путать с новым стандартом USB 3.1, который был анонсирован примерно в то же время (мы вернемся к этому через секунду). Наиболее
Что такое вики?
Что такое вики? «Wiki» - это гавайский термин, который означает «быстрый». Вики на основе компьютеров - это тип системы управления контентом, которая позволяет сообществу людей добавлять, редактировать, структурировать и удалять контент, хранящийся в центральном месте. Самый большой и самый успешный пример вики - это онлайн-энциклопедия, Wikipedia® , Содержимое в Википедии предоставляется исключительно добровольцами, и сайт
Что такое контент-маркетинг ROI?
Что такое контент-маркетинг ROI? 11:30 - 12:30 Стратегия контент-маркетинга Контент-маркетинг на месте и вне сайта Контент длинный или короткий? Как часто вы публикуете контент? Как вы находите темы по содержанию? Какие инструменты использовать для исследования рынка? 12:30 - 13:30 Типы контента Рекламные статьи Статьи, электронные книги,
Что такое исходная карта?
Что такое исходная карта? Исходная карта - это файл .map в формате JSON, который генерируется, когда ваши файлы Sass компилируются в CSS. Он содержит информацию, которая связывает каждую строку вашего CSS-файла (выходные данные) с соответствующей строкой в ​​его исходном файле SCSS (входные данные). Это означает, что когда ваш CSS компилируется, вы увидите комментарий, подобный следующему, в конце вашего скомпилированного файла CSS: / * # sourceMappingURL = style.css.map
Что такое спуфинг соседа?
Что такое спуфинг соседа? Как работает спуфинг соседа? Почему сосед подделывает угрозу вашей безопасности и конфиденциальности? Как вы можете остановить подделку соседа, навсегда? Что такое спуфинг соседа?
Tweet "Что такое #Zombiepost?
Tweet "Что такое #Zombiepost? Скажите @FrolleinJune в интервью. "] Еще одна проблема в ежедневном планировании заключается в том, что мы не можем работать с редакционным планом. Потому что наши блогеры ищут свежие, непревзойденные предложения каждый день. Проблема с действительно хорошими предложениями, однако, заключается в том, что они редко бывают доступны долго. Таким образом, если предложение найдено, оно будет размещено в блоге и должно быть незамедлительно опубликовано
Что такое «печать по требованию» и как это работает?
Что такое «печать по требованию» и как это работает? Печать по требованию - это процесс, при котором вы работаете с поставщиком, чтобы настроить изделия с белой этикеткой (например, бейсбольные кепки или сумки) с вашим собственным дизайном, чтобы продавать их на основе заказа под вашим собственным
Что есть, а что нет, ретуширование?
Что есть, а что нет, ретуширование? Многие люди путают ретуширование с обычной обработкой, но на самом деле это два отдельных термина. Ретушь - это концепция, тесно связанная с портретной, модной и косметической фотографией. О чем это? Тема ретуширования - портретные режимы в смартфонах, в которых приложение «улучшает красоту», уравновешивая цвет лица, расширяя глаза и выравнивая цвет лица. И хотя такие картинки выглядят лучше, видно, что они неестественные и обработанные.
Спросите, что и как именно они намерены делать в вопросах экономических и государственных финансов: что это будет переводить в конкретные цифры, хотя и приблизительно?
Спросите, что и как именно они намерены делать в вопросах экономических и государственных финансов: что это будет переводить в конкретные цифры, хотя и приблизительно? Они знают, о чем говорят? ( вот ссылки на ФБ ). Не обманывайте себя лозунгами и любыми ответами. Без подробностей в Польше все будет продолжаться, потому что лозунги не изменят
Но тот факт, что кто-то может позволить себе что-то, не означает, что он должен тратить на это деньги, верно?
Но тот факт, что кто-то может позволить себе что-то, не означает, что он должен тратить на это деньги, верно? Итак, стоит ли покупать MyPassport Wireless SSD? Это зависит Цены на SSD на момент написания этого обзора были следующими: WD MyPassport Wireless SSD 500 ГБ - 1270 зл. WD MyPassport Wireless SSD 1 ТБ - 3120 зл. WD MyPassport Wireless SSD 2 ТБ - 3620 зл. В то же время модель Pro также доступна для продажи по ценам:

Что такое препроцессор CSS?
Что МЕНЬШЕ?
Что такое препроцессор CSS?
Что МЕНЬШЕ?
Что такое Google Диск и как он работает?
Что такое порт 7547 и TR-069 и почему это проблема?
Так что же такое USB Type-C и как он улучшается по сравнению с его предшественниками?
Что такое USB Type-C?
Что такое вики?
Что такое контент-маркетинг ROI?