5 возможностей LESS, о которых вы могли не знать

[zowers]

less клёвый,
к сожалению на последнем проекте выбран scss, интересно, в нём так можно?
или в postcss

[PaulZi]

большая часть всего этого есть в sass/scss

[flops]

Можно, функционально scss не уступует less. Единственный минус в том, что он явно не работает с файловой системой, но на то есть кастомные импорты и функции которые опираются на такого рода поведение(размер изображения и тд) более чем реализуемы, хотя я предпочитал всё же размеры и base64 вставлять через postcss.
extend у scss по крайней мере год назад был намного интереснее нежели чем у less в разрезе работ с media-query. Ну и `@content` директива делает миксины просто сумашедше удобными, правда при определённом усердстве и запутанными.
Ну и не забудем, что у scss есть компилятор на С, что в разы увеличивает его производительность, особенно на больших проектах.

[depdol]

Открыл статью, думал, что статья о команде less из bash. Читаю и не понимаю, откуда в less такой синтаксис. Ко второму абзацу дошло :)

[derSmoll]

Зашел почитать о Reference Imports, которых даже в sass нету (или не было, может уже и внедрили).
А вообще less клевый, во возможности использую его в качестве основного препроцессора

[kahi4]

А мне гораздо больше нравится stylus.

Например, конструкция типа

.some-class {
   &.& {
     display: none;
   }

  .another-class& { ... }
}

В scss сделать можно, но выглядит несколько неинтуитивно и вырвиглазно. И, простите за грубость, на sass задрал тянуть gnu-gcc. Особенно когда у тебя сборщики бегают на каком-нибудь free-bsd (не спрашивайте, такое бывает). Причем, я бы не сказал, что он от этого работает молниеносно. А тот же stylus позволяет удобно использовать себя через js, даже дописывать функции на этом языке.

[var_bin]

Добрый день

Я так понимаю, вы говорите про Partials @import в sass

[franzose]

Да, в SASS data-uri не хватает из коробки.

[Kolbasyatin]

В чем смысл использования

.logo {
    width: image-width("../images/logo.png");
    height: image-height("../images/logo.png");
}

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

[belyan]

Получив размеры изображения, дальше мы можем делать с ними все что угодно – например, пропорционально уменьшить для мобильных устройств. Также эти функции весьма полезны, если мы вставляем картинку как фоновое изображение. В таком случае нам обязательно нужно задать размеры.

[Kolbasyatin]

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

 .logo

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

@logo-width: image-width("../images/logo.png");
@logo-height: image-height("../images/logo.png");
.logo {
    width: @logo-width;
    height: @logo-height;
}

Ну и потом обращаюсь дальше где мне угодно именно к

.mini-logo {
    width: @logo-width/2;
}

и т.д.

А как мне обратиться к полю значения

.logo

чтоб не делать это через переменные?
Спасибо.

[belyan]

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

.image-size(@image, @ratio: 1) {
    width: image-width(@image) * @ratio;
    height: image-height(@image) * @ratio;
}

Затем этот миксин можно использовать, например, так:

.logo {
    .image-size("../images/logo.png");

    @media screen and (max-width: 767px) {
        .image-size("../images/logo.png", 0.5);
    }
}

[Kolbasyatin]

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

[hulki]

спасибо не один из этих фишек не знал