CSS¶

Рекомендации по работе с LESS¶

• Используйте функциональность LESS только в специальных местах:
  • styles/data/style_name.less — использование функций LESS и присваивание их к LESS переменным;
  • css/tygh/less_functions.less — присваивание полученных ранее LESS переменных к CSS переменным для последующего его использования в других местах. Так же здесь можно использовать миксины.

Пример

// styles/data/Nova_theme.less
@menu: #fff;
@menu_hover: darken(@menu, 5%);

// css/tygh/less_functions.less
:root {
    --cs-menu: @menu;
    --cs-menu-hover: @menu_hover;
}

// css/blocks/topmenu_dropdown.less
.ty-menu__items {
    background: var(--cs-menu);
}

.ty-menu__item-active .ty-menu__item-link {
    background: var(--cs-menu-hover);
}

• Примеры использования:
  • design/themes/nova_theme/styles/data/Nova_theme.less — использование LESS функций
  • design/themes/nova_theme/css/tygh/less_functions.less — присваивание к CSS переменным
  • design/themes/nova_theme/css/blocks/topmenu_dropdown.less — использование CSS переменных

В следующем разделе будет описано, как перейти с LESS на нативный CSS.

Переменные¶

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

Пример:

@price: #343434;

LESS переменные в CS-Cart относятся к понятию Стилей (см. раздел “Стили и редактор тем” далее).

В директории design/themes/THEME_NAME/styles/data в папке установки CS-Cart находятся файлы .less, содержащие переменные LESS, относящиеся к Редактору тем (где THEME_NAME — имя вашей темы).

Эти значения можно отредактировать в файле или получить в Редакторе тем после сохранения стиля.

Значения переменных в файле .less в данной директории можно редактировать только в этом файле. Например, если переменная @price также определяется в файле styles.less, это значение не будет работать, т.к. значения переменных файла .../styles/data/.less включаются в последнюю очередь.

Переход на CSS

Присваивайте LESS переменные к CSS переменным и используйте их:

:root {
    --cs-menu: @menu;
}

Миксины¶

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

Миксины могут вести себя как функции и принимать аргументы, например:

rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}

В CS-Cart используется набор миксинов Bootstrap 2.3. Они хранятся в файле mixins.less, который находится в папке design/themes/responsive/css/tygh. В этом файле находятся миксины утилит и миксины компонетов.

• Миксины утилит - простые миксины для конкретных целей.
• Миксины компонентов - комплексные миксины, которые используются создания сетки.

Миксины позволяют сократить количество правил и используются для свойств с префиксами в браузерах.

Переход на CSS

До:

.my-class-rounded() when (@rounded_corners = true) {
    .my-class {
        border-radius: var(--cs-base-border-radius);
    }
}

.my-class-rounded();

После:

// css/tygh/less_functions.less
.roundedCornersRadiusMixin() when (@rounded_corners = true) {
    --cs-base-rounded-corners-radius: var(--cs-base-border-radius);
}

.roundedCornersRadiusMixin() when (@rounded_corners = false) {
    --cs-base-rounded-corners-radius: 0;
}

:root {
    .roundedCornersRadiusMixin();
}

.my-class {
    border-radius: var(--cs-base-rounded-corners-radius);
}

Операции¶

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

Пример:

width: (900 / @columns)px;

Переход на CSS

Будьте внимательны при написании математических операций в .less файлах.

Вот пример частой ошибки. Если написать:

.my-class {
    width: calc(50% - 10px);
}

то в итоговом CSS можно получить следующий неожиданный результат:

.my-class {
    width: calc(40%);
}

Чтобы этого избежать, экранируйте математические операции, например:

.my-class {
    width: ~"calc(50% - 10px)";
}

В результате получаем:

.my-class {
    width: calc(50% - 10px);
}

Если вы хотите, чтобы исходный Less код был CSS-валидным, используйте следующие LESS хаки:

1. Операции, состоящие из двух элементов, одна из которых переменная, не вызывает ошибки.

.my-class {
    width: calc(var(--foo) * 2);
}

2. Заранее упростите выражение.

До:

.my-class {
    width: calc(var(--foo) + 10px + 20px);
}

После:

.my-class {
    width: calc(var(--foo) + 30px);
}

3. Вынесите значение другого типа в переменную.

До:

.my-class {
    width: calc(50% + 10px);
}

После:

.my-class {
    --my-class-percent: 50%;

    width: calc(var(--my-class-percent) + 10px);
}

4. Разбейте одно выражение на несколько.

До:

.my-class {
    width: calc(var(--foo) + var(--bar) + 10px);
}

После:

.my-class {
    --my-class-part-1: var(--foo) + var(--bar);
    --my-class-part-2: 10px;

    width: calc(var(--my-class-part-1) + var(--my-class-part-2));
}

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

Функции¶

LESS содержит ряд функций для работы с цветом, математические функции, функции для работы со строковыми данными.

В CS-Cart используются следующие операции:

• lighten(@color, 10%) — возвращает цвет на 10% светлее текущего цвета.
• darken(@color, 10%) — возвращает цвет на 10% темнее текущего цвета.

Эти операции относятся к стилям и редактору тем. Используя один основной цвет, вы можете изменить цвета других элементов, делая основной цвет светлее или темнее.

• percentage(0.5) — конвертирует значение в проценты. Используется при создании сетки и колонок.

Переход на CSS

До:

.my-class {
    background: darken(@menu, 5%);
}

После:

// styles/data/Nova_theme.less
@menu_hover: darken(@menu, 5%);

// css/tygh/less_functions.less
:root {
    --cs-menu-hover: @menu_hover;
}

.my-class {
    background: var(--cs-menu-hover);
}

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

Данная функциональность позволяет вкладывать одни правила в другие. Вложенные правила используются в CS-Cart не так часто, т.к. это осложняет правило для работы с инструментами для разработчика. При поиске вложенных правил, скопированных из инструментов разработчика, необходимо учитывать родительское правило.

Переход на CSS

Не используйте вложенные правила. Вместо

#header {
    color: black;
    .navigation {
        font-size: 12px;
    }
    .logo {
        width: 300px;
    }
}

пишите обычный CSS:

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

Подробнее о других возможностях LESS читайте на официальном сайте LESS.

Обратите внимание, что не все из них работают в CS-Cart.