Основные функции Less

Улучшаем работу с вашим CSS кодом, используя функционал языка Less

После ознакомления с less, самое время разобрать его основные функции.

Организация кода

Удобная реализация и организация кода, так называемая — «Модульность». В файл можно импортировать другие файлы и на выходе получить один большой файл. Синтаксис:

  • @import "имя_файла.less"; — добавляет код из файла, удаляя строчку
  • @import "имя_файла"; — тоже самое, только сокращённая запись
  • @import "имя_файла.css"; — оставляет строчку, не импортируя код

Представьте что есть два файла main.less и pre-main.less.

1. main.less

@import "fonts.css";
@import "pre-main.less";
h2{color:red;}

2. pre-main.less

h1{color:green;}

Получим следующий css код

@import "fonts.css";
h1{color:green;}
h2{color:red;}

Переменные

Синтаксис проще не бывает @имя_переменной

less

@font-size: 16px;
@color-red: red;

h1, h2, h3 {
    color: @color-red;
    font-size: @font-size;
}

css

h1, h2, h3 {
    color: red;
    font-size: 16px;
}

Примешивания

Примешивания, это подобие функции добавляющая участок кода в любое место. Синтаксис:

  • .имя(){ /*код*/ } — в виде функции, на выходе вырезает функцию
  • .имя{ /*код*/ } — в виде класса, оставляет код как обычный класс

В виде функции:

less

.typogaphy(){
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 24px;
}
h1{
    color: red;
    .typogaphy();
}

css

h1 {
    color: red;
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 24px;
}

В виде класcа:

less

.typogaphy{
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 24px;
}
h1{
    color: red;
    .typogaphy;
}

css

.typogaphy {
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 24px;
}
h1 {
    color: red;
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 24px;
}

Вложения

Одна из удобных функций языка, синтаксис имеет вид «древовидного вложения».

less

.article{
    color: #000;
    .code-mark{
        display:none;
    }
}

css

.article {
    color: #000;
}
.article .code-mark {
    display: none;
}

Вычисления

Поддержка цифровых вычислений, аналог функции в css сalc

less

@font-size: 16px;

.code-mark{
    font-size: @font-size / 2;
    color: red;
}

css

.code-mark {
font-size: 8px;
color: red;
}

Функции

Выполнение полезных функций, для веб разработки список всех функций

less

@height: 1.6px;

.code{
    font-size: percentage(@height);
    color: green;
}

css

.code {
font-size: 160%;
color: green;
}
Комментарии - 0
для добавления комментария
пожалуйста войдите или зарегистрируйтесь
Хостинг от uCoz