Что такое LESS файл ?

Search

Programming, development, testing

→

LESS файл (с помощью компилятора получаем CSS файл)

→

Что такое LESS файл ?

Looked at 2402 times

Что такое LESS файл ?

last updated: 28 March 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;
}

Next topic →
Конвертируем файл .LESS в файл .CSS (в командной строке выполним: "lessc 1.less 1.css") | node.js

Your feedback ... Comments ...

Объявления

Объявления

• Что такое 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