dir.by  
Праздники ...
Праздники ...
Праздник весны и труда (1 мая)
Концерты, выставки ...
Концерты, выставки ...
Спектакль "Любовь и голуби"|||г. Минск 1 апреля, 24 апреля, 5 мая, 19 мая 2026
Афишу
Спорт занятия ...
Спорт занятия ...
Клуб оздоровительной гимнастики для детей от 3-8 лет
Спорт занятие
Компьютер, программы...
Компьютер, программы...
Объявления ...
Объявления ...
Лецитин подсолнечный оптом от завода Юг Руси
Объявление
Форум ...
Форум ...
обсуждение...
  Поиск  
Компьютер, программы
→
LESS файл (с помощью компилятора получаем CSS файл)
 Что такое LESS файл ? 
посмотрели 3108 раз
обновлено: 28 марта 2021
Все стили хранятся в .css файле.

Когда .css файл большой, то становится сложно менять стили в этом файле. Потому что стилей много.

Чтобы привести стили в порядок, как-то их сгрупировать используется конвертация Sass (препроцессор).

То есть вы создаете .less файл.
В .less файле вы можете использовать:
• переменные
• вложенности
• миксины
• наследование
и другие приятные вещи

Запускаете конвертацию less (препроцессор) и ваш .less файл конверитруется в .css файл.

На заметку!
less относительно новый компилятор, ему около 4 лет.
В настоящее время less используются гораздо шире потому что основан на Javascript.
less часто сравнивают с scss.
scss более старый.
Переменные в файле .less
Чтобы создать переменную нужно использовать символ @
В переменных Вы можете хранить цвета, стеки шрифтов или любые другие значения.
Файл my.less
@font-stack: Helvetica;
@primary-color: #333;

body {
     font-family: @font-stack;
     color: @primary-color;
}
Запускаем конвертацию less (препроцессор) →
Файл my.css
body {
     font-family: Helvetica;
     color: #333;
}
Переменные в переменных в .less
Если обяъвлена переменная
При взятии знаяения переменной внутри переменной нужно использовать @@
Файл my.less
@primary-color: #333;

@my-color: "primary-color";

body {
     color: @@my-color;
}
Запускаем конвертацию less (препроцессор) →
Файл my.css
body {
     color: #333;
}
Переменные с математическими операциями (@unit * 3) в файле .less
Файл my.less
.button{
     @unit: 3px;
     border:@unit solid #ddd;
     padding: @unit * 3;
     margin: @unit * 2;
}

.box{
     @base_unit: 1px;
     border: @base_unit @base_unit + 1 @base_unit + 2 @base_unit + 3
}
Запускаем конвертацию less (препроцессор) →
Файл my.css
.button {
     border: 3px solid #ddd;
     padding: 9px;
     margin: 6px;
}

