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

1. МЕНЬШЕ CSS - пошаговое руководство
2. Шаг 1
3. Шаг 2
4. Шаг 3
5. Шаг 4
6. Шаг 5
7. Мощные CSS-функции LESS
8. Переменные в LESS
9. Как определить переменные?
10. Как использовать Mixins в LESS
11. Вложенные правила в LESS
12. операторы
13. Использование Mixins с аргументами в LESS (Параметрические Mixins)
14. Образец соответствия с миксинов
15. Охраняемые миксины
16. Встроенные функции LESS
17. Импорт файлов
18. Заключение

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

МЕНЬШЕ CSS - пошаговое руководство

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

Шаг 1

Первым шагом является загрузка всех важных библиотек с их сайта. Вам потребуется текущая версия библиотек LESS, клиентские библиотеки LESS можно загрузить с их Веб-сайт [Текущая версия Less.js v1.7.5].

Шаг 2

Загрузите клиентский компилятор LESS, мы можем использовать любой из клиентских компиляторов LESS, которые популярны среди сообществ веб-дизайнеров / разработчиков (В этом примере мы использовали компилятор LESS, известный как simpLESS). SimpLESS абсолютно бесплатна для загрузки и хорошо работает как с Windows, так и с MAC операционными системами. SimpLESS можно загрузить из следующих Веб-сайт ,

Шаг 3

После установки компилятора simpLESS вы можете просто перетащить папку проекта в окно программного обеспечения simpLESS. Компилятор simpLESS скомпилирует весь ваш код LESS в CSS.

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

<link rel = "stylesheet / less" href = "/ stylesheets / main.less" type = "text / css" /> <script src = "/ js / less-1.7.5.min.js"> </ script >

Шаг 4

Загрузите или используйте любой из существующих текстовых редакторов для редактирования кодов CSS и HTML.

Шаг 5

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

Мощные CSS-функции LESS

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

Переменные в LESS

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

Как определить переменные?

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

Ниже приведены некоторые примеры LESS переменных.

@ myColor1: военно-морской флот; // именованное значение цвета @ myColor2: # 000080; // шестнадцатеричное значение цвета @myStringVar: "с добавленной строкой"; // строковая переменная @myFontSize: 24px; // числовое значение @thinBorder: 4px solid @ myColor1; // многозначная переменная @paddingVar: 15px 15px 15px 35px; // многозначная переменная h1, h2 {color: @ myColor1; } #mypara {font-size: @myFontSize; граница: @thinBorder; padding: @paddingVar; } #mypara: after {content: @myStringVar; }

Функция переменных в LESS может сделать ваш CSS намного проще для чтения и обслуживания.

Как использовать Mixins в LESS

Mixins - очень полезная функция, которую предлагает LESS. Это позволяет дизайнерам / разработчикам определять общие свойства в одном экземпляре, который можно использовать многократно. Миксины объявляются аналогично любому другому классу CSS и могут быть использованы путем включения имени класса. Вот пример использования Mixins в LESS.

.commonTraits {border-radius: 10px; граница: 1px сплошной зеленый; отступы: 10 пикселей; } header {color: # 274D87; .commonTraits; } нижний колонтитул {color: # 3264AF; .commonTraits; }

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

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

.my-hover-mixin () {color: # f90; &: hover {border: 1px solid red; } &: active {border: 1px solid green; }} button {.my-hover-mixin (); } Кнопка выходов {color: # f90; кнопка}: hover {border: 1px solid red; кнопка}: активна {border: 1px сплошной зеленый; }

операторы

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

@color: # f00; @basepadding: 10 пикселей; @basethickness: 1px; #mypara {color: @color + # 00f; рамка: (@basethickness + 11) / 2 сплошной черный; padding: @basepadding @basepadding + 20; }

Использование Mixins с аргументами в LESS (Параметрические Mixins)

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

// используя обычные аргументы .border-radius // класс mixin (@radius: 5px // variable) {-mox-border-radius: @radius; -webkit-border-radius: @radius; -ms-border-radius: @radius; border-radius: @radius; } // использование именованных аргументов со значениями по умолчанию .customBorder (@color: black, @width: 1px) {border: @width solid @color; } // используя параметр @arguments .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: # 000) {-webkit-box-shadow: @arguments; -mox-box-shadow: @arguments; -ms-box-shadow: @arguments; box-shadow: @arguments; } #mypara {.border-radius (10px); .customBorder (синий, 5px); .box-shadow (10px, 10px, 10px, серый); отступы: 10 пикселей; }

Образец соответствия с миксинов

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

.alert (предупреждение) {@color: goldenrod; цвет: @color; бордюрный цвет: темнее (@color, 10%); } .alert (ошибка) {@color: red; цвет: светлый (@color, 10%); бордюрный цвет: темнее (@color, 20%); } .alert (other, @color) {color: lighten (@color, 10%); бордюрный цвет: темнее (@color, 20%); } .alert (@_) {display: block; ширина границы: 2 пикселя; стиль границы: твердый; отступы: 10 пикселей; } @type: error; #mypara {.alert (@type); }

Охраняемые миксины

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

.text3d (@color) when (lightness (@color) = <50%) {color: @color; размер шрифта: 32pt; рамка: 2px сплошная серая; Текстовая тень: 1px 1px 0px затемниться (@color, 5%), 2px 2px 0px затемнить (@color, 10%), 3px 3px 0px затемнить (@color, 15%), 4px 4px 0px затемнить (@color, 20% ), 4px 4px 3px # 000; } .text3d (@color) when (легкость (@color)> 50%) {color: @color; размер шрифта: 32pt; граница: 2px пунктирная серая; Текстовая тень: 1px 1px 0px lighten (@color, 5%), 2px 2px 0px lighten (@color, 10%), 3px 3px 0px lighten (@color, 15%), 4px 4px 0px lighten (@color, 20% ), 4px 4px 3px #ccc; } .text3d (@_) {font-size: 32pt; набивка: 5pt; } h1 {.text3d (# 666); }

Встроенные функции LESS

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

.border-radius (@radius: 5px) {-mox-border-radius: @radius; -webkit-border-radius: @radius; -ms-border-radius: @radius; border-radius: @radius; } // Цветовые функции @color: navy; h1 {color: @color; } h2 {color: lighten (@color, 20%); } h3 {color: lighten (@color, 30%); } h4 {color: lighten (@color, 40%); } #mypara {.border-radius; border-color: hsl (оттенок (@color), 45%, 60%); ширина границы: 2 пикселя; стиль границы: твердый; отступы: 10 пикселей;

Импорт файлов

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

@import "import_me.less";

Заключение

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

Похожие

Комментарии