МЕНЬШЕ CSS - Руководство для начинающих

Препроцессор CSS теперь стал одним из основных продуктов в веб-разработке. Он поставляется с простым CSS с такими чертами программирования, как Variables, Functions или Mixin и Operation, которые позволяют веб-разработчикам создавать модульные, масштабируемые и более управляемые стили CSS.

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

Компилятор

Для начала нам нужно настроить компилятор. Синтаксис LESS нестандартен, согласно спецификации W3C. Браузер не сможет обрабатывать и обрабатывать вывод, несмотря на наследование черт, похожих на CSS.

Вот проблеск в МЕНЬШЕМ коде:

 @ color-base: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; цвет: @ color-base;

Компилятор обработает код и превратит синтаксис LESS в формат CSS, совместимый с браузером:

 .class1 background-color: # 2d5e8b;  .class1 .class2 background-color: #fff; цвет: # 2d5e8b;

Существует несколько инструментов для компиляции CSS:

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

Меньше идет с less.js файл, который действительно легко развернуть на вашем сайте. Создать таблицу стилей с .Меньше расширение и связать его в вашем документе, используя отн = «таблица стилей / меньше» атрибут.

Вы можете получить файл JS здесь, скачать его через менеджер пакетов Bower, а также напрямую связать с CDN, например, так:

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

Вы всегда должны компилировать синтаксис LESS заранее и только обслуживать обычный CSS вместо. Ты можешь использовать Терминал, как Runner Task хрюкать или же Глоток, или графическое приложение, чтобы сделать это.

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

LESS предоставляет собственный интерфейс командной строки (CLI), lessc, который выполняет несколько задач, помимо компиляции синтаксиса LESS. Используя CLI, мы можем собирать коды, сжимать файлы и создавать исходную карту. Команда основана на Node.js, который эффективно позволяет команде работать в Windows, OS X и Linux.

Убедитесь, что Node.js установлен (иначе захватите установщик здесь), затем установите LESS CLI через NPM (Node Package Manager), используя следующую командную строку.

 npm установить -g меньше

Теперь у вас есть lessc Команда в вашем распоряжении, чтобы скомпилировать LESS в CSS:

 LessC style.less style.css

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

Task Runner - это инструмент, который автоматизирует задачи разработки и рабочие процессы. Вместо того, чтобы запустить lessc Команда каждый раз, когда мы хотим скомпилировать наши коды, мы можем установить установку запуска задач и настроить ее так, чтобы она отслеживала изменения в наших файлах LESS и немедленно компилировала LESS в CSS.

Два популярных инструмента в этой категории сегодня - Grunt и Gulp. У нас есть серия постов, посвященных этим инструментам. Ознакомьтесь с сообщениями, чтобы узнать, как использовать эти инструменты в своем рабочем процессе..

Как использовать Grunt для автоматизации вашего рабочего процесса
Начало работы с Gulp.js
Битва сценариев сборки: Gulp Vs Grunt

Использование графического приложения

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

Вот полный список:

Приложение	Платформа	Стоимость
Смесь	OS X / Windows	Свободно
коала	OS X / Windows / Linux	Свободно
Prepros	OS X / Windows	Фримиум (29 долларов США)
Уинлесс	Windows	Свободно
CodeKit	OS X	USD32

Какой компилятор вы выбираете (кроме JavaScript), на самом деле, не имеет значения, если инструмент работает и дополняет ваш рабочий процесс, выбирайте его.

Редактор кода

Вы можете использовать любой редактор кода. Просто установите плагин или расширение, чтобы выделить синтаксис LESS правильными цветами, - функция, которая теперь доступна почти для всех редакторов кода и IDE, включая SublimeText, Notepad ++, VisualStudio, TextMate и Eclipse, чтобы назвать несколько.

Теперь, когда у нас есть компилятор и редактор кода, мы можем начать писать стили CSS с синтаксисом LESS.

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

В отличие от обычного CSS, как мы его знаем, LESS работает гораздо больше как язык программирования. Это динамично, поэтому ожидайте найти некоторые термины, такие как переменные, операция а также Объем по пути.

переменные

Прежде всего, давайте посмотрим на переменные.

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

 .class1 background-color: # 2d5e8b;  .class2 background-color: #fff; цвет: # 2d5e8b;  .class3 border: 1px solid # 2d5e8b;

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

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

 @ color-base: # 2d5e8b; .class1 background-color: @ color-base;  .class2 background-color: #fff; цвет: @ color-base;  .class3 border: 1px solid @ color-base;

В приведенном выше примере мы храним цвет # 2d5e8b в @ Цвет базы переменная. Если вы хотите изменить цвет, нам нужно только изменить значение в этой переменной.

Помимо цвета, вы также можете поместить другие значения в переменные, например:

 @ font-family: Georgia @ dot-border: dotted @transition: linear @opacity: 0.5

Примеси

В LESS мы можем использовать Примеси повторно использовать все объявления в наборе правил CSS в другом наборе правил. Вот пример:

 .градиенты фон: #eaeaea; фон: линейный градиент (вверху, #eaeaea, #cccccc); фон: -o-линейный градиент (вверху, #eaeaea, #cccccc); фон: -ms-линейный градиент (top, #eaeaea, #cccccc); background: -moz-linear-Gradient (вверху, #eaeaea, #cccccc); background: -webkit-linear-Gradient (вверху, #eaeaea, #cccccc);

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

 div .gradients; граница: 1px solid # 555; радиус границы: 3 пикселя;

.коробка унаследует весь блок объявления внутри .градиенты. Итак, вышеприведенное правило CSS равно следующему простому CSS:

 div background: #eaeaea; фон: линейный градиент (вверху, #eaeaea, #cccccc); фон: -o-линейный градиент (вверху, #eaeaea, #cccccc); фон: -ms-линейный градиент (top, #eaeaea, #cccccc); background: -moz-linear-Gradient (вверху, #eaeaea, #cccccc); background: -webkit-linear-Gradient (вверху, #eaeaea, #cccccc); граница: 1px solid # 555; радиус границы: 3 пикселя;

Кроме того, если вы часто используете CSS3 на своем веб-сайте, вы можете использовать LESS Elements, чтобы сделать вашу работу намного проще. LESS Elements - это коллекция общих CSS3 Mixins что мы можем часто использовать в таблицах стилей, таких как граница радиуса, градиенты, раскрывающаяся тень и так далее.

Чтобы использовать LESS Elements, просто добавьте @Импортировать Править в вашей таблице стилей LESS, но не забудьте сначала скачать его и добавить в свой рабочий каталог.

 @import "elements.less";

Теперь мы можем повторно использовать все классы при условии от elements.less, например добавить 3px радиус границы до ДИВ, мы можем написать:

 div .ounded (3 пикселя);

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

Вложенные правила

Когда вы пишете стили в простом CSS, вы также можете пройти через эти типичные структуры кода.

 nav height: 40px; ширина: 100%; фон: # 455868; нижняя граница: 2px solid # 283744;  nav li width: 600px; высота: 40 пикселей;  nav li a color: #fff; высота строки: 40px; тень текста: 1px 1px 0px # 283744;

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

В LESS CSS мы можем упростить наборы правил с помощью вложение дочерних элементов внутри родителей, следующее;

 nav height: 40px; ширина: 100%; фон: # 455868; нижняя граница: 2px solid # 283744; li ширина: 600 пикселей; высота: 40 пикселей; a color: #fff; высота строки: 40px; тень текста: 1px 1px 0px # 283744;

Вы также можете назначить псевдоклассы, лайк : парить, к селектору с помощью символа амперсанда (&).

Допустим, мы хотим добавить : парить к тегу привязки выше, мы можем написать это так:

 a color: #fff; высота строки: 40px; тень текста: 1px 1px 0px # 283744; &: hover background-color: # 000; цвет: #fff;

операция

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

Допустим, мы хотим, чтобы элемент B был в два раза выше, чем элемент A. В этом случае мы можем написать его следующим образом:

 @height: 100px .element-A height: @height;  .element-B height: @height * 2;

Как вы можете видеть выше, мы сначала сохраняем значение в @рост переменной, затем присвойте значение элементу A.

В элементе B, а не вычислять высоту самостоятельно, мы можем умножить высоту на 2 используя звездочку (*). Теперь, когда мы меняем значение в @рост переменная, элемент Б всегда будет в два раза больше высоты.

Ознакомьтесь с более продвинутыми примерами работы в нашем предыдущем уроке: Разработка гладкой панели навигации по меню.

Объем

МЕНЬШЕ применяет Объем Концепция, в которой переменные будут наследоваться первыми из локальной области, а когда они недоступны локально, они будут искать в более широкой области.

 заголовок @color: черный; background-color: @color; nav @color: blue; background-color: @color; a color: @color;

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

Последняя мысль

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

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

LESS CSS Tutorial: Проектирование гладкой панели навигации по меню
Понимание менее цветовых функций
3 новых LESS CSS функции, которые вы должны знать