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

    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, то просьба поделиться ими в комментариях.


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

    Netcracker
    58,00
    международная компания-разработчик IT-решений
    Поделиться публикацией

    Похожие публикации

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

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

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


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


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

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

                0

                Добрый день


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

                0

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

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

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

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

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

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


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

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

                    Самое читаемое