Less: чего мне не хватало

категория: LESS
В less, есть куча разных полезных фич, но в основном не все так уж очень часто применяются. Я не верстальщик, но время от времени приходится что-то подверстывать. Буду описывать, то что конкретно сам использую по мере необходимости, тем самым расширяя эту категорию. Что ж все-таки в первую очередь не хватает в css: 1. Это конечно же переменных, постоянно на протяжении любого проекта повторяются одни и те же элементы, например - цвет, рамка, округления.
@color: #F2F2F2;
#header {
  color: @color;
}
.rounded-corners(@radius: 3px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}
2. Примеси, в css раньше добавлял в свойство элемента class два класса, сейчас можно использовать один в другом:
#menu {
  color: @color;
  .rounded-corners;
}
при чем можно делать еще глубже уровень вложенности 3. Свойства:
@property: color;
.class1 {
  @{property}: #000;
  background-@{property}: #ссс;
}
4. Операторы, можно проводить разные операции над стилями:
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
В общих чертах описал, то что встречается часто, а остальное буду добавлять по мере необходимости. Функций куча еще есть, но особо не стыкался пока с их необходимостью. Все-таки есть еще js))


blog comments powered by Disqus