HostDB.ru
 
Логин

Пароль



или войдите через соцсеть:
провайдеров: 174, переходов на сайты провайдеров сегодня: 18
Best-Hoster.ru

Голосование

Сколько дней тестового периода VPS должны предлагать хостеры?







Анекдот




Предложить идею


- Как перестать бояться и перейти на LESS

Как перестать бояться и перейти на LESS

LESS - динамический язык стилей, расширение CSS. Написан на JavaScript, поддерживает семантику CSS.
В данной статье мы не будем убеждать вас в необходимости массового перехода на LESS или описывать его преимущества перед прочими CSS-препроцессорами вроде SASS или Stylus, мы просто разберем "почему" и "как". Статья предназначена для тех, кто только собирается осваивать LESS, и написана максимально простым языком.

Почему?

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

Переменные

Тут всё просто - мы можем записать значение или строку в переменную, которую потом можно использовать в любом месте документа. Полезно для "глобальных стилей" вроде основного цвета текста, типа шрифта, цвета фона, подложки и т.п.
Простой пример:
@fontFamily: Arial, sans-serif; @fontSize: 12px; @bgColor: #444;

body { font-family: @fontFamily; font-size: @fontSize; background: @bgColor; color: @color; } textarea { font-family: @fontFamily; color: @color; }

Также можно объявить переменную внутри класса, в этом случае ее можно использовать только внутри этого класса.
.example { @whiteBorder: 1px solid #FFF; border-top: @whiteBorder; border-bottom: @whiteBorder; }

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

В CSS для указания наследования нужно было писать длинные строки, дублировать их для события hover.
Например:
.example { background: #FFF; border: none; } .example .list { position: relative; } .example .list div { display: inline-block; } .example .list div a.exampleLink { color: #FFF; } .example .list div a.exampleLink:hover { text-decoration: none; } .example .list div a.exampleLink:active { color: #444; }

В LESS это решается вложенностью, просто указанием одного класса внутри другого.
.example { background: #FFF; border: none; .list { position: relative; div { display: inline-block; .exampleLink { color: #FFF; &:hover { text-decoration: none; } &:active { color: #444; } } } } }

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

Примешивания (mixins)

С помощью примешиваний можно включить все стили класса в другой класс, указав название примешиваемого класса как одно из свойств. Также можно передавать в этот класс аргументы (вроде функций в программировании), что позволит нам использовать один шаблон по-разному. Очень полезно для кроссбраузерных свойств CSS3. Рассмотрим примеси на "живом примере". Есть задача описать стили для кнопок действий в нашем приложении, они должны быть разных цветов, с градиентом, тенями и скруглением углов.
Для начала создадим классы-mixins для свойств CSS3.
.borderRadius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .boxShadow (@x: 0, @y: 0, @blur: 1px, @color: #444) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; -o-box-shadow: @arguments; box-shadow: @arguments; } .gradient (@colorStart, @colorEnd) { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, @colorStart), color-stop(1, @colorEnd)); background: -moz-linear-gradient(center top, @colorStart 5%, @colorEnd 100%); background: -webkit-linear-gradient(center top, @colorStart 5%, @colorEnd 100%); background: -o-linear-gradient(center top, @colorStart 5%, @colorEnd 100%); background: -ms-linear-gradient(top, @colorStart 5%, @colorEnd 100%); background: linear-gradient(center top, @colorStart 5%, @colorEnd 100%); filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='(@colorStart)', endColorstr='(@colorEnd)')"; background-color: @colorStart; }

В класс "borderRadius" мы можем впоследствии передать любое значение, если же мы просто укажем класс, но не будем ничего передавать, то значение будет равно 5px.
В классе "boxShadow" мы можем использовать переменную @arguments, она записывает все свойства класса в строку. Таким образом, запись
-webkit-box-shadow: @arguments;

в нашем случае, была бы равносильна
-webkit-box-shadow: @x @y @blur @color;

В классе "gradient", кроме всего прочего, мы указываем свойство "filter" для старых IE, обратите внимание, что для подобных свойств мы передаем значение как строку (~"......"), иначе LESS при компиляции выдаст нам ошибку.
Далее опишем класс "button", который в дальнейшем будем использовать для создания кнопок.
.button (@buttonColorStart, @buttonColorEnd, @buttonColor: #fff) { .borderRadius; .boxShadow(0,0,7px,#DDD) .gradient(@buttonColorStart,@buttonColorEnd); text-shadow: 1px 1px 1px #777; color: @buttonColor; text-decoration: none; border: 1px solid #e5e5e5; padding: 8px 0; cursor: pointer; &:active { .gradient(@buttonColorEnd,@buttonColorStart); } &:hover { .boxShadow(0,0,7px,#999); } }

В этот класс мы будем передавать цвета для градиента и цвет текста кнопки. Мы сразу примешиваем классы "borderRadius" (ничего не передаем, оставляем по умолчанию 5px), "boxShadow" (передаем аргументы, отличные от прописанных по-умолчанию) и "gradient" (передаем цвет фона). Также описываем стили для псевдоэлементов :hover и :active
Теперь осталось только создать и описать классы, которые мы будем давать элементам-кнопкам.
.blueButton { .button(#9fc2d2,#769cad,#FFF); } .greenButton { .button(#2ecc71,#27ae60,#FFF); } .redButton { .button(#e74c3c,#c0392b,#FFF); } .yellowButton { .button(#f1c40f,#f39c12,#FFF); }

Готово :)

Функции и операции

Не очень часто используемый в повседневной жизни, однако достаточно полезный раздел.
Мы можем оперировать значениями или переменными: складывая их, вычитая или умножая. В каких случаях это может пригодиться? Например, при использовании левого фиксированного меню.
@leftMenuWidth: 100px; .leftMenu { width: @leftMenuWidth; height: 100%; position: fixed; } .content { margin-left: @leftMenuWidth + 20; }

Таким образом, отступ у блока с классом "content" будет равен "ширина меню + 20px".
Более популярный пример это операции с цветом. В некоторых случаях может понадобится сделать цвет фона или текста темнее или светлее (например, при наведении). Этого можно добиться путем сложения или вычитания цветов:
@exampleColor: #9b59b6; .example { // увеличиваем значение HEX на 1 // получаем более светлый оттенок color: @exampleColor + #111; &:hover { // уменьшаем значение HEX на 1 // получаем более темный оттенок color: @exampleColor - #111; } }

Или с использованием встроенных в LESS функций:
@exampleColor: #9b59b6; .example { // осветляем цвет на 10% color: lighten(@exampleColor, 10%); &:hover { // затемняем цвет на 10% color: darken(@exampleColor, 20%); } }

Есть также функции saturate, desaturate, spin и др. В этой статье мы не будем освещать их все, наше дело - донести суть :) Со списком функций и способами применения вы можете ознакомиться на оффициальном сайте.

Как?

Файл со стилями можно подключить в документ несколькими способами.
На стороне клиента

  • Скачиваем последнюю версию less.js
  • Подключаем таблицу стилей .less при помощи указания rel со значением “stylesheet/less”
  • Подключаем less.js
  • Важно! Подключаем файл со стилями ДО подключения скрипта

На стороне сервера

  • Скачайте и установите Node.js и менеджер пакетов npm
  • Установите пакет less с помощью npm: $ npm install less
  • Скомпилировать файл CSS: $ lessc styles.less
  • Cкомпилированный CSS будет выведен в stdout, и его можно будет перенаправить в файл с именем по вашему выбору: $ lessc styles.less > styles.css

Предварительная компиляция

Используя онлайн-сервисы или десктопные программы-компиляторы, можно заранее скомпилировать файл CSS, который в дальнейшем подключить в документ.
Следует заметить, что при разработке небольших сайтов с файлом стилей размером до 1000 строк, вполне можно (но вряд ли нужно) пользоваться js-библиотекой и компилировать LESS на стороне клиента (каждый раз при загрузке страницы), процесс достаточно недолгий. В идеале - использовать Node.js.

Советы и личные наблюдения

Не злоупотребляйте вложенностью, 3-4 уровня вполне достаточно, используйте уникальные классы или id-селекторы, разбивайте большие блоки стилей.
Стили для объекта по селектору "id" следует писать вне вложенных правил, это сокращает количество строк.
Не указывайте селекторы через запятую, используйте вложенные правила, это сокращает количество строк.
Уделяйте внимание структуре файла стилей. Комментируйте код (обратите внимание, что комментарии, начинающие с "//", будут удалены при компиляции, тогда как "/ /" такие комментарии будут перенесены в CSS-файл). Разделите структуру на несколько частей (например: глобальные переменные, классы-mixin с кроссбраузерными стилями CSS3, cтили для основных тегов и все остальные).
В описании конкретного класса группируйте классы-mixin и стандартные CSS-правила - улучшает читаемость. Редактировать такой код будет легко и приятно.
Переменные и классы-mixin не отображаются в результирующем файле. Если вы описываете два или более классов с почти одинаковыми стилями, вынесите повторяющиеся правила в класс-mixin, впоследствии их будет легче править.

Итог

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

Полезные ресурсы:



Опубликовано: 01.10.2014
Просмотров: 1293
Автор: NetAngels
Источник: http://www.netangels.ru/

+1
Версия для печати

Мой комментарий

Ваше имя*:
Email:
Комментарий*:
Зарегистрироваться автоматически: Вы будете зарегистрированы на сайте автоматически при добавлении комментария. Обязательно заполните поле Email для этого.
Сумма чисел 6 и 19*:            


HSSD-1 + Защита от ДДоС
2000 Мб на диске, неогр. трафик.
80 руб.
Хостинг провайдер WebStix
Восток-1
3000 Мб на диске, неогр. трафик.
110 руб.
Хостинг провайдер SPRINTHOST.RU

Заявка на хостинг
Провайдеры сами пришлют
вам свои предложения ;)

Хостинг быстрее быстрого от Fozzy

Проверка IP

Ваш IP ....... 54.162.19.123 ← Проверить
Страна ..... не определена

Проверка домена (+whois)













Выбрать все
Расширенный поиск (более 50 зон)

Traceroute

Начало маршрута



Акции провайдеров

Все акции хостинг провайдеров


хостинг домишко