Еще один блог :)

Вопросы по Less - Часть 1

  1. Что такое Less
  2. Как использовать Less
  3. Как установить Less
  4. Что такое переменная Less
  5. Что такое примесь
  6. Что такое вкладывание
  7. Что такое область видимости
  8. Что такое операции

1 Less это препроцессор CSS

2 Для использования нужен глобальный модуль Node.Js или включение less.js в браузер, чтобы компилировать все подключенные таблицы .less в реальном времени, но это медленно и не рекомендуется. Лучше скомпилировать таблицы .less заранее и опубликовать на сайте обычный CSS файл.

3 С помощью менеджера пакетов NPM

npm install -g less 
В результате можно использовать препроцессор lessc :
lessc styles.less > styles.css

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

LESS.CSS
@background-color: #ffffff;
@text-color: #000000;

p{
  background-color: @background-color;
  color: @text-color;
}
ol{
  background-color: @background-color;
}
li{
  color: @text-color;
}

5 Примесь - это набор общих свойств, которые применяются к нескольким селекторам

#mixin(@size: 120px) {
  background-color: #00ff00;
  color: #ff0000;
  width:@size;
  height:@size;
}
#block {
  #mixin
}
#other {
  #mixin(60px)
}

6 Вкладывание позволяет более выразительно писать CSS код, а именно идея в том, что CSS структура воспроизводит Html структуру

ol{
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
  }
}

7 Область видимости определяет знчение переменной. Less берет значение переменной из ближайшего по иерархии блока

@text-color: #000000;

ul{
  @text-color: #fff;
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    color: @text-color; // будет взято #fff
    border-radius: 3px;
    margin: 10px 0;
  }
}

8 Операциями в Less называются арифметические действия над переменными и целыми значениями

@divWidth: 30px;
@color: #0000ff;

#left{
  width: @divWidth;
  background-color: @color + 100;
}

#right{
  width: @divWidth * 3;
}

Опубликовано в категории Вопросы по LESS


by Nazarov Artyom, 2012-2018 · Карта сайта
×