.box {
     border: 1px 2px 3px 4px;
}
Управление цветом (@my-color - #101010) в файле .less
Файл my.less
@my-color: #304050;

body {
     color: @my-color - #101010;
}
Запускаем конвертацию less (препроцессор) →
Файл my.css
body {
     color: #203040;
}
Цветовые функции (@my-color - #101010) в файле .less
Файл my.less
@color: #3d82d1;

// background:lighten это осветлять цвет
.left_box {
     background:lighten(@color, 20%);
}

// background:darken это затемнять цвет
.right_box {
     background:darken(@color, 20%);
}

// background:saturate это насыщать цвет
.bottom_box {
     background:saturate(@color, 20%);
}

// background:saturate это обратное от насыщать цвет
.top_box {
     background:desaturate(@color, 20%);
}

// background:spin это вращать цвет вперед
.my_box1 {
     background: spin(@color, 25%);
}

// background:spin это вращать цвет назад
.my_box2 {
     background:spin(@color, -25%);
}

// HSL (hue, saturation, lightness) дает контроль над уровнями каналов
@color : #167e8a;
@my1 : hue(@color);
@my2 : saturation(@color);
@my3 : lightness(@color);
Запускаем конвертацию less (препроцессор) →
Файл my.css
.left_box {
     background: #29cadd;
}

.right_box {
     background: #082e32;
}

.bottom_box {
     background: #068b9a;
}

.top_box {
     background: #26717a;
}

.my_box1 {
     background: #164e8a;
}

.my_box2 {
     background: #168a66;
}
Вложенности в файле .less
less позволит вам вкладывать CSS селекторы таким же образом, как и в визуальной иерархии HTML. Но помните, что чрезмерное количество вложенностей делает ваш документ менее читабельным и воспринимаемым, что считается плохой практикой.
Файл my.less
nav {
     ul {
          margin: 0;
          padding: 0;
          list-style: none;
     }

     li { display: inline-block; }

     a {
          display: block;
          padding: 6px 12px;
          text-decoration: none;
     }
}
Запускаем конвертацию less (препроцессор) →
Файл my.css
nav ul {
     margin: 0;
     padding: 0;
     list-style: none;
}

nav li {
     display: inline-block;
}

nav a {
     display: block;
     padding: 6px 12px;
     text-decoration: none;
}
Миксины без круглых скобок (примеси без круглых скобок) в файле .less
Миксины позволяют создавать группы деклараций CSS, которые вам придется использовать по нескольку раз на сайте.
На заметку! .rounded_top присутствует в файле my.css
Файл my.less
.rounded_top {
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
}

.tab {
     background: #333;
     color:#fff;
     .rounded_top;
}

.submit {
     .rounded_top;
}
Запускаем конвертацию less (препроцессор) →
Файл my.css
.rounded_top {
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
}

.tab {
     background: #333;
     color: #fff;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
}

.submit {
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
}
Миксины с круглыми скобками (примеси с круглыми скобками) в файле .less
На заметку! .rounded_top нет в файле my.css
Файл my.less
.rounded_top() {
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
}

.tab {
     background: #333;
     color:#fff;
     .rounded_top;
}

.submit {
     .rounded_top;
}
Запускаем конвертацию less (препроцессор) →
Файл my.css
.tab {
     background: #333;
     color: #fff;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
}

.submit {
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
}
Миксины с параметрами (примеси с параметрами) в файле .less
.rounded_top нет в файле my.css
Файл my.less
.rounded_top(@radius) {
     border-top-left-radius: @radius;
     border-top-right-radius: @radius;
}

.tab {
     background: #333;
     color:#fff;
     .rounded_top(2px);
}

.submit {
     .rounded_top(3px);
}
Запускаем конвертацию less (препроцессор) →
Файл my.css
.tab {
     background: #333;
     color: #fff;
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
}

.submit {
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
}
Миксины с параметрами по умолчанию (примеси с параметрами по умолчанию) в файле .less
.rounded_top нет в файле my.css
Файл my.less
.rounded_top(@radius:6px) {
     border-top-left-radius: @radius;
     border-top-right-radius: @radius;
}

.tab {
     background: #333;
     color:#fff;
     .rounded_top;
}

.submit {
     .rounded_top(3px);
}
Запускаем конвертацию less (препроцессор) →
Файл my.css
.tab {
     background: #333;
     color: #fff;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
}

.submit {
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
}
Миксины с несколькими параметрами (примеси с несколькими параметрами) в файле .less
Файл my.less
.round_border(@radius:6px) {
     border-top-left-radius: @radius;
     border-top-right-radius: @radius;
}

.button(@radius:3px, @background: #e7ba64, @padding: 4px) {
     .round_border(@radius);
     background: @background;
     left-padding: @padding;
}

.submit {
     .button(5px);
}
Запускаем конвертацию less (препроцессор) →
Файл my.css
.submit {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     background: #e7ba64;
     left-padding: 4px;
}
Пространство имён
Пространство имен помогает сделать смену тем.
Файл my.less
#fw_1 {
     p {
          margin: 12px 0;
     }
     a {
          color:blue;
          text-decoration: none;
     }
     .submit {
          background: red;
          color: white;
          padding:5px 12px;
     }
}

#fw_2 {
     p {
          margin: 8px 0;
     }
     a {
          color:red;
          text-decoration: underline;
     }
     .submit {
          background: blue;
          color: white;
          padding:8px 20px;
     }
}

.submit_button {
     #fw_2 > .submit;
}
Запускаем конвертацию less (препроцессор) →
Файл my.css
#fw_1 p {
     margin: 12px 0;
}
#fw_1 a {
     color: blue;
     text-decoration: none;
}
#fw_1 .submit {
     background: red;
     color: white;
     padding: 5px 12px;
}

#fw_2 p {
     margin: 8px 0;
}
#fw_2 a {
     color: red;
     text-decoration: underline;
}
#fw_2 .submit {
     background: blue;
     color: white;
     padding: 8px 20px;
}

.submit_button {
     background: blue;
     color: white;
     padding: 8px 20px;
}
Импорт less файлов в less файл
Файл my1.less
@import "my2.less";

body {
     font: 100% Helvetica, sans-serif;
     background-color: #efefef;
}


Файл my2.less
ol {
     margin: 0;
     padding: 0;
}
Запускаем конвертацию less (препроцессор) →
Файл my1.css
ol {
     margin: 0;
     padding: 0;
}

body {
     font: 100% Helvetica, sans-serif;
     background-color: #efefef;
}
 
 
Следующая тема →
Конвертируем файл .LESS в файл .CSS (в командной строке выполним: "lessc 1.less 1.css") | node.js
 
Ваши Отзывы ... комментарии ...
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)
Экскурсии по Москве Экскурсии по Москве: пешеходные, автобусные и речные прогулки на любой вкус
Анонс! Ярмарка вакансий для молодежи, работа (учащихся, которые хотели бы подработать в свободное время, а также выпускники)|||Минск, Витебск, Гомель, Гродно, Могилев, Борисов, Полоцк, Брест, Барановичи, Пинск с 13 по 17 апреля 2026
  Объявления  
  Объявления  
 
• Что такое LESS файл ?
Конвертируем один файл .LESS в файл .CSS
• Конвертируем файл .LESS в файл .CSS (в командной строке выполним: "lessc 1.less 1.css") | node.js
Конвертируем всю папку с файлами .LESS в файлы .CSS
• Конвертируем папку(директорий) с .LESS файлами в .CSS файлы (в командной строке выполним: "lessc-each src/files_less dest/files_css") | node.js
  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика