Три новых свойства 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;
}
Такое разделение не совсем соответствует принятым стандартам. При этом проблема решается посредством директивы @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. Будем ждать от разработчиков обновления технологий и добавления новых свойств.