Java, UX, HTML, CSS, WEB-design

Как использовать препроцессор LESS CSS для более умных таблиц стилей

Краткое описание по статье Как использовать препроцессор LESS CSS для более умных таблиц стилей

Название: Как использовать препроцессор LESS CSS для более умных таблиц стилей . Краткое описание: [ad_1] ⭐ Дмитрий . Дата публикации: 23.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Дмитрий Фадеев

  • 0 Комментарии

Как использовать препроцессор LESS CSS для более умных таблиц стилей

  • 10 минут чтения

  • Кодирование, CSS, Меньше

Краткое резюме ↬

Как веб-дизайнер вы, несомненно, знакомы с CSS, языком таблиц стилей, используемым для форматирования разметки на веб-страницах. CSS сам по себе чрезвычайно прост, состоит из наборов правил и блоков объявлений — что стилизовать, как стилизовать — и он делает почти все, что вы хотите, верно? Ну, не совсем. [Links checked March/06/2017]

Войдите в препроцессор LESS CSS.

Видите ли, хотя простой дизайн CSS делает его очень доступным для начинающих, он также накладывает ограничения на то, что вы можете с ним делать. Эти ограничения, такие как невозможность устанавливать переменные или выполнять операции, означают, что мы неизбежно придем к повторению одних и тех же элементов стиля в разных местах. Не подходит для следования лучшим практикам — в данном случае придерживайтесь DRY (не повторяйтесь) для меньшего количества кода и более легкого обслуживания.

Дальнейшее чтение на SmashingMag:

  • Введение в LESS и сравнение с Sass
  • «Другой» интерфейс: атомарный дизайн с Sass
  • Умные сети с Sass и Susy
  • Расширение в Sass без создания беспорядка

Проще говоря, предварительная обработка CSS — это метод расширения набора функций CSS путем написания таблиц стилей на новом расширенном языке, а затем компиляции кода в обычный CSS, чтобы его могли читать веб-браузеры. Сегодня доступно несколько препроцессоров CSS, в первую очередь Sass и LESS.

Еще после прыжка! Продолжить чтение ниже ↓

меньше css

Какая разница? Sass был разработан как для упрощения, так и для расширения CSS, поэтому такие вещи, как фигурные скобки, были удалены из синтаксиса. LESS был разработан, чтобы быть как можно ближе к CSS, поэтому синтаксис идентичен вашему текущему коду CSS. Это означает, что вы можете использовать его сразу же с вашим существующим кодом. Недавно Sass также представил CSS-подобный синтаксис под названием SCSS (Sassy CSS), чтобы упростить миграцию.

Если он не сломался…?

К этому моменту вы можете подумать: «Ну и что? Почему меня должны волновать эти вещи, и как именно они облегчат мою жизнь как веб-дизайнера?» Я перейду к этому через мгновение, и я обещаю, что это будет стоить вашего времени. Во-первых, позвольте мне уточнить суть этой статьи.

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

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

Поехали!

Установка

Любой препроцессор CSS состоит из двух частей: языка и компилятора. Сам язык — это то, что вы будете писать. LESS выглядит так же, как CSS, за исключением множества дополнительных функций. Компилятор — это то, что превращает этот LESS-код в стандартный CSS, который веб-браузер может читать и обрабатывать.

На самом деле для LESS доступно множество разных компиляторов, каждый из которых написан на другом языке. Есть Ruby Gem, версия для PHP, версия для .NET, приложение для OS X и одно, написанное на JavaScript. Некоторые из них зависят от платформы, например, приложение для OS X. Для этого руководства я рекомендую версию JavaScript (less.js), потому что с ней проще всего начать работу.

Использовать компилятор JavaScript чрезвычайно просто. Просто включите скрипт в свой HTML-код, и тогда он будет обрабатывать LESS в реальном времени по мере загрузки страницы. Затем мы можем включить наш LESS-файл так же, как стандартную таблицу стилей. Вот код, который нужно поместить между <head> теги вашей разметки:

