Изучаем LESS за 15 минут

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

В прошлой статье мы изучали Sass за 15 минут.

К счастью, сообщество веб-разработки решило эту проблему. Теперь у нас есть CSS препроцессоры такие как Less, Sass и Stylus. Они дают нам ряд преимуществ по сравнению с обычным CSS:

  • Переменные, вы можете определить стили в одной переменной и без труда менять значения в любой момент.
  • Динамический расчет значений. (В CSS мы мы получили свойство calc, но только для единиц длины).
  • Примеси, которые позволяют повторно использовать и комбинировать стили.
  • Функции, предоставляют ряд полезных утилит для работы с цветом, конвертирования изображений в data-uris и т.д.

Минус препроцессоров в том, что вам нужно будет предварительно скомпилировать стили выбранного препроцессора в обычный CSS код.

Препроцессор Less написан на JavaScript, и для его работы вам понадобится Node.js или веб-браузер. Если ваш выбор встал на браузере, то вы можете подключить файл less.js к вашему проекту, который будет компилировать все .less стили в режиме реального времени, но мы не рекомендуем данный способ, так как работает он медленно. Рекомендуемый способ работы с браузером, это использовать специализированные онлайн сервисы компиляции препроцессоров, но в этой статье мы будем работать с Node.js.

Установка Less используя NPM:

npm install -g less

После этого у вас появится доступ к команде lessc, которая позволяет компилировать файлы .less в простой CSS:

lessc styles.less > styles.css

Допустим мы написали правила на Lass (styles.less). Затем с помощью команды lessc преобразуем наш файл, в обычный CSS код (styles.css). Далее остается просто связать готовый CSS файл с HTML страницей.

LESS Переменные

Одной из главных особенностей Less является создание переменных, точно также, как в любом другом языке программирования. Переменные могут хранить любые значения, чаще всего вы будете использовать значения: цветов, размеров, селекторов, имена шрифтов, URL, и так далее. Философия Leass это - повторно использовать CSS синтаксис где только это возможно.

Здесь мы определяем две переменные, одну для цвета фона, вторую для цвета текста, в качестве шестнадцатеричного кода:

  • LESS

    @background-color: #ffffff;
    @text-color: #1A237E;
    
    p{
      background-color: @background-color;
      color: @text-color;
      padding: 15px;
    }
    
    ul{
      background-color: @background-color;
    }
    
    li{
      color: @text-color;
    }
  • CSS

    p{
      background-color: #ffffff;
      color: #1A237E;
      padding: 15px;
    }
    
    ul{
      background-color: #ffffff;
    }
    
    li{
      color: #1A237E;
    }

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

LESS Примеси

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

  • LESS

    #circle{
      background-color: #4CAF50;
      border-radius: 100%;
    }
    
    #small-circle{
      width: 50px;
      height: 50px;
      #circle
    }
    
    #big-circle{
      width: 100px;
      height: 100px;
      #circle
    }
  • CSS

    #circle {
      background-color: #4CAF50;
      border-radius: 100%;
    }
    #small-circle {
      width: 50px;
      height: 50px;
      background-color: #4CAF50;
      border-radius: 100%;
    }
    #big-circle {
      width: 100px;
      height: 100px;
      background-color: #4CAF50;
      border-radius: 100%;
    }

Если вы не хотите чтобы примеси работали в качестве CSS правила, добавьте круглые скобки после его объявления:

  • LESS

    #circle(){
      background-color: #4CAF50;
      border-radius: 100%;
    }
    
    #small-circle{
      width: 50px;
      height: 50px;
      #circle
    }
    
    #big-circle{
      width: 100px;
      height: 100px;
      #circle
    }
  • CSS

    #small-circle {
      width: 50px;
      height: 50px;
      background-color: #4CAF50;
      border-radius: 100%;
    }
    #big-circle {
      width: 100px;
      height: 100px;
      background-color: #4CAF50;
      border-radius: 100%;
    }

При помощи примесей, вы также можете получить параметры. В следующем примере мы добавим аргумент для ширины и высоты круга, со значением по умолчанию 25px. Это создаст один небольшой круг размером 25×25 пикселей и один большой круг, размером 100×100 пикселей.

  • LESS

    #circle(@size: 25px){
      background-color: #4CAF50;
      border-radius: 100%;
    
      width: @size;
      height: @size;
    }
    
    #small-circle{
      #circle
    }
    
    #big-circle{
      #circle(100px)
    }
  • CSS

    #small-circle {
      background-color: #4CAF50;
      border-radius: 100%;
      width: 25px;
      height: 25px;
    }
    #big-circle {
      background-color: #4CAF50;
      border-radius: 100%;
      width: 100px;
      height: 100px;
    }

LESS Вложенные правила

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

  • LESS

    ul{
      background-color: #03A9F4;
      padding: 10px;
      list-style: none;
    
      li{
        background-color: #fff;
        border-radius: 3px;
        margin: 10px 0;
      }
    }
  • CSS

    ul {
      background-color: #03A9F4;
      padding: 10px;
      list-style: none;
    }
    ul li {
      background-color: #fff;
      border-radius: 3px;
      margin: 10px 0;
    }

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

  • LESS

    @text-color: #000000;
    
    ul{
      @text-color: #fff;
      background-color: #03A9F4;
      padding: 10px;
      list-style: none;
    
      li{
        color: @text-color;
        border-radius: 3px;
        margin: 10px 0;
      }
    }
  • CSS

    ul {
      background-color: #03A9F4;
      padding: 10px;
      list-style: none;
    }
    ul li {
      color: #ffffff;
      border-radius: 3px;
      margin: 10px 0;
    }

LESS Операторы

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

  • LESS

    @div-width: 100px;
    @color: #03A9F4;
    
    div{
      height: 50px;
      display: inline-block;
    }
    
    #left{
      width: @div-width;
      background-color: @color - 100;
    }
    
    #right{
      width: @div-width * 2;
      background-color: @color;
    }
  • CSS

    div {
      height: 50px;
      display: inline-block;
    }
    #left {
      width: 100px;
      background-color: #004590;
    }
    #right {
      width: 200px;
      background-color: #03a9f4;
    }

LESS Функции

LESS тоже имеет поддержку функций! Благодаря этому, он все более и более похож на язык программирования, не так ли?

Давайте посмотрим на функцию fadeout, которая уменьшает прозрачность цвета.

  • LESS

    @var: #004590;
    
    div{
      height: 50px;
      width: 50px;
      background-color: @var;
    
      &:hover{
        background-color: fadeout(@var, 50%)
      }
    }
  • CSS

    div {
      height: 50px;
      width: 50px;
      background-color: #004590;
    }
    div:hover {
      background-color: rgba(0, 69, 144, 0.5);
    }

В выше коде, при наведении по контейнеру, его цвет становится в два раза прозрачнее.

Перевод статьи Learn LESS in 10 Minutes (or Less)

Тэги: less

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.