Пользователь
0,0
рейтинг
18 января 2012 в 17:51

Разработка → LESS: программируемый язык стилей из песочницы

CSS*
Я не люблю CSS. Он простой и понятный. Это движущая сила Интернета, но он слишком ограниченный и им трудно управлять. Пришло время привести этот язык в порядок и сделать его более полезным, используя динамический CSS при помощи LESS.
Объясню свою позицию на примере. Почему бы вместо использования #FF9F94 для получения темно-персикового цвета просто не хранить значение этого цвета в переменной для её последующего использования? Что бы перекрасить сайт достаточно будет изменить значение переменной всего в одном месте и всё.
Другими словами: это будет очень изящно, если мы будем использовать немного программирования и логики в CSS, что бы сделать его более мощным инструментом. Хорошо, что это всё возможно с использованием LESS.

Что такое LESS?


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

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


Есть два способа использования LESS. Вы можете создать LESS файл и конвертировать его при помощи Javascript на лету или скомпилировать его заранее и использовать получившийся CSS файл. Не бойтесь слова «компилировать» (я постоянно его использую), это очень просто.

Используем LESS и Javascript файл

Для начала нужно скачать с сайта LESS Javascript файл и привязать его к страничке как любой другой js скрипт.

<script src="less.js" type="text/javascript"></script>

Затем создадим файл с расширением .less и привяжем его с помощью такого кода:

<link rel="stylesheet/less" type="text/css" href="style.less">

Удостоверьтесь, что вы прикрепили LESS файл перед JS.
Теперь LESS файл будет работать также как и обычный CSS.

Компилируем LESS файл

Хотя этот способ немного утомительней, но иногда он является более предпочтительным. Чтобы не конвертировать код при каждой загрузке страницы можно использовать результирующий CSS файл. Конвертеры: для Windows – Winless и LESS.app для Мака.

Укрощаем мощь LESS


Наконец давайте немного развлечемся – попишем LESS код. Как вы увидите код очень легко читать и понимать, так как используется сходный с CSS синтаксис.

Переменные

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

@header-font: Georgia;
h1, h2, h3, h4 {
    font-family: @header-font;
}
.large {
    font-family:@header-font;
}

В примере выше мы объявляем переменную @header-font и записываем туда значение «Georgia». Теперь мы можем использовать эту переменную всегда, когда мы хотим установить шрифт Georgia. Если же мы решим, что Trebuchet MS лучше подходит для наших заголовков, то нам не нужно будет просматривать весь файл, мы просто изменим значение переменной.
Я нашел отличное применение переменным в определении цветов сайта. В старые добрые времена (которые были не так давно) я использовал что-то вроде этого:

/*
 Colors for my Website
    #ff9900 - Orange - used for links and highlighted items
    #cccccc - Light Gray - used for borders
    #333333 - Dark Black - Used for dark backgrounds and heading text color
    #454545 - Mid Black - Used for general text color
*/
body {
    background: #333333;
    color: #454545;
}
a {
    color:#ff9900;
}
h1, h2, h3, h4, h5, h6 {
    color: #333333;
}

Нет ничего плохого в том, чтобы документировать ваши цвета также как здесь, это хорошая практика, проблема заключается в том, что документация не имеет ничего общего с функциональностью ваших стилей. Если вы решили изменить цвета после 2000 строки кода, а затем передумали на 3567 строчке, то будет чрезвычайно сложно исправить все цвета и документацию.
С LESS мы можем модифицировать и одновременно документировать наш рабочий процесс.

/* Colors for my Website */
@color-orange: #ff9900;
@color-gray_light: #cccccc;
@color-black_dark: #333333;
@color-black_medium: #454545;  
 
body {
    background: @color-black_dark;
    color: @color-black_medium;
}
a {
    color:@color-orange;
}
h1, h2, h3, h4, h5, h6 {
    color: @color-black_dark;
}


Область видимости переменных

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

a {
    @color: #ff9900;
    color:@color;
}
button {
    background: @color;
}

В этом примере LESS не будет сконвертирован из-за ошибки, color не определена для использования внутри элемента button. Если переменная объявлена вне элемента и внутри другого элемента, то она будет доступна только локально.

@color: #222222;
a {
    @color: #ffffff;
    color:@color;
}
button {
    background: @color;
}

Здесь ссылка будет окрашена в белый, а у кнопки будет черный фон.

Переменные в переменных

Если вы кодили на PHP, то вы знаете что можно объявить имя переменной в другой переменной.

@color-chirstmas_red: #941f1f;
@name-of-color: "color-chirstmas_red";
color: @@name-of-color;

Лично я почти не использую это, так как переменные в переменных почти бесполезны без замыканий, но я уверен, что найдутся умные примеры использования этого.

Константы и Переменные

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

Операции

Вы можете добиться невероятно точного контроля с использованием операций в LESS. Идея проста:

.button{
    @unit: 3px;
    border:@unit solid #ddd;
    padding: @unit * 3;
    margin: @unit * 2;
}

Код выше устанавливает переменную unit в 3px. Затем мы устанавливаем это значение в ширину рамки, отступы в три раза больше этой ширины, а поля – в два.
Можно использовать операции умножения, деления, сложения и вычитания. Что бы создать блок с рамкой увеличивающей ширину сторон по часовой стрелке, можно использовать следующий код:

.box{
    @base_unit: 1px;
    border: @base_unit @base_unit + 1 @base_unit + 2 @base_unit + 3
}


Управление цветом

Моя любимая особе6нность LESS – управление цветом. Можно использовать операции для смешивания цветов и несколько специальных функций для работы с цветом.

Цветовые операции

Если вы хотите изменить значение цвета, то можете сделать это вычитанием или добавлением другого цвета.

@color: #941f1f;
button {
    background: #941f1f + #222222;
    border: #941f1f - #111111;
}

Вышеприведённая операция с фоном увеличит каждое значение HEX на 2. Результатом будет “B64141″ — более светлый вариант оригинального цвета. Операция с рамкой уменьшит каждое значение HEX на 1 и выдаст более темный цвет: “830E0E”.
На практике есть немало случаев, когда мы начинаем с базового цвета и нуждаемся в слегка затемненном или осветленном его варианте.

@color-button: #d24444;
input.submit {
    color:#fff;
    background:@color-button;
    border:1px solid @color-button - #222;
    padding:5px 12px;
}

Этот код создает красную кнопку с немного затемненной рамкой. Это частая ситуация и определение лишь одного цвета – большая помощь.
image

Мощь переменных более очевидна в следующем. Если вы захотели изменить цвет кнопки, то изменение значения @color-button на зеленый цвет, поменяет не только фоновый цвет, но и заменит обводку на более темный вариант зеленого.
image

Другое замечательное применение этого – создание градиентов. Я обычно выбираю средний цвет и объявляю градиент исходя из него. Я делаю начало немного светлее и конец немного темнее. Результатом будет приятный переход, что-то вроде этого:

@color: #faa51a;
.button {
    background: -webkit-gradient(linear, left top, left bottom, from(@color + #151515), to(@color - #151515));
    background: -moz-linear-gradient(top,  @color + #151515,  @color - #151515);
}

image


Цветовые функции

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

@color: #3d82d1;
.left_box {
    background:lighten(@color, 20%);
}
.right_box {
    background:darken(@color, 20%);
}

image


@color: #3d82d1;.left_box {
    background: desaturate(@color, 18%);
}
.middle_box {
    background: @color;
}
.right_box {
    background: saturate(@color, 18%);
}

image


@color: #3d82d1;.left_box {
    background: spin(@color, 25%);
}
.middle_box {
    background: @color;
}
.right_box {
    background: spin(@color, -25%);
}

image


Извлечение информации о цвете

Каждый цвет в LESS конвертируется в HSL (hue, saturation, lightness), чтобы обеспечить вам контроль над уровнями каналов. Благодаря этому можно манипулировать цветами более тонко, а также получить информацию о цвете напрямую.

@color = #167e8a;
hue(@color);
saturation(@color);
lightness(@color);

Это может показаться слишком мелочным – зачем нам нужна эта информация, когда мы можем просто ввести HEX значение? Если вы нормальный человек, то вы не сможете с ходу расшифровать HEX цвет. HEX значения отображают RGB спектр: первые два символа контролируют количество красного, следующие два — количество зеленого и последние два – количество синего.
Достаточно очевидно, что #ff0000 это красный, так как это RGB(255,0,0). Тона красного, никакого зеленого и синего. Тем не менее, если вы увидите #1f6b2d, то будет трудно декодировать, что это темно-зеленый. В HSL представлении hue (тон) управляет всем, вы могли бы просто назвать цвет, остальное просто задаст тон (это не совсем верно, но всё происходит именно так).
Имея это в виду, если вы нашли хороший пурпурный цвет как #e147d4, вы очень легко можете отыскать различные цвета с точно таким же оттенком. Скажем, вы хотите создать сливочную, более пастельную версию #e147d4, вот что можно сделать:

@color: #c480bd;
.class {
    background-color: desaturate(spin(@color, 18), 12%);}

Новый цвет будет иметь тот же тон, но другие насыщенность и яркость. Результатом будет #c480bf, к которому гораздо труднее перейти от #e147d4 используя лишь HEX.

Совмещение функций

LESS позволяет использовать функции внутри функций, так, если надо обесцветить и перевернуть (spin) цвет, можно просто сделать так:

@color: #c480bd;
.class {
    background-color: desaturate(spin(@color, 18), 12%);}


Вложенность

Во время написания CSS мы пользуемся каскадностью стилей. Чтобы изменить поля у параграфа только внутри статьи можно использовать следующий код:

article.post p{
    margin: 0 0 12px 0;
}

Нет ничего плохого в таком подходе, но если нам надо также изменить стиль ссылок, цитат, заголовков и т.д. только внутри статьи, нужно будет использовать префикс “article.post” для каждого элемента. Это делает написание кода более скучным и усложняет его чтение.
В LESS мы можем вложить эти правила, что даст нам более короткую и логичную версию наших стилей. Например:

article.post {
    p{
        margin: 0 0 12px 0;
    }
    a {
        color: red;
    }
    a:hover {
        color: blue;
    }
    img {
        float:left;
    }
}

Отступы не обязательны, но они делают код более читабельным. Уровни вложенности не ограничены.

a {
    color:red;
}
p {
    margin:0px;
}
article {
    a {
        color: green;
    }
    p {
        color: #555;
        a {
            color:blue;
        }
    }
}


Примеси (mixins)

Примеси в LESS избавят вас от набора излишнего кода. Вам когда-нибудь приходилось создавать закругленную рамку в которой только верхние углы скругленны?

.tab {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

И так каждый раз… С LESS все это можно изменить, создав примесь. Примеси – элементы многоразового использования, которые можно добавить к любому элементу как правило. И даже не нужно изучать новый синтаксис.

.rounded_top {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.tab {
    background: #333;
    color:#fff;
    .rounded_top;
}
.submit {
    .rounded_top;
}

В вышеприведенном коде мы определили элемент .rounded_top для округления верхних углов. Когда мы добавляем его к любому другому элементу как примесь (смотрите .tab) мы по существу импортируем правила, которые мы создали для него. Благодаря такому синтаксису мы можем использовать любой элемент в качестве примеси.

.rounded_top {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.tab {
    background: #333;
    color:#fff;
    .rounded_top;
}
.submit {
    .tab;
    background: red;
}

Стили у элемента .submit — это скругленные углы наверху, белый цвет и красный фон (значение #333 переопределено).

Примеси с параметрами

Примеси с параметрами, звучит сложно, они решают проблему очень простым способом. В примерах выше вы видели как мы можем определить элемент с радиусом в 6px на верхних углах. А если мы захотим создать элемент с радиусом в 3px? Мы должны объявлять разные примеси для всех пиксельных значений? Конечно же ответ нет, мы должны использовать примеси с параметрами!
Они сходны с функциями, потому что при их вызове можно менять значения. Давайте перепишем пример с border-radius, чтобы посмотреть, как это работает.

.rounded_top(@radius) {
    -webkit-border-top-left-radius: @radius;
    -webkit-border-top-right-radius: @radius;
    -moz-border-radius-topleft: @radius;
    -moz-border-radius-topright: @radius;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius;
}
.tab {
    background: #333;
    color:#fff;
    .rounded_top(6px);
}
.submit {
    .rounded_top(3px);
}

В вышеприведенном коде радиус у .tab равен 6px, а .submit элемент получит значение 3px.

Стандартные значения

Если вы обычно используете одинаковый border-radius, но иногда необходим другой, нужно задать примеси стандартное значение.

.rounded_top(@radius:6px) {
    -webkit-border-top-left-radius: @radius;
    -webkit-border-top-right-radius: @radius;
    -moz-border-radius-topleft: @radius;
    -moz-border-radius-topright: @radius;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius;
}
.tab {
    background: #333;
    color:#fff;
    .rounded_top;
}
 
.submit {
    .rounded_top(3px);
}

В этом примере .tab получит стандартное значение в 6px, а .submit – 3px.

Множественные параметры

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

.radius(@radius:6px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
.button(@radius:3px, @background: #e7ba64, @padding: 4px) {
    .radius(@radius);
    background:@background;
    border: 1px solid @background - #222;
    padding: @padding;
}
.read_more {
    .button(0px);
}

В этом примере класс .read_more отформатирован с отступом 4px, фоновым цветом #e7ba64 и с border-radius рывным 0px.

Используем все аргументы за раз

Еще одна опция при использовании аргументов это их объединение. Сокращённые свойства в CSS имеют множественные значения, записанные одно за другим.

div {
    border:1px solid #bbb;
}

Чтобы задать всем необходимым элементам серую границу, вы можете использовать такую функцию:

.gray_border(@width: 1px, @type: solid, @color: #bbb){
    border:@arguments;
}
div {
    .gray_border(2px, dashed);
}

@arguments это специальное ключевое слово, которое выводит все параметры один за другим в заданном порядке. Результатом вышеприведённого LESS кода будет:

div {
    border:2px dashed #bbb;
}


Параметрические примеси без параметров

Также можно использовать параметрические примеси без параметров. Это используется тогда, когда вам не нужно выводить примесь в CSS, но вы хотите чтобы ее правила применялись к элементу в котором она используется.

.alert {
    background: red;
    color: white;
    padding:5px 12px;
}
.error_message {
    .alert;
    margin: 0 0 12px 0;
}

CSS вышеприведенного кода будет таким:

.alert {
    background: red;
    color: white;
    padding:5px 12px;
}
.error_message {
    background: red;
    color: white;
    padding:5px 12px;
    margin: 0 0 12px 0;
}

Чтобы скрыть класс .alert нужно установить пустой параметр.

.alert() {
    background: red;
    color: white;
    padding:5px 12px;
}
.error_message {
    .alert;
    margin: 0 0 12px 0;
}

Готовый CSS будет следующим:

.error_message {
    background: red;
    color: white;
    padding:5px 12px;
    margin: 0 0 12px 0;
}

В основном это используется для уменьшения размера CSS файла.

Пространство имён

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

#my_framework {
    p {
        margin: 12px 0;
    }
    a {
        color:blue;
        text-decoration: none;
    }
    .submit {
        background: red;
        color: white;
        padding:5px 12px;
    }
}

Начиная работу над новым сайтом, основанным на вашем фреймворке, вы можете добавить связку #my_framework и использовать ее не засоряя пространство имён.

.submit_button {
    #my_framework > .submit;
}

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

#fw_1 {
    p {
        margin: 12px 0;
    }
    a {
        color:blue;
        text-decoration: none;
    }
    .submit {
        background: red;
        color: white;
        padding:5px 12px;
    }
}
 
#fw_2 {
    p {
        margin: 8px 0;
    }
    a {
        color:red;
        text-decoration: underline;
    }
    .submit {
        background: blue;
        color: white;
        padding:8px 20px;
    }
}
.submit_button {
    #fw_2 > .submit;
}


Строковая интерполяция

Строковая интерполяция это еще одно причудливое слово, означающее, что эта произвольная строка может храниться в переменной, а затем использоваться в значении свойства.

@url: "http://mycompany.com/assets/";background-image: url("@{url}/sprite.png");

Это может быть полезно при создании централизованного фреймворка.

Экранирование

Иногда нужно использовать свойства или значения, которые не являются валидным CSS (правила для IE). Вы могли заметить, что в примере про градиенты я не позаботился о пользователях Internet Explorer.
Если вы хотите создать градиент в IE, вы должны сделать что-то вроде этого:

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444');

Этот CSS не валиден, поэтому LESS не скомпилируется. В этом случае вы можете экранировать это значение, что позволит LESS пропустить его.

.button {
    background: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#444444));
    background: -moz-linear-gradient(top,  #666666,  @color - #444444);
    filter:  ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444')";}

Все что нужно сделать, это заключить секцию в кавычки и поставить тильду перед ней. Эта секция не пройдет через LESS процессор и не будет выкинута.

Импорт

Как и в обычном CSS вы можете импортировать файлы. LESS позволяет импортировать CSS и LESS используя следующий синтаксис:

@import "reset.min.css";
@import "framework.less";
@import "widgets";

Первый импорт достаточно очевиден. Он импортирует CSS правила определённые в reset.min.css без обработки их LESS парсером.
Второй импорт вставит содержание framework.less и обработает его как любые другие LESS правила.
Третий импорт работает также как и второй. Если расширение не установлено, то препроцессор считает его LESS файлом.

Комметарии

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

/*
    This is my main LESS file.
    It governs how most of the site looks.
/*
body {
    padding:0px; // This resets the body padding
}


Чего не хватает?


Несмотря на то, что LESS восхитительный, всё же когда вы начнёте использовать его, обнаружатся некоторые недостатки, хотя они не очень беспокоят.
Одна из особенностей, которую я хотел бы видеть, это пре-пре-обработка (согласен, звучит это бессмысленно).Помните, как строки могут быть экранированы, чтобы не проходить через анализатор? Текущий способ не позволяет использовать градиенты с изменяемыми цветами.

filter:  ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20')";

Этот код прекрасно работает, но цвета должны быть жёстко определены. Если строчка экранирована, то переменные не обрабатываются. Было бы неплохо иметь опцию, в которой переменные в экранированных строках обрабатывались до отправки в CSS файл.

Заключение


Как и с любой новой технологией или методом возникает злоупотребление. Помните отражающиеся логотипы и «стеклянные» кнопки на заре Web 2.0 эры?
Вы не обязаны вкладывать все ваши правила, вы не должны создавать переменные для всего или примеси просто для ширины рамки.
Если вы не знаете когда не использовать потрясающую мощь LESS, ваш LESS код станет таким же нечитаемым как обычный CSS и таким же сложным для поддержки. Фокус в том, чтобы знать, когда использовать данные функции и методы, а когда обычный старый CSS лучше.
В дополнение я советую не использовать LESS файл. В этом нет ничего плохого, но нет причины загружать LESS файл и обрабатывать его. Несомненно, скрипт очень быстрый, но я уверен что без него будет быстрее. Я обычно разрабатываю все мои сайты с LESS, беру выходной файл, сжимаю его и использую обычный CSS файл.

Перевод статьи с webdesign.tuts+
Константин @kokis
карма
15,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (136)

  • +6
    Забавная вещица, пригодится, будем следить за её развитием…
    Спасибо что просветили :)
  • –6
    Less и Sass это извращения на мой взгляд. Код которые они генерируют очень большой, сайты грузятся дольше и отрисовуют элементы медленней.

    CSS — очень мощная штука и единственное чего ему не хватает, это наследования.

    Кому интересная данная тема, рекомендую ознакомится с докладами Nicole Sullivan
    developer.yahoo.com/blogs/ydn/posts/2009/03/website_and_webapp_performance/
    www.webstock.org.nz/talks/speakers/nicole-sullivan/css-tools-massive-websites/
    www.youtube.com/watch?v=j6sAm7CLoCQ
    • +4
      Позволю себе не согласиться.
      Заказчику, к примеру, не столь важно, сколько кода генерирует Sass, Less or Coffee, намного важнее для него, что задача выполнена в срок или даже раньше срока (миф, конечно). Такие инструменты, типа Sass and Coffee, позволяют экономить n-количества времени на «рутинной» работе со стилями и javascript'ами.
      Сайты не грузятся дольше и не отрисовуют элементы медленнее, если использовать клиентскую оптимизацию с кешированием и компрессией.
      • +1
        Простите, а с какой рутинной работой справляется Coffee, с которой не справляются JS-фреймворки?
        • –3
          Количество кода.
          • +5
            Плюс-минус одинаковое. Зато нету такой жести:
            "http.createServer (request, response) ->" "http.createServer(request, response) ->" are two ENTIRELY different things in coffeescript Sigh.


            Или, например, из-за отказа от «var» теперь нельзя однозначно сказать, в какой области видимости объявленна переменная. Обсуждение растянулось на десятки комментариев, но нормального решения так и не нашли.

            Но теперь агрументированно скажите, что может дать CoffeeScript такого, что не может дать «JS с фреймворками». А не отказ от пары ключевых слов за счёт уменьшения понятности и предсказуемости кода.
            • +1
              Я не сталкивался с проблемами областей видимости, возможно, пока что.

              А он ничего не должен давать кроме «отказа от пары ключевых слов» – это сильно экономит время. Плюс синтаксис понятен любому рубисту (насколько я понимаю CoffeeScript ориентирован на Ruby-разработчиков, что бы позволить использовать более-менее схожий синтаксис для frontend и backend).

              Насчет понятности и предсказуемости – весьма спорный вопрос и на эту тему можно долго рассуждать.
              • 0
                т.е. тот факт, что «http.createServer (request, response) ->» и «http.createServer(request, response) ->» — это разные вещи и оно очень непоятно — это спорно. А вы сходу скажете, как правильно написать? А сходу обнаружите ошибку подобного рода в тысячах строках кода?
                • +3
                  А еще пропущенным пробелом можно /usr удалить.

                  Для меня CoffeeScript понятен и удобен, мне удобно вместо function(a,b,c) писать (a,b,c) ->, что бы создать класс с наследованием мне нужно написать всего-лишь class MyClass extends MyFirstClass, вместо описания функции с последующим «наследованием» по прототипу и т.д… И самое главное, что я экономлю время на написании кода.

                  Если Вы находите этот инструмент не удобным – просто не используйте его.
                  • +1
                    что бы создать класс с наследованием мне нужно написать всего-лишь class MyClass extends MyFirstClass, вместо описания функции с последующим «наследованием» по прототипу и т.д…

                    Coffee справляется с этим лучше, чем MooTools?
                    Мне просто реально интересно, за что его так любят. Я так и не видел аргументов кроме "->" короче чем «function».
                    • 0
                      а сильно больше и не надо — сахар, чуть слаще и все
                      Я знаю, что грех, но иногда использую => для сохранения контекста + возможность перекинуть if & for в конец строки — радует, реально меньше строчек и часто файл умещается в экран
                      Плюс очень приятные проверки a = obj?.field1?.field2
                      Код получается простой и понятный и после 2-ух недель на coffeescript.org ты четко понимаешь какую конструкцию в js получишь

                      PS Меня в нем бесит if a then value1 else value2, вместо прекрасного a? value1: value2, а так все ок
                  • 0
                    /usr не страшно, его можно востановить, а вот если удалить /home…
                • 0
                  Так ведь очевидно и понятно почему. По крайней мере имея хоть сколько-нибуть опыта написания на CoffeeScript
                  Ошибку очень легко находить, если контролировать генерируемый JS.
                  • 0
                    То есть нужно хорошо знать два языка, чтобы писать на одном?
      • 0
        Если вы пробовали LESS в деле и допустили по ходу дела отпечатку или ошибку в less стиле — весь стиль не будет отработан. Время дебага, как не странно, увеличивается.
    • +6
      Вы знакомы с SASS? Кода он генерирует ровно столько, сколько вы напишете. Если поставить задачу минимум — будет столько же сколько и с CSS. Касательно загрузки сайтов — вообще бред, ведь SASS не LESS, пользователь получает готовый CSS-файл. А CSS, на мой взгляд, очень не хватает целого ряда возможностей. Этот язык может быть гораздо гибче, нежели сейчас. Лично я после перехода на SCSS (диалект от SASS) начал верстать раза в 2 быстрее и качественнее.
      • +1
        C LESS тоже может отдаваться готовый CSS-файл
        • 0
          Я в курсе. Но в этом случае, ИМХО, он слабый конкурент SASS(SCSS). Возможно, ему просто нужно время. Туда уже запилили аналог & в SCSS?
          • 0
            Не знаю. Мне понравился LESS тем, что он ближе по синтаксису на SASS, но холиварить не хочу, т.к. второй даже не пробовал
      • 0
        Также на проекте (веб аппликуха) используем SASS — очень удобная штука (без нее наверное бы не справились), интересно, если бы было сравнение LESS'a i SASS'a.

        А кода генерирует он немного больше, чем простой CSS, но если грамотно подойти — то все будет хорошо.
    • +1
      Чего не хватает CSS? Наследования?
      • 0
        Видимо, имелось в виду нечто подобное функционалу LESS, описанному в пункте «Вложенность» )
        • +1
          Так то оно так, но было интересно такое прочитать. Фундаментальная фраза.
  • +7
    Судя по описанию, LESS по отношению к CSS очень похож на PHP по отношению к HTML когда-то.

    Подозреваю, что вскоре «чистый» CSS будет казаться таким же анахронизмом, как статичный html.
    • +4
      Если только сам стандарт не впитает подобную функциональность. Например, где-то, вроде, был черновик для переменных в CSS. И еще много всего интересного предлагалось в разное время.
      • +2
        Нашел кое-что на Хабре даже: habrahabr.ru/blogs/css/112101/
      • НЛО прилетело и опубликовало эту надпись здесь
  • +11
    Тому, кто уже слышал о LESS не понаслышке, мой каммент может показаться толстым. Но я пишу не для них, а для тех, кто знакомится с ним через эту статью. Так вот, предупреждаю, если вы не будете предварительно «компилировать» свой LESS-код перед окончательным внедрением в сайт (то есть он будет «компилироваться» клиентским браузером), то при отключении пользователем в бразуере JavaScript-а, отвалится и ваш CSS (в невалидной части).
    • +4
      Вообще, использовать клиентский интерпретатор удобно для девелопмента — не надо на каждый чих лезть в косоль. На продакшене же нужно иметь скомпилированную статику.
      • 0
        зачем в консоль, по крайней мере для винды есть WinLESS, эта тулза детектит изменения less файлов и автоматом ребилдит css. Удобно.
        • +2
          Ну его нафиг, чтоб какой-то «беспобедный» демон сидел в памяти :)
    • –3
      У вас хорошо получилось. Первый раз слышу! Буду начинать использовать! Спасибо!
  • +1
    Для большего понимания, не могли бы вы привести пример ситуации, когда надо процессинг CSS делать на стороне браузера, вместо того, чтобы один раз прогнать через скрипт-сборщик на сервере?
    • +1
      Вообще это не советуется, лучше компилировать файл заранее, но при разработке скриптом пользоваться удобнее.
      • +1
        Мне кажется, это единственная конкурентная черта less перед sass. Я не прав? Прошлый раз когда я разбирался с его синтаксисом, мне он показался намного менее продуманным и функциональным, нежели scss.
  • 0
    Так же немного сборок
    github.com/m6tt/less-boilerplate
    github.com/fromrussia/HTML5-Base
  • +2
    Я могу ошибаться, но судя по тому, какой код и какие селекторы у вас представлен в примерах, вы не очень заботитесь об оптимизации. Здесь не особо важно уже, как именно вы пишете код — на CSS или на LESS/SASS. Важно то, что очень часто люди, использующие LESS/SASS, пишут тяжелые селекторы, используют каскадность там, где без неё прекрасно можно обойтись, — в угоду лаконичности кода, причем лаконичности только в исходном LESS/SASS файле — а это уже плохо.
    • 0
      Я тоже могу ошибаться, но учитывая опыт последних нескольких проектов (в которых был использован альтернативный, но решающий ту же задачу проект Compass) могу сказать что заметных на глаз проблем с производительностью при отрисовке страниц не было ни в одном браузере.

      Думаю что если сравнивать потенциальную дополнительную нагрузку для браузера от «тяжелого» селектора и от скрипта — то последняя будет, как правило, больше.

      Зато реализация стилей на LESS (или SASS/SCSS/Compass) позволяет экономить кучу времени на разработке проекта и еще бОльшую кучу сил (и нервов :) ) на его поддержке т.к. позволяет иметь структурированный и разбитый на логические блоки код вместо «спагетти» стилей в которые превращается почти любой изначально хорошо сделанный CSS код после несколько раундов правок и доработок.
      • 0
        В прошлом подобном топике я провёл небольшой эксперимент с компиляцией less файла на лету. В качестве источника был использован страшный жуткий CSS файл в 170 Кб. IE7 грузился порядка 10 секунд, Opera около 20+. Могу скинуть этот файл для сравнения результатов.
        • +2
          По-моему подобной функции (компиляции LESS на клиенте) не место на production, а насколько это удобно при разработке — тут видимо решать каждому самостоятельно.

          У Compass есть замечательная функция, его можно запустить в режиме отслеживания изменений, при этом на каждое изменение .scss файла в проекте от производит инкрементальную (быструю) компиляцию, так что обычно за время пока я переключаюсь из редактора в браузер и нажимаю там F5 — обновленная версия скомпилированного CSS файла уже лежит в каталоге сайта и, соответственно, подгружается в браузер.
          • +1
            Вы плавно переключились на SCSS, который я люто обожаю, а речь шла о LESS :) Правда у меня машина слабее, поэтому просто альт-табнуться мало, надо подождать полторы секунды. Я не пользовался Compass, но полагаю он использует базовую возможность: sass --watch .scss/.css.

            Ещё 1 мелочь. В определённый момент я наткнулся на такое волшебное расширение как CSS Refresh, которое позволяет перегрузить CSS страницы без обновления её самой. Если движок не реактивный, или имеет значение js-окружение, очень помогает. Такое же расширение есть и для chrome.
            • +3
              Да, LESS я не использовал, синтаксис SCSS показался более логичным, а возможностей побольше. Compass — это в принципе просто framework вокруг SASS предлагающий массу готовых решений типовых задач в виде mixins.

              Например:
              — готовая и прозрачная кастомизация CSS3 стилей с подстановкой префиксов специфичных для браузера
              — работа с CSS Sprites (и их автоматическая генерация)
              — и многое другое :)

              К примеру SCSS селектор из приведенного вами (в комментарии ниже) примера SCSS кода:

              .login_key {
              			background: url($image_dir + 'login_key.png') no-repeat;
              			float: left;
              			width: 17px;
              			height: 11px;
              			margin: 3px 10px 0 0;
              		}
              


              можно было бы оптимизировать в Compass как:

              .login_key {
                $image: 'login_key.png';
                background: image-url($image) no-repeat;
                width: image-width($image);
                height: image-height($image);
                float: left;
                margin: 3px 10px 0 0;
              }
              


              … и обрести независимость от возможных проблем из-за изменений размеров картинки. Или еще лучше:

              @mixin image($image) {
                  width: image-width($image);
                  height: image-height($image);
                  background: image-url($image) no-repeat;
                  display: block;
                  overflow: hidden;
                  text-align: left;
                  text-indent: -10000px;
              }
              
              .login_key {
                @include image('login_key.png');
                float: left;
                margin: 3px 10px 0 0;
              }
              
              • 0
                Ух ты. А вот это уже интересно, я думал. что Compass просто обёртка с mixin-ами. Надо будет попробовать.
          • 0
            В less так же имеется watch mode, работает при использовании компилятора на клиенте (less.js). Для включения, нужно добавить #!watch к URL страницы.
    • 0
      Вы не могли бы привести примеры или какие-либо цифры, касательно замедления производительности при не оптимальных css-правилах? Возможно, я ошибаюсь, но мне кажется, что это экономия на спичках на фоне пожара (неоптимизированный js-код, сотни запросов к серверу и т.д.).
      • –1
        Согласен, даже если рассматривать только работу подсистемы стилей в браузере то IMHO задача matching'а CSS правил на DOM nodes по затратам никак не может сравниться с задачей отрисовки DOM элементов страницы с наложенными на них CSS стилями. Т.е. например правило:

        #someElement {
          opacity: ...;
          background-image: ...;
          ....
          /* а можно и CSS 3D transformations и прочие плюшки ... */
        }
        


        будет в сумме явно менее затратно чем:

        .one DIV.two SPAN.three ...  {
          color: green;
        }

    • 0
      Чтобы вам было доступнее — давайте вернемся к ассемблеру?
      несмотря на то что это оверхед, поддерживаемость и читаемость кода далеко не последние вещи.
  • 0
    Как увидел заголовок — тут же всплыл в памяти JSS. Попробую как-нибудь в свободное время разобраться с LESS.
    P.S. Так же вспомнились мои попытки генерировать CSS с помощью PHP :)
  • 0
    Мне хоть и не очень часто приходится верстать, но когда я писал очередную CSS-простыню (особенно -moz, -ms, -webkit...), я как раз мечтал о таком-вот макро-CSS. Крайне полезная вещь, надо будет опробовать.

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

    Кстати, наверное немного отстал от жизни, сейчас существуют средства/фреймворки для таблиц стилей, чтобы избавится от рутины (готовый набор layout'ов, мимимизатор)? Пока такие штуки видел только в виде разрозненных web-сервисов.
    • +8
      …(готовый набор layout'ов, мимимизатор)…

      Опечатка или так задумано? :)
  • –5
    Я считаю, что грамотно составленная html-разметка и css в LESS'е не нуждаются.
    • +2
      Как пример:
      css

      #page{
      margin:0;
      }
      #page h1{
      font-size:160%;
      }
      #page h1 a{
      color:#fff;
      text-decoration:none;
      }

      less

      #page{
      margin:0;
        h1{
         font-size:160%;
         a{
          color:#fff;
          text-decoration:none;
         }
       }
      }

      Без каких либо особых плюшек less можно просто задать структуру наследования селекторов на этапе разработки.
      • +1
        Т.е. вы считаете этот код прекрасно читабельным? А если там будет вложенность в 4-5 уровней? Да черт голову сломит.
        • 0
          В редакторе, если не скупиться на отступы, это выглядит гораздо лучше. К тому же, никто не заставляет вкладывать все 5 уровней, всякие мелочи можно писать как в обычном CSS.
        • 0
          никто не мешает в любой момент выносить вложенность на первый уровень.
          Как же читать код завязанный на «табуляции», например python при таком отношении: «А если там будет вложенность в 4-5 уровней? Да черт голову сломит.».
          Опять же есть скобки которые заменяют(и подчеркивают уровни вложенности) любое современное ide уже давно подсвечивает начальную и завершающею скобку так что с навигацией по коду проблем нет.
        • 0
          5 уровней вложенности — перебор. Хотя всё что до 7 не вызывает никакой путаницы, в отличии от обычной мешанины CSS (живой пример), с которой мне приходилось сталкиваться (почти всегда это совершенно не рефаторабельный код, только подправить правило или переписать всё с нуля). В случае SASS у меня:
          1. полный порядок в коде, живой пример
          2. автоматическая сборка, мне проще работать с множеством файлов (особенно если конечный CSS настолько велик, что Netbeans жутко тормозит). о5 же живой пример.

          Не стоит боятся применять то, что вы ежедневно используете в программировании (модульность, арифметику, инкапсуляцию и т.д.) в CSS. Многие процессы можно значительно упростить и облегчить и тем самым ускорить разработку. Безусловно, некоторое время понадобится на привыкание, но в данном случае оно сродне наркомании. Я просто не представляю себе как я буду писать какой-нибудь проект без SASS, у меня будет ломка с рвотными порывами (шутка). Это очень и очень удобно.

          Не могу не отметить: SASS != CoffeeScript
          • 0
            Мы немного про другую вложенность говорим, ну да ладно. Я не против ..SS-подобных и уже присматривался к ним, но пока все не решусь. Подумаем еще.
  • +1
    LESS был бы хорошим плагином для какого-нибудь редактора, не более. Допустим заменять префиксные свойства. А так я не думаю, что он кардинально ускорит верстку. Вот реальным ускорителем можно назвать ZenCodding :)
    • +2
      Zen Coding. Действительно ускоряет работу и привносит удобства написания маркапа.

      less заинтересовал, как и sass.
  • 0
    Думаю бывают ситуации, когда чистый css будет лучше всяких ухищрений типа LESS.
    • +2
      Можете продемонстрировать пример подобной ситуации?
    • 0
      Абсолютно. Но LESS ведь не навязывает сам себя, можно в .less писать обычный CSS.
    • 0
      Несомненно. Как и ситуации, когда чистый ассемблер будет лучше любых высокоуровневых языков.
      • +1
        Некорректное сравнение. Лучше ответьте на вопрос: «Почему дизайнер не программист». И наоборот. Такое конечно встречается, два в одном, но крайне редко.
        • +1
          Ну тут нужно сначала определиться, кто такой дизайнер. Если это человек с сугубо художественными наклонностями, то его инструмент — графический редактор, CSS он не знает. А если под этим подразумевать верстальщика, который может превратить образы в конкретный CSS код, то он от программиста не так уж далёк. Тем более часто люди занимаются фронтендом — как вёрсткой, так и яваскриптом. А это уже программист.
          Что до языков — разница не так уж велика. Все люди неспособны держать в голове слишком большие объёмы информации сразу, все выигрывают за счёт использования абстракций, всем проще разобраться в небльшом структурированном объёме информации, чем в километровых листингах. Я считаю, что сравнение может и не точное, но вполне корректное.
  • –9
    А чем не вариант использовать классы

    .color_blue {color: #019eed;}
    .color_blue_no_decor {color: #019eed; text-decoration: none;}


    А потом, где нужно его подключать. Мне кажется так проще.

    • +3
      Тем, что .color_blue — само по себе плохое название для класса. Если взять абстрактный header, то в нём могут быть стили из .message, .important-info и т.д. В случае с CSS это значит копипасту, в случае с LESS — повторное использование. То же самое с скруглёнными углами или градиентами в фоне.

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

      Возможно, для проекта из 200-300 правил будет достаточно грамотного Code Guide и следования ему всем файлом, плюс нормальное распределение селекторов по блокам, но уверен, что LESS сильно помогает на действительно больших проектах в тысячи селекторов.
      • –2
        .color_blue — не такое уж и плохое название для класса, как может показаться на первый взгляд.

        Вот приходит к вам дизайн формы, где есть кнопки 3-ёх размеров и 4-ёх цветов. Как вы назовёте семантически классы для них?

        Смотрели исходный код facebook.com? Там семантических названий классов — мм… почти нет. Как думаете, почему?
        • 0
          Да, если это палитра выбора цвета, то color_blue — вполне годное название класса. В примере с формой я бы всё-таки ориентировался на тип кнопок (submit/reset, add/delete и т.п.), а уже в CSS предпочёл бы через перечисление селекторов задать стили сразу для таких-то и таких-то типов кнопок. Кстати, в LESS можно было бы сделать mixin по размерам и цветам и задавать каждому селектору свой набор mixin, без перечисления селекторов и соответственного вычисления пересечения множеств свойств.

          Что касается исходников различных проектов вроде fb или google — не всегда организация кода и успешность продукта идут рука об руку, как пример — 1С-Битрикс — продукт вполне успешный и в чём-то даже более удобный, чем конкуренты, но по части качества кода я бы не назвал его таким же успешным. Ещё больший «шок» я испытал, кода пришлось столкнуться с вполне хорошим движком ShopScript — удобный интерфейс держался на глинянных ногах корявого кода.
        • 0
          И всё же, .color_blue — плохое название. Название класса для элемента в первую очередь должно служить пояснением, для чего этот элемент вообще нужен на странице и что он из себя представляет.

          Возьмем даже ваш пример — берем основным классом для всех этих кнопок класс .header__button, для трёх различных размеров — добавляем классы .header__button_small, .header__button_normal, .header__button_large, .header__button_blue, .header__button_red, .header__button_green, .header__button_yellow. Всё сразу становится понятным, даже для человека, который первый раз видит ваш код.
          • 0
            По личным наблюдениям, чем крупнее проект, тем сложнее соблюсти семантику в классах.

            С другой стороны, CSS вовсе не предназначен для описания семантики документа. Его придумали для изменения визуальной составляющей. Поэтому и прокрадываются визуальные словечки в CSS-классы :)
            • 0
              с SCSS легко, зачастую очень легко. К примеру у вас есть 20 картинок иконок (не в спрайте), каждая иконка соответствует типу файла, можно сделать так:
              @each $name in png, gif, jpeg, ..., txt
              {
                .icon_#{$name} { background-image: url(#{name}.png); }
              }
              

              А теперь спрайты:

              $i: 0;
              @each $name in png, gif, jpeg, ..., txt
              {
                .icon_#{$name} { background-position: left $i; }
                $i: $i - 16px;
              }
              

              Вообще мелочей, которые легко оптимизировать очень много. Дело вовсе не в семантике, а в том, что работать с .color_blue, li.i_25_19_14 и прочим бредом несколько жутковато.
            • 0
              Так классы/id это сущности не CSS, а HTML, именно оттуда они «прокрадываются» в селекторы (не классы) CSS. Я не знаю как думают дизайнеры и юзабилисты, но лично я при проектировании и структуры, и вида страницы сначала думаю: «нужна кнопка делающая то-то» и потом «лучше если она будет большая и синяя», а не «надо сделать большую синюю кнопку» и потом придумываю ей функциональность (семантику).

              Я понимаю, что если вдруг решено часть элементов сделать красными, то присвоить им класс red проще, чем перечислять их полные селекторы в правиле из одного объявления или, тем более, задавать для каждого отдельное правило, да и нагрузка на браузер будет больше. Но это почти ничем не лучше соответствующего style в элементе и на корню рубит главную, имхо, идею использования CSS с HTML- отделение семантики данных от их представления.
              • 0
                Вы хотите сказать, что для того чтобы сделать любую синюю кнопку придётся назначать ей класс ".button-save"? :)

                Так, как, при создании макета именно на этот класс было назначено нужное оформление.
                • 0
                  Если стоит задача «создать любую синюю кнопку», то что-то пошло не так. Должна стоять создать кнопку «сохранить», к которой есть нюанс — она должна быть синей по дизайну. Чаще всего всё проще:
                  <button class="tmp_button contact_form_save_button" />
                • 0
                  Есть такая вещь, как разделение содержания, представления и поведения. Так как в HTML у нас только содержание, то и классы подбираются соответственно содержанию. Благо на уровне представления мы можем практически на каждый элемент в дереве задать свой стиль. Да, в случае использования голого CSS это часто копипаста или куча вспомогательных классов в HTML (возможно они будут иметь семантически верные имена, но если их уже 5-7, это начинает попахивать). И с этой напастью как раз и помогает бороться LESS. Да, в выходящем CSS это всё вновь разворачивается до копипасты, но, во-первых, gzip, а во-вторых, время разработки существенно экономится за счёт понижения сложности.
  • +2
    Так есть же такая штука на РНР: lessphp. Её прелесть в том, что не надо ставить никаких программ и т.д. — просто в IDE жамкнуть run less.php и всё. Содержимое less.php (для тех кому лень копаться с документации):
    chdir(dirname(__FILE__));
    include 'lessphp/lessc.inc.php';
    
    try {
        lessc::ccompile('basic.less.css', 'basic.css');
        print "<p>success: <a href='basic.css'>basic.css</a></p>\n";
    
        lessc::ccompile('global.less.css', 'global.css');
        print "<p>success: <a href='global.css'>global.css</a></p>\n";
    }
    catch (exception $ex) {
        exit($ex->getMessage());
    }
    
    
    • 0
      А он уже в полном объёме поддерживает LESS? Просто когда я его щупал, поддержка LESS была очень ограниченной, в итоге пришлось пользоваться less-компилятором на node.js.
  • +2
    Я так понимаю, SASS, LESS и прочие могут быть реализованы браузерами как иной тип таблиц стилей.
    Стандарт, по крайней мере позволяет указать иной тип стилей: LinkStyle Interface
    • 0
      Да, господь с вами! 2.1-то еле как начали все поддерживать в полном объеме. Не до жиру…
      • 0
        Хотел бы вам возразить, что не в полном, но не удалось вспомнить пример.
        Ну по некоторым возможностям браузеры давно дают фору всяким конвенциям w3c, тот же хромовский getCaretRangeFromPoint() чего стоит. Может и нашлась бы группа энтузиастов-апологетов LESS )
  • +1
    а как вам
    style.css.php
    style.css.aspx
    style.css.pl

    можно же любой файл прогнать через стандартный интерпретатор.
    • 0
      А какой смысл? Неужели:
      #module_<?php $module ?> {
        color: <?php colorable( '#232323', '+', 'red' ); ?>
      }
      

      удобнее чем:
      #module_#{$module} {
        color: #232323 + red;
      }
      
      • 0
        у первого варианта есть куча плюсов:
        1. всем понятно что там происходит (уж пхп то ...)
        2. нет непонятной прослойки с неизвесной поддержкой
        3. у клиента всегда будет обычный CSS без фокусов

        у второго синтаксический сахар? что бы ктото лишний раз уточнил «что это за такой странный CSS ?»
        • +1
          Если бы я встретил такой CSS-код на php, скорее всего удалил бы не раздумывая. Примерно того же мнения я и о php-шаблонах. Бежать, бежать, выжигая огнём. Есть цивилизованные и удобные решения поставленных задач. Предложенное вами решение годится разве что в качестве заплатки на давно заброшенный проект, в котором, ВНЕЗАПНО, потребовалась какая-нибудь незапланированная ерунда. Представьте в какой ужас превратится ваш php-css файл при попытке достичь хотя бы этого.

          По поводу пунктов 2 и 3. Вы имеете представление что такое SCSS или LESS? Или комментируете не глядя?
          • –1
            если вам потребовалась какая то логика в CSS наверно что то не так с проэктом :) что такое LESS я посмотрел. любопытно интересно но не более.
            • +1
              CSS это описание представления, а логика представления вполне имеет право на существование и, желательно, должна быть отделена от другой логики.
  • 0
    Комментарии всё же закрываются через "*/" ) А не то как скомпилится у пользователя ненароком половина CSS в комментариях…
  • +1
    > Я не люблю CSS. Простой и понятный.
    facepalm.png

    Т.е. тут уже копипаст с гугл-транслэйта одобряется? Не торт.
    • 0
      Я не люблю гугл-транслейт. Хотя это я что-то не очень по русски написал. Кстати вышеупомянутый инструмент сделал бы это так: Мне не нравится, CSS. Просто и понятно. Это заставляет мир вращаться в Интернете, но язык носит ограничительный характер и трудно управлять.
  • +1
    А где лямбда-функции? Подозреваю, что это не настоящий язык.
  • +1
    Вот, набросал давненько вотчер, может кому пригодится
    github.com/studentIvan/Perl-LESS-Watcher
    • 0
      Кстати, ещё можно через bash отслеживать изменение файла(ов) и компилировать налету в css.
      Нужна утилита inotify, забрать можно тут — https://github.com/rvoicilas/inotify-tools/
      Вот небольшой примерчик скрипта:
      #!/bin/sh
      # перехватываем событие изменения файлов less и компилируем наш основной less файл в css
      while inotifywait -e modify ./*.less; do
          lessc -x ./style.less > ./../css/style.css
      done
      
      • 0
        Да, но это не кроссплатформенно
  • 0
    Странно, что не работает, если открывать, например, тестовый .html-файл локально с диска.
    А вот если положить его в тот же Dropbox и открыть по публичному адресу — всё работает нормально.
  • +2
    Потребность в подобных инструментах в основном из-за недостаточных знаний CSS, и не достаточного опыта в верстке.
    Если правильно группировать селекторы, то переменные не нужны, все и так будет в единственном месте.

    Тем не менее, время разработки конечно позволяет экономить — это, часто очень критично.
    • 0
      Представьте себе 150 разных элементов с использованием одного фирменного оттенка голубого.
      А потом сгруппируйте так, чтобы было просто его изменить на салатовый.
      Без переменных.
      • 0
        Часто группирую такие места, и пока рекорд 34-ре элемента.
        А вообще редко бывает необходимость больше 15-20 — вполне приемлемо и читаемо.

        А вот когда такой избыток элементов, что аж 150500 — это явно не тривиальный случай.
  • +1
    По моему мнению SCSS намного мощнее. Как минимум мне не хватает экстендов.
    • 0
      Хотите mixin — пишите его.
      За вас ваш офигенно крутой mixin никто не напишет.
      • +1
        мне не нужен mixin, мне нужен @extend как в SCSS. Что тут не понятного?
        • –1
          На мой взгляд те же яйца, вид сбоку.
          Общее оформление у разных элементов — делайте его общими mixin'ами.
          Заодно позаботьтесь о том, как это потом править и искать, в каком именно куске объявлено то или иное свойство.
          • +1
            Если для меня есть разница, то наверное у меня была ситуация для которой не подходили @mixin. Если на ваш взгляд это одно и тоже, то удачи вам, пользуйтесь тем что есть.
            • –1
              @extend означает полное копирование стилей одного селектора в другой.
              mixin — это явное вынесение группы правил
              В обоих случаях мы избавляемся от дублирования кода при разработке.

              На мой взгляд mixin более управляемый.
              @extend генерирует меньше кода, но он разбросан по группе селекторов.
              • +1
                Спасибо за то, что ты обьяснил мне это, но я и так это знал.
      • 0
        Вопрос, в less добавили аналог & в SCSS?
        • +1
          Он там сразу был.

          lesscss.org/#-nested-rules
          Notice the & combinator—it’s used when you want a nested selector to be concatinated to its parent selector, instead of acting as a descendent. This is especially important for pseudo-classes like :hover and :focus.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      О, спасибо за наводку, искал что-нибудь подобное для убунту.
  • +1
    Программируемый?
    Извините, но он точно не программируемый. Пока что, там нет никакой логики, хотя иногда и хочется.

    Возможно я самый большой фанат Less в этом треде, планирую делать третий доклад на эту тему.
    www.youtube.com/watch?v=X-Lfi5ASAmk
    Тут специально два примера, для чего стоит использовать LESS именно на клиенте.
    • 0
      А @if, @for, @each и прочее там планируется, или как?
      If'ы в scss бывает, использую.
      Циклы не сказать, чтобы часто было нужно, но один раз (один раз где-то за полтора года моего использования sass (теперь уж scss)) мне пригодился @each.
      • 0
        Увы, никакой логики пока нет.
      • +2
        Извиняюсь, логика начала появляться.
        Ещё вчера ничего такого в официальной документации не заметил, а сегодня вот оно есть.
        lesscss.org/#-pattern-matching-and-guard-expressions
      • 0
        Кстати @if очень хорошая штука для реализации mixin-ов с утиной типизацией (или как там она называется, ака jQuery).
  • 0
    Хорошая вещь и даже полезная, но меня расстраивает дебаг кода. Допустим, открываем сайт в браузере и смотрим: строка 976, надо для .people .men .kolya добавить/подфиксить какое-то свойство. Открываем less/sass файл, достаем компас и начинаем искать .people, потом внутри него .men (а он ведь может быть и внутри .ussr), и дальше уже .kolya. И все это на какой-то стопиццотой строке. Ну, вы поняли что я хотел сказать. Может, это я что-то не так делаю и все гораздо проще? Пока склоняюсь к чистому CSS, не смотря иногда на жуткую нехватку плюшек less/sass…
    • 0
      Если вам приходится искать правило по полнотекстовому поиску, вы что-то делаете не так.
      Разделяйте на файлы. Группируйте правила, тогда не придётся долго искать.
      Поверьте моему опыту, это крайне низкая плата за все остальные бонусы.
      • 0
        хотя да, все правильно, можно разбивать на файлы, а потом просто сливать/сжимать все в один на продакшене
        • 0
          Если файлы собираются через @import, то серверный less сделает это за вас.
          Если на клиенте, то всё равно результат будет закеширован и лишних запросов не будет.
          • 0
            Не, файлы собираются и сжимаются при билде (.net projects) неплохой штукой YUI Compressor.

            @import не хочу
            • 0
              Не не не, Девид Блейн.
              Именно @import
              Потому что так переменные и mixin'ы можно вынести в отдельные файлы. В противном случае LESS их просто не увидит.
              Что касается сжатия, Less отлично обрабатывает сжатые файлы, единственно следует быть осторожным с вычитанием и комментариями //. А компрессор должен уметь обработать @import сам, это ж стандартная директива из css.

              В общем, посмотрите видео с моим докладом, если что непонятно, отпишите там в комментах, я в следующем докладе учту.
            • 0
              Если вы пришли к сжатию css файлов (и скорее всего js), то использование less или sass легко впишется в вашу автоматизацию. В частности сборка единого css файла будет проведена именно ими.
          • 0
            Если файлы будут собираться на клиенте, то может случиться адовый ад. К примеру, у меня их под 70-80. Объективных причин уменьшать их количество нет. Я полагаю что от клиентской загрузки стоит отказаться даже в более простых ситуациях, просто исходя из того, что сие не есть хорошо.
    • 0
      В SCSS есть плагин для Firebug, зовётся firesass. Позволяет указывать в CSS поле в файрбаге scss-файл и номер строки, отвечающей за сие правило. К сожалению в файрбаге выше 1.9.2 (или даже чуть ниже) пока не работает. Раньше пользовался, потом «проапгрыжился» и пришёл к 1-му простому выводу — такой функционал (необходимость знать номер строк и файл) нужен именно для CSS файлов в виду ряда причин. В SCSS файлах этот функционал весьма вторичен. Пара причин:

      1. К примеру, правило #feedback .js_link {} однозначно располагается в файла modules/feedback.scss, в то время как в CSS-случае оно было бы в общем файле style.css (не делать же 999 css файлов издеваясь над браузером пользователя).
      2. В 99% случаев мне нужно что-то изменить в CSS правиле именно тогда, когда я только что работал с нужным мне SCSS кодом. Проще говоря мне достаточно нажать Alt-tab. Ничего искать не нужно.
      3. В редких запущенных случаях я просто прохожусь поиском по файлам в папке где размещены scss файлы. В Netbeans это занимает от силы 2-3 секунды.

      В общем — номер строки и имя файла полезный функционал, но имея под рукой такой огромный и удобный арсенал, необходимость в этой функции сильно уменьшается. Про less файлы я такого увы сказать не могу, хотя бы исходя из того, что вижу им единственное применение — компиляция в браузере пользователя, а это подразумевает под собой ряд неудобств, главное из которых — 1 здоровенный less файл.
  • 0
    Мне одному Less CSS напоминает чем-то Erlang?
  • 0
    очень познавательно — спасибо
  • 0
    Решил попробовать, очень понравилось, спасибо за перевод.
  • 0
    Пользовался LESS примерно с месяц или два, пока не нашел Stylus с его прозрачными примесями и свободой слова.
    Сайт препроцессора: learnboost.github.com/stylus/
    Большой набор расширений: github.com/visionmedia/nib (в том числе и лекарсво от префиксов)
    Мой набор примесей для избавления от префиксов: gist.github.com/1736384 (меньше кода, за счет этого можно быть уверенным в количестве префиксов)
    Компилятор Stylus: incident57.com/codekit/ увы, пока лишь для Mac OS Lion. кто найдет для Snow Leopard или Windows – будет героем.
  • 0
    Ерунда полная. Чтобы изменить моментально во всем коде к примеру цвет есть команда find and replace 1 сек и все изменено. Если у вас код растягивается на 3000 строк дж на крупных проектах, то скорей всего вам не стоит заниматься версткой. Фанатики которым уже просто нечего делать. Пишите весь код в одном CSS файле и будет вам счастье, не занимайтесь ерундой.
    • 0
      то есть бутстрап создан фанатиками которым уже нечего делать? Попробуйте прежде, а потом говорите. А если попробовали — еще раз попробуйте, видимо не распробовали.
  • 0
    Автор, параметры в примеси для старичков IE не проблема если воспользоваться обычным стринго-реплейсом:

    .gradient(@start, @stop) {
      ...
      filter: e(%(
            "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",
            @start,
            @stop 
      ));
    }
    
    • 0
      To один способ только что нашел на StackOverflow:
      .gradient(@start, @stop) {
        ...
        filter: ~"progid:DXImageTransform.Microsoft.gradient(
                      startColorstr='@{start}', 
                      endColorstr='@{stop}', 
                      GradientType=0)";
      }
      

  • 0
    В дополнение я советую не использовать LESS файл. В этом нет ничего плохого, но нет причины загружать LESS файл и обрабатывать его. Несомненно, скрипт очень быстрый, но я уверен что без него будет быстрее. Я обычно разрабатываю все мои сайты с LESS, беру выходной файл, сжимаю его и использую обычный CSS файл.

    Я использую LESS файлы в Node.js используя lessMiddleware. Достаточно подключить
    var express = require('express')
      , ...
      , lessMiddleware = require('less-middleware')
    var app = express();
    app.configure(function () {
      ...
      app.use(lessMiddleware(__dirname + '/public'));
      app.use(express.static(path.join(__dirname, 'public')));
      ...
    });
    
    и подключать в основной проект как обычный файл с расширением .css
    link(rel='stylesheet', href='stylesheets/css.css')
    
    Все файлы в папке __dirname + '/public' с расширением .less будут компилироваться в .css
  • 0
    а можно некропостинг? хотел уточнить:
    >>Пространство имён
    >>Также это отличный способ сделать возможным быструю смену и доработку тем.
    >>для смены шаблонов на лету, вы можете поместить их все в один LESS файл, используя связки
    #fw_1 {… }
    #fw_2 {… }

    .submit_button {
    #fw_2 > .submit;
    }

    как же мы такое будем менять на лету, если у нас таких submit_button, да любых других селекторов, явно указывающих какая сборка, будет много?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.