<link rel="stylesheet/less" href="https://www.smashingmagazine.com/stylesheets/main.less" type="text/css" />
<script src="https://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>

Обратите внимание, что я ссылаюсь на сценарий less.js непосредственно с сервера Google Code. С помощью этого метода вам даже не нужно скачивать скрипт, чтобы использовать его. Ссылка на таблицу стилей находится над сценарием, чтобы убедиться, что он загружен и готов для препроцессора. Также убедитесь, что href значение указывает на местоположение вашего .less файл.

Вот и все. Теперь мы можем начать писать МЕНЬШЕ код в нашем .less файл. Давайте продолжим и посмотрим, как LESS упрощает работу с CSS.

1. Более чистая структура с вложением

В CSS мы прописываем каждый набор правил отдельно, что часто приводит к длинным селекторам, повторяющим одно и то же снова и снова. Вот типичный пример:

#header {}
#header #nav {}
#header #nav ul {}
#header #nav ul li {}
#header #nav ul li a {}

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

# header {
  #nav {
    ul {
      li {
        a {}
      }
    }
  }
}

Для простоты я опустил содержимое селекторов, но вы можете видеть, как быстро меняется структура кода. Теперь вам не нужно повторять селекторы снова и снова; просто вложите соответствующий набор правил в другой, чтобы указать иерархию. Это также отличный способ упорядочить код, поскольку он визуально группирует связанные элементы.

Кроме того, если вы хотите предоставить псевдоклассам эту вложенную структуру, вы можете сделать это с помощью & символ. Псевдоклассы — это такие вещи, как :hover, :active а также :visited. Ваш код будет выглядеть следующим образом:

a {
  &:hover {}
  &:active {}
  &:visited {}
}

2. Переменные для более быстрого обслуживания

Обычно мы применяем палитру цветов ко всему веб-сайту. Любой заданный цвет может быть использован для нескольких элементов и, таким образом, будет повторяться во всем коде CSS. Чтобы изменить цвет, вам нужно будет выполнить «Найти и заменить».

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

#header, #sidebar .heading, #sidebar h2, #footer h3, .aside h3 { color: red; }

Чтобы сделать простое изменение цвета, мы сталкиваемся с длинными селекторами, посвященными этому одному цвету. Это некрасиво. LESS позволяет нам указывать переменные в одном месте, например, для цветов бренда, длины границ, боковых полей и т. д., а затем повторно использовать переменные в других местах таблицы стилей. Однако значение переменной сохраняется в одном месте, поэтому внести изменения так же просто, как изменить одну строку. Переменные начинаются с @ и пишутся так:

@brand-color: #4455EE;

#header { background-color: @brand-color; }
#footer { color: @brand-color; }
h3 { color: @brand-color; }

В LESS переменные также имеют область видимости, поэтому вы можете использовать переменные с одинаковыми именами в разных местах; когда они вызываются, компилятор сначала проверяет переменную локально (т.е. есть ли что-нибудь с этим именем, где объявление в настоящее время вложено?), а затем перемещается вверх по иерархии, пока не найдет ее. Например, следующий код:

@great-color: #4455EE;

#header {
  @great-color: #EE3322;
  color: @great-color;
}

… компилируется в:

#header { color: #EE3322; }

3. Повторное использование целых классов

Переменные — это прекрасно, но мы часто повторно используем более одного значения. Хорошим примером является код, который отличается для каждого браузера, например свойство CSS3. border-radius. Мы должны написать как минимум три объявления только для того, чтобы указать это:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Если вы используете много CSS3, то такой повторяющийся код быстро накапливается. LESS решает эту проблему, позволяя нам повторно использовать целые классы, просто ссылаясь на них в наших наборах правил. Например, давайте создадим новый класс для вышеуказанного border-radius и повторно использовать его в другом наборе правил:

.rounded-corners {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#login-box {
  .rounded-corners;
}

Сейчас #login-box наследует свойства rounded-corners сорт. Но что, если мы хотим больше контролировать размер углов? Без проблем. Мы можем передавать переменные в «примеси» (эти повторно используемые классы называются примесями), чтобы получить более конкретный результат. Во-первых, мы переписываем исходный миксин, чтобы добавить переменную, которой мы хотим манипулировать:

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

Теперь мы заменили значения переменной и указали значение по умолчанию в скобках. Чтобы дать миксинам несколько значений, вам просто нужно разделить их запятой. Теперь, если мы хотим, чтобы наш #login-box чтобы иметь радиус границы в три пикселя вместо пяти, мы делаем это:

#login-box {
  .rounded-corners(3px);
}

4. Операции

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

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

@base-margin: 25px;
#header { margin-top: @base-margin + 10px; }

Это дает #header элемент с верхним полем 35 пикселей. Конечно, вы также можете умножать, делить и вычитать, а также выполнять такие операции с цветами, как #888 / 4 а также #EEE + #111.

5. Пространства имен и средства доступа

Что делать, если вы хотите сгруппировать переменные или примеси в отдельные пакеты? Вы можете сделать это, вложив их в набор правил с idподобно #defaults. Миксины также можно сгруппировать следующим образом:

#defaults {
  @heading-color: #EE3322;
  .bordered { border: solid 1px #EEE; }
}

Затем, чтобы вызвать переменную и миксин из этой конкретной группы, мы делаем следующее:

h1 {
  color: #defaults[@heading-color];
  #defaults > .bordered;
}

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

h1 { color: red; }

.sidebar_heading { color: h1['color']; }

Между переменными и методами доступа нет большой разницы, поэтому используйте то, что предпочитаете. Аксессоры, вероятно, имеют больше смысла, если вы будете использовать значение только один раз. Имена переменных могут добавить семантическое значение в таблицу стилей, поэтому они будут иметь больше смысла, когда вы взглянете на них позже. Еще пара вещей, о которых следует упомянуть: вы можете использовать две косые черты, //, для однострочных комментариев. И вы можете импортировать другие файлы LESS, как и в CSS, с помощью @import:

@import 'typography';
@import 'layout';

МЕНЬШЕ CSS Заключение

Я надеюсь, что теперь у вас есть довольно хорошее представление о том, почему существуют препроцессоры CSS и как они могут облегчить вашу работу. JavaScript-версия компилятора LESS, less.js, конечно же, является лишь одним из способов использования LESS. С ним, вероятно, проще всего начать, но у него есть и некоторые недостатки, самым большим из которых является то, что компиляция происходит вживую. Это не проблема для современных браузеров с быстрыми движками JavaScript, но может работать медленнее в старых браузерах. Обратите внимание, что less.js фактически кэширует CSS после его обработки, поэтому CSS не создается заново для каждого пользователя.

Чтобы использовать сгенерированный CSS вместо LESS в вашей разметке, вы можете скомпилировать свои файлы, используя различные другие компиляторы. Если вы используете OS X, я предлагаю попробовать LESS App, настольное приложение, которое отслеживает ваши LESS-файлы на наличие изменений во время работы и автоматически компилирует их в файлы CSS при их обновлении. Ruby Gem имеет ту же функциональность наблюдателя, но его сложнее установить, если вы не знакомы с Ruby (подробности см. на официальном сайте). Существуют также версии для PHP и .NET.

Наконец, LESS — не единственный вариант препроцессора CSS. Другим популярным выбором является Sass, но есть и другие варианты, такие как xCSS. Преимущество LESS заключается в том, что он использует существующий синтаксис CSS, поэтому для начала достаточно просто переименовать ваш код. .css файл в .меньше. Это может быть недостатком, если вам не нравится синтаксис CSS и фигурные скобки, и в этом случае Sass, вероятно, будет лучшим выбором. Существует также фреймворк Compass для Sass, который стоит проверить, если вы используете Sass.

(аль) (сп)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Как использовать препроцессор LESS CSS для более умных таблиц стилей

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

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

Ваш адрес email не будет опубликован.

Кнопка «Наверх»