14.06.2017 12:27
belyan 14 9400 Источник

LESS


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


Функция data-uri


Часто бывает удобно включить внешний файл, например, иконку, непосредственно в стили с помощью схемы data:URI. Плюсы такого способа всем известны и я не буду их перечислять. Есть множество способов преобразовать файл в данный формат: это онлайн-конвертеры, плагины для Grunt и Gulp, модуль для Node.js и даже консольная утилита. Однако в LESS уже встроена функция для такого преобразования, поэтому нет необходимости дополнительно что-то настраивать.


LESS


.icon-add {
    background-image: data-uri("../icons/add.svg");
}

CSS


.icon-add {
    background-image: url("data:image/svg+xml,...");
}

Функции image-width и image-height


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


LESS


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

CSS


.logo {
    width: 198px;
    height: 125px;
}

Функции для смешивания цветов


Иногда дизайнер создает новые цвета путем смешивания двух существующих цветов из фиксированной палитры. При этом разработчик при переносе цвета в CSS, как правило, копирует его пипеткой и вставляет в формате #RRGGBB, разрушая при этом замысел дизайнера. А если цвет имеет полупрозрачность, то это неправильно вдвойне, поскольку такой цвет должен меняться при наложении на различный фон.


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


LESS


.link {
    color: fadeout(multiply(#ff6600, #999999), 20%);
}

CSS


.link {
    color: rgba(153, 61, 0, 0.8);
}

Псевдокласс extend


Думаю многие из вас использовали миксины, они позволяют использовать общие стили в нескольких местах, но у них есть один минус – дублирование результирующего CSS кода. Данного недостатка можно избежать если вместо миксинов использовать псевдокласс extend, он позволяет унаследовать стили без их дублирования.


LESS


.message {
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.message-success {
    &:extend(.message);
    background-color: #dff0d8;
}

.message-info {
    &:extend(.message);
    background-color: #d9edf7;
}

CSS


.message,
.message-success,
.message-info {
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.message-success {
    background-color: #dff0d8;
}

.message-info {
    background-color: #d9edf7;
}

Объединение множественных CSS-свойств


Я заметил, что в дизайне все чаще используется такой прием оформления, как множественные тени. Например, у элемента есть внутренняя тень, а при наведении на него добавляется внешняя. В этом случае внутренняя тень будет задаваться в CSS дважды: для обычного состояния и для hover. Однако этого можно избежать, если использовать возможность объединения значений множественных свойств с помощью символа +.


LESS


.button {
    box-shadow+: inset 0 0 10px #555;
}

.button:hover {
    .button;
    box-shadow+: 0 0 20px #000;
}

CSS


.button {
    box-shadow: inset 0 0 10px #555;
}

.button:hover {
    box-shadow: inset 0 0 10px #555, 0 0 20px #000;
}

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


Спасибо за внимание.

Поделиться с друзьями
-->

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


  1. zowers
    14.06.2017 17:06
    #10264508
    +1

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


    1. PaulZi
      14.06.2017 18:14
      #10264654
      +1

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


    1. flops
      14.06.2017 18:14
      #10264658

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


  1. depdol
    14.06.2017 18:15
    #10264660

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


  1. derSmoll
    14.06.2017 18:24
    #10264680
    +4

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


    1. kahi4
      15.06.2017 09:33
      #10265396

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


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


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

  .another-class& { ... }
}

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


    1. var_bin
      15.06.2017 14:12
      #10266044

      Добрый день


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


  1. franzose
    15.06.2017 03:33
    #10265214

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


  1. Kolbasyatin
    15.06.2017 11:22
    #10265596

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

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

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


    1. belyan
      15.06.2017 11:25
      #10265606
      +2

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


      1. Kolbasyatin
        15.06.2017 11:34
        #10265636

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

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


        1. belyan
          15.06.2017 12:35
          #10265782

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


          .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);
    }
}


          1. Kolbasyatin
            15.06.2017 13:52
            #10266002

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


  1. hulki
    15.06.2017 12:22
    #10265746

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