Как создавать более умные таблицы стилей с помощью LESS CSS
- МЕНЬШЕ CSS - пошаговое руководство
- Шаг 1
- Шаг 2
- Шаг 3
- Шаг 4
- Шаг 5
- Мощные CSS-функции LESS
- Переменные в LESS
- Как определить переменные?
- Как использовать Mixins в LESS
- Вложенные правила в LESS
- операторы
- Использование Mixins с аргументами в LESS (Параметрические Mixins)
- Образец соответствия с миксинов
- Охраняемые миксины
- Встроенные функции LESS
- Импорт файлов
- Заключение
В моем предыдущем блог мы обсудили особенности и преимущества препроцессора 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, чрезвычайно полезны для веб-дизайнеров / разработчиков. Используя вышеупомянутые функции, они могут создавать чрезвычайно мощные веб-сайты, не тратя много времени.
Как определить переменные?