Какой CSS-препроцессор выбрать?

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

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

Прежде чем мы начнем сравнивать … Если вы не очень много знаете о CSS-препроцессорах, я бы рекомендовал вам сначала прочитать эту статью: Десять причин, по которым вам следует использовать CSS-препроцессор,  чтобы понять, как они могут облегчить вашу жизнь.

Монтаж

Давайте начнем с первого фундаментального шага, установки. И Sass, и LESS построены на разных платформах, Sass работает на Ruby, а LESS использует библиотеку JavaScript .

Установка Sass: для работы Sass необходимо установить Ruby. Это предустановлено на Mac, но в Windows вам нужно будет установить, прежде чем вы сможете начать играть с Sass. Кроме того, Sass необходимо установить через терминал или командную строку.

Есть несколько приложений с графическим интерфейсом, которые вы можете использовать вместо терминала, например ( Scout , compass.app )

Чтобы установить Sass в командной строке, запустите:

$ gem install sass

Или с помощью npm (менеджер пакетов узла):

$ npm install sass

Чтобы запустить Sass из командной строки:

$ sass input.scss output.css

Установка LESS: LESS построен на JavaScript, поэтому установка так же проста, как и привязка библиотеки JavaScript к вашему HTML-документу. Есть также несколько приложений с графическим интерфейсом, которые помогают скомпилировать LESS в CSS, большинство из которых бесплатны и работают очень хорошо (например, CRUNCH , WinLess и LESS.app ).

В качестве альтернативы, простой способ установить LESS на сервер — это npm (менеджер пакетов узлов), например:

$ npm install -g less

Чтобы запустить компилятор из командной строки:

$ lessc styles.less

Затем, чтобы запустить LESS из командной строки, вы можете запустить:

$ lessc styles.less > styles.css

Для более полного списка инструментов для компиляции LESS и Sass, посмотрите  здесь , он охватывает сочетание бесплатных и платных приложений. Существует удобный список инструментов, которые немного облегчат жизнь, когда вы начинаете с LESS или Sass ( 25 инструментов Essential Sass и Less ).

Характеристики

Вот основные функции Sass и LESS:

пререкаться	Меньше
VariablesExtend Примеси гнездование импорт операции функции Loops Partials Компас	VariablesExtend Примеси гнездование импорт операции функции Loops Объединить

Сходства и различия

Из приведенного выше списка функций видно, что разница между Sass и LESS невелика. Оба предлагают хороший набор опций, которые помогут вам написать умный и эффективный код.

Основные различия между LESS и Sass — это переменные, наследование, логика циклов и компас.

Позвольте мне объяснить дальше.

переменные

Переменные используются для предварительно назначенных значений (таких как цвета, поля, отступы и т. Д.) В любом месте таблицы стилей. Это обеспечивает более быстрый доступ, но повторяет внедрение и, что более важно, обновление.

Если вы используете переменную, вам нужно обновить только в одном месте.

В LESS имена переменных начинаются с символа @. В Sass имена переменных начинаются с символа $. В обоих случаях значение закрывается точкой с запятой, что типично для CSS.

Пример:

@myLessColor: #ff0087;p {color: @myLessColor;}__________________________$mySassColor: #ff0087;p {color: $mySassColor;}

Единственная проблема в этом примере — использование Месси символа @ .

Символ @ уже имеет назначенное значение в стандартном CSS, а символ $ — нет.

Это может ввести в заблуждение начинающих, которые еще не знакомы со стандартами языка.

Mixins, наследование и расширение

Mixins в Sass и LESS определяются немного по-разному. В Sass мы используем директиву @mixin, а в LESS мы определяем ее с помощью селектора классов.

Вот пример:

Sass / SCSS

@mixin border-radius ($values) {border-radius: $values;
 }
 nav {
 margin: 40px auto 0;
 width: 760px;
 height: 35px;
 @include border-radius(5px);
 }

МЕНЬШЕ

.border(@radius) {
 border-radius: @radius;
 }
 nav {
 margin: 40px auto 0;
 width: 760px;
 height: 35px;
 .border(5px);
 }

Миксины в Sass и LESS используются для включения свойств из одного набора правил в другой. В Sass этот метод получил дальнейшее развитие с помощью наследования селекторов. Концепция идентична, но вместо копирования всего свойства Sass будет расширять или группировать селекторы, которые имеют идентичные свойства и значения, используя директиву @extend.

Sass / SCSS

.module {
 padding: 10px;
 h3 {
 color: red;
 }
 }.news {
 @extend .module;
 }

Sass / SCSS

.module {
 padding: 10px;
 h3 {
 color: red;
 }
 }.news {
 @extend .module;
 }

Логические заявления

In LESS you can write a basic logic statement using a ‘guarded mixin’ like this:

.boxcolor(@colour) when (lightness(@colour) > 40%) {
 color: @colour;
 background-color: #000;
 .box-shadow(0 3px 4px #ddd);
 }
 .boxcolor(@colour) when (lightness(@colour) < 41%) {
 color: @colour;
 background-color: #fff;
 .box-shadow(0 1px 1px rgba(0,0,0,0.3));
 }

The equivalent in Sass, using if statements would be:

@mixin boxcolor($colour) {
 color: $colour;
 @if(lightness($colour) > 40%) {
 background-color: #000;
 @include box-shadow(0 3px 4px #ddd);
 }
 @if(lightness($colour) <= 40%) {
 background-color: #fff;
 @include box-shadow(0 1px 1px rgba(#000,0.3));
 }
 }

Compass

Both Sass and LESS have extensions for faster and easier web development.

Sass: has Compass on it’s side, which contains a plethora of Mixins to write CSS3 syntax in less time. Compass extends way beyond just CSS3 Mixins. It has added other useful features like Helpers, Layout, Typography, Reset and even Sprite Images. It also has config.rb file where you can control the CSS output and other utilities.

It is an extremely useful all-in-one package for web development with Sass.

LESS: LESS also has several extensions, but unlike Compass (which has everything in one place), they are separated. Each extension is built by different group of developers. This won’t cause problems for seasoned users, but could be troublesome for those starting out.

Here are a few LESS extensions that you might need to include in your project:

• CSS3 Mixins: LESS Elements, Preboot, LESS Mixins.
• Grid: gs, Frameless, Semantic.gs
• Layout: less
• Misc: Twitter Bootstrap

Conclusion

The CSS Preprocessor you choose – Less or Sass – is determined by personal preference.

Depending on the nuances most important to your project, choose the preprocessor that seems best. My personal choice is Sass, simply because of compass and the @ symbol in LESS always bother me. But, I would highly recommend you try both out and decide for yourself.

You can download Less here and download Sass here.

Also, for a more indepth comparison of the 2 languages, here is some further suggested reading.