Продолжение темы препроцессоров для CSS, которая для меня намного интереснее всех остальных.

На этот раз остановимся на препроцессоре LESS, ибо было бы странно рассказать о SASS (SCSS) и не упомянуть о не менее популярном его аналоге. Преимуществ у LESS столько же, сколько и недостатков.

Эта статья является моей попыткой на личном опыте познакомиться с LESS Hat и сравнить ее с Compass. Про сам LESS и его синтаксис я рассказывать не буду - это глупо, ибо документация для этого препроцессора прекрасно оформлена и переведена на русский язык на оф. сайте проекта.

Плюсы - этот препроцессор развивается более динамично, это более молодой проект. Синтаксис LESS интуитивно понятный и максимально приближен к CSS, поэтому новички могут освоить его совсем без труда. Документация для LESS гораздо более подробная, с примерами и переведена на множество языков, что облегчает его изучение (для SASS это серьезный недостаток, я сам с этим сталкиваюсь постоянно, когда изучаю Compass).

Ну и последний немаловажный момент, который оказывает существенное влияние на распространенность LESS, это тот факт, что он включен в состав модного и известного фреймворка Bootstrap. То есть, все компоненты этого фреймворка созданы с использованием данного препроцессора. А если учесть, что один из трех китов CMS - Joomla 3 - создана на Bootstrap, то можно только гадать, куда заведет этот процесс.

К недостаткам LESS лично я могу отнести такой факт, как большое время для компиляции (хотя на оф. сайте один из создателей Bootstrap отвечал на вопрос, что им выбран препроцессор LESS как раз из-за высокой скорости компиляции, ибо он написан на языке Javascript). Еще один момент в минус LESS - файл с расширением .less компилируется каждый раз при обращении к нему браузера.

В SASS производится создание файла

1
.css
из
1
.scss
“раз и навсегда”, там не нужно что-то собирать на лету, а он уже готовый подключается в HTML-документ. И последнее - LESS не имеет на сегодня такой продвинутой библиотеки миксинов, как Compass для SASS (SCSS). Точнее - подобная библиотека уже есть и ее название LESS Hat (глупо было бы, если бы такая библиотека не появилась). Однако она уступает по своим возможностям Compass.

Итак, мы уже выяснили, что LESS Hat - аналог Compass под SASS (SCSS). Библиотека LESS Hat была создана командой, которая разработала плагин под Adobe Photoshop с названием CSS Hat. Этот плагин выполняет автоматизированные операции по переводу свойств любого элемента на psd-макете в свойства CSS.

То есть, он старается упростить и ускорить задачу верстальщика, которую тот обычно выполняет вручную. Плагин CSS Hat не бесплатный, цену его я не знаю (это нетрудно узнать) и сам им не пользовался ни разу, поэтому ничего не могу сказать по этому поводу.

Проект LESS Hat на сегодняшний момент является самой большой и популярной библиотекой готовых миксинов под препроцессор LESS. В отличие от плагина CSS Hat, библиотека LESS Hat бесплатная для использования. На момент написания статьи самая свежая версия этой библиотеки - v2.0.7, которую я и забираю со страницы проекта для своих собственных экспериментов. Архивчик .zip весит около 200Kb, что прилично для подобной библиотеки. Но пугаться не стоит - из всего архива нам потребуется только один файлик, а все остальное - это сопутствующая информация. Если распаковать архив, то увидим следующий список файлов и папок:

build\

  mixins\

  .gitignore
  .travis.yml
  bower.json
  Gruntfile.js
  LICENSE
  package.json
  README.md
  README-template.md

Первая папка

1
build
- самая нужная, там находятся два файла
1
lesshat.less
и
1
lesshat-prefixed.less
(не успел разобраться, для чего нужен этот файл), которые являются готовыми к использованию коллекциями LESS-миксинов.

Вторая папка

1
mixins
- также содержит всю коллекцию миксинов, но предназначена для разработчиков. Другими словами, если у вас есть соответствующая квалификация и желание что-то подправить в любом из миксинов, то вам сюда. Все остальные файлы можно смело пропустить, они для работы не нужны.

Теперь создаю шаблон для будущей площадки экспериментов под LESS и LESS Hat. Все как обычно - подключаю файл стилей в формате

1
.less
и файл для автоматической компиляции в CSS на лету -
1
less-1.3.3.min.js
.

Затем вытаскиваю из папки файлик lesshat.less и кидаю его в папочку

1
css
, где также расположен файл
1
style.less
(все до кучи). Кстати, сразу оговорюсь, что все файлы и пример в целом (для этой статьи) у меня крутился под управлением локального сервера XAMPP. С ним у меня отношения сложились с первого раза, в отличие от других популярных серверов, таких как OpenServer, Endels(Denwer), WAMP.

Файл

1
lesshat.less
подключаю к
1
style.less
через директиву
1
@import
. Как говориться в оф. документации к LESS, расширение
1
.less
можно и не указывать, но оставлю “как есть”:

...

/* Imports
------------------*/
@import "lesshat.less";

...

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

1
.border-radius(10)
для создания скругленных углов у блока с помощью CSS-свойства
1
border-radius
. В документации к этому миксину говориться, что он может принимать значения без указания единиц измерения, так как допишет их сам (
1
px
по умолчанию).

Также вспомним функции для работы с цветами в LESS. И воспользуемся еще двумя миксинами из LESS Hat:

1
.background-image()
для создания градиентов у блока и
1
.box-shadow()
для придания внешней тени.

Рабочий файлик

1
style.less
получиться следующим:

/* Imports
  ------------------*/
  @import "lesshat.less";

  /* Variables
  ------------------*/
  @width: 200px;
  @color: #778899;

  /* Block
  ------------------*/
  div{
    float: left;
    margin: 10px;
    text-align: center;
    width: @width;
    height: @width/2;
    .border-radius(10);
  }

  /* Colors
  ------------------*/
  .color{
    background-color: @color;
  }
  .lighten{
    background-color: lighten(@color, 20%);
  }
  .darken{
    background-color: darken(@color, 20%);
  }
  .saturate{
    background-color: saturate(@color, 20%);
  }
  .desaturate{
    background-color: desaturate(@color, 20%);
  }
  .fadein{
    background-color: fadein(@color, 20%);
  }
  .fadeout{
    background-color: fadeout(@color, 20%);
  }
  .spin-plus{
    background-color: spin(@color, 20);
  }
  .spin-minus{
    background-color: spin(@color, -20);
  }
  .gradient{
    .background-image(linear-gradient(to bottom, lighten(@color, 20%) 0%, darken(@color, 20%) 100%));
    .box-shadow(2, 2, 3, lighten(@color, 10%));
  }

Результат работы препроцессора LESS и его библиотеки миксинов LESS Hat показан ниже. Вот это да - работает!

LESS Hat - миксин .border-radius()

Список всех миксинов, доступных в этой библиотеке, представлен в начале файла

1
lesshat.less
, в разделе “TABLE OF MIXINS”. Количество mixin’ов немаленькое (86 штук), но мне кажется, что у Compass оно будет намного больше.

Подробное описание и примеры использования каждого из миксинов библиотеки LESS Hat доступно на GitHub в файле

1
README.md
. Добро пожаловать ознакомиться - там все хорошо описано.

В принципе - больше и сказать нечего. Подключайте и используйте LESS Hat - только так можно освоить и оценить эту библиотеку. Для себя я сделал вывод, что мне пока удобнее работать с SASS/Compass и возможностей у последнего больше, чем у LESS/LESS Hat.

На этом все.


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017