Три новых свойства LESS CSS в деталях

Три новых свойства LESS CSS в деталях изображение поста

В технологию LESS CSS было внесено множество кардинальных изменений. Сегодня мы с вами познакомимся с тремя наиболее примечательными: Referencing External File, Extend и Merging Property. Итак, давайте рассмотрим их более подробно.

Импорт файла

Обратите внимание, что некоторые разработчики любят разделять все таблицы стилей на разные файлы. А ведь можно поместить весь код в один отдельный файл. После этого все отдельные файлы импортируются в одну страницу или совершенно другую таблицу стилей посредством @import:

@import «external.less»;

Вот только главная проблема заключается в том, что технология LESS компилирует абсолютно все миксины из внешних файлов. В итоге, вы получаете несколько правил стилизации, которые будут означать одно и то же.

А вот вам пример для наглядности. Допустим, у нас есть два файла LESS, которые называются style.less и external.less. Вы импортируете external.less в style.less, после чего последует миксин .square в external.less, чтобы определить стили квадратного блока. Ну а внутри можно использовать миксин следующим образом:

@import «external»;

.box {

.square;

}

Все это даст вам хороший результат в CSS. Правда, получится генерация стилизации из миксина .square, а это не совсем хорошо:

.square {

width: 100px;

height: 100px;

margin: 0 auto;

background-color: red;

}

.box {

width: 100px;

height: 100px;

margin: 0 auto;

background-color: red;

}

Еще в версии 1.5 было представлено свойство reference. При этом все инструкции reference указываются таким образом:

@import (reference) «external»;

Далее вы компилируете каскадную табличку LESS, после чего .square уже не будет выводиться.

.box {

width: 100px;

height: 100px;

margin: 0 auto;

background-color: red;

}

Extend

Вообще, метод Extend – это чистой воды магия. Данное свойство группирует селекторы, которые в свою очередь разделяют правила стилизации. Это позволяет добиться опрятного и организованного кода CSS. Разрабатывая веб-сайт, вы можете оказаться в таком положении, что некоторые селекторы будут разделять одинаковые правила стилизации:

.box {

width: 100px;

height: 100px;

margin: 0 auto;

border: 1px solid black;

background-color: transparent;

}

.box2 {

width: 100px;

height: 100px;

margin: 0 auto;

border: 1px solid black;

background-color: red;

}

LESS CSS

Такое разделение не совсем соответствует принятым стандартам. При этом проблема решается посредством директивы @extend, тогда как в LESS то же самое легко реализовать с помощью &:extend().

Учитывая данный пример, можно поступить вот как:

@import (reference) «external»;

.box {

&:extend(.square);

background-color: transparent;

}

.box2 {

&:extend(.square);

background-color: red;

}

Компилируя все это в обычный CSS, вышенаписанный код даст нам вот какой результат:

.square, .box, .box2 {

width: 100px;

height: 100px;

margin: 0 auto;

border: 1px solid black;

}

.box {

background-color: transparent;

}

.box2 {

background-color: red;

}

Merging Property

А вот еще одно замечательное свойство под названием Merging Property. Оно применяет к CSS-коду свойство, принимающее несколько значений: transition, box-shadow, transform. Уже из названия видно, что данное свойство соединяет между собой значения, принадлежащие одному и тому же свойству.

Прямо сейчас мы с вами создадим два миксина под названием .inner-shadow и .outer-shadow.

.inner-shadow {

box-shadow+: inset 10px 10px 5px #ccc;

}

.outer-shadow {

box-shadow+: inset 10px 10px 5px #ccc;

}

Данный код даст нам вот какой результат:

.box {

 box-shadow: inset 10px 10px 5px #ccc, 10px 10px 5px #ccc;

}

.box2 {

 box-shadow: inset 10px 10px 5px #ccc;

}

.box3 {

 box-shadow: 10px 10px 5px #ccc;

}

В завершение еще раз подчеркнем, что с помощью данных трех свойств можно создавать более продвинутый код CSS. Будем ждать от разработчиков обновления технологий и добавления новых свойств.

Комментарии
Adblock detector