Как стать автором
Обновить

Комментарии 14

less клёвый,
к сожалению на последнем проекте выбран scss, интересно, в нём так можно?
или в postcss
большая часть всего этого есть в sass/scss
Можно, функционально scss не уступует less. Единственный минус в том, что он явно не работает с файловой системой, но на то есть кастомные импорты и функции которые опираются на такого рода поведение(размер изображения и тд) более чем реализуемы, хотя я предпочитал всё же размеры и base64 вставлять через postcss.
extend у scss по крайней мере год назад был намного интереснее нежели чем у less в разрезе работ с media-query. Ну и `@content` директива делает миксины просто сумашедше удобными, правда при определённом усердстве и запутанными.
Ну и не забудем, что у scss есть компилятор на С, что в разы увеличивает его производительность, особенно на больших проектах.
Открыл статью, думал, что статья о команде less из bash. Читаю и не понимаю, откуда в less такой синтаксис. Ко второму абзацу дошло :)
Зашел почитать о Reference Imports, которых даже в sass нету (или не было, может уже и внедрили).
А вообще less клевый, во возможности использую его в качестве основного препроцессора

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


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


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

  .another-class& { ... }
}

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

Добрый день


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

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

В чем смысл использования
.logo {
    width: image-width("../images/logo.png");
    height: image-height("../images/logo.png");
}

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

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

А чуть чуть подробней расскажите пожалуйста.
Ну т.е. если у меня есть
 .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
чтоб не делать это через переменные?
Спасибо.

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


.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);
    }
}
Да, спасибо, я именно это и имел в виду, когда говорил что не понял смысла в конструкции в самой статье. Просто подумалось что не знаю как обращаться непосредственно к полям из описанного класса.
спасибо не один из этих фишек не знал
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.