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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Компилятор

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

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

@ color-base: # 2d5e8b;
.class1 {
background-color: @ color-base;
.class2 {
цвет фона: #fff;
цвет: @ color-base;
}
}

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

.class1 {
цвет фона: # 2d5e8b;
}
.class1 .class2 {
цвет фона: #fff;
цвет: # 2d5e8b;
}

Существует несколько инструментов для компиляции CSS:
Использование JavaScript
LESS поставляется с файлом less.js, который действительно легко развернуть на вашем сайте. Создайте таблицу стилей с расширением .less и свяжите ее с документом, используя атрибут rel = “stylesheet / less”.

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

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

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

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

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

Теперь у вас есть команда lessc для компиляции LESS в CSS:

LessC style.less style.css

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

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

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

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

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

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

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

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

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

.class1 {
цвет фона: # 2d5e8b;
}
.class2 {
цвет фона: #fff;
цвет: # 2d5e8b;
}
.class3 {
граница: 1px solid # 2d5e8b;
}

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

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

@ color-base: # 2d5e8b;

.class1 {
background-color: @ color-base;
}
.class2 {
цвет фона: #fff;
цвет: @ color-base;
}
.class3 {
рамка: 1px solid @ color-base;
}

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

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

@ font-family: Грузия
@ точка-граница: пунктир
@transition: линейный
@opacity: 0,5

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

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

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

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

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

div {
фон: #eaeaea;
фон: линейный градиент (вверху, #eaeaea, #cccccc);
фон: -o-линейный градиент (top, #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-миксов, которые мы можем часто использовать в таблицах стилей, таких как border-radius, градиенты, тени и так далее.

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

@import “elements.less”;

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

div {
.rounded (3px);
}

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

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

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

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

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

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

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

{
цвет: #fff;
высота строки: 40px;
тень текста: 1px 1px 0px # 283744;
&: hover {
цвет фона: # 000;
цвет: #fff;
}
}

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

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

@ высота: 100 пикселей

.element-A {
высота: @ высота;
}
.element-B {
высота: @ высота * 2;
}

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

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

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

header {
@черный цвет;
background-color: @color;
nav {
  @цвет синий;
background-color: @color;
  {
цвет: @color;
  }
}
}

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

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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *