С момента нашего последнего обсуждения на тему LESS/CSS прошло уже довольно много времени. Недавно была представлена версия LESS CSS 1.5, и она оборудована новыми свойствами, которые переносят эту технологию на уровень многофункционального CSS препроцессора.
Стоит отметить, что в технологию было привнесено несколько нововведений, и сегодня мы хотим познакомить вас с 3 лучшими свойствами: Referencing External File, Extend, Merging Property, которые помогут вам создавать более продвинутый код CSS. Итак, давайте приступим.
Импорт файла
Прежде всего, давайте рассмотрим, как LESS CSS оперирует с внешними файлами посредством правила @import.
Некоторые разработчики предпочитают разделять таблицы стилей на разные файлы, вместо того, чтобы помещать весь код в один отдельный файл. После чего, эти отдельные файлы импортируются в страницу или в другую таблицу стилей посредством @import, и таким образом миксины (а также переменные) из всех файлов могут быть использованы в нескольких разных файлах и даже в будущих проектах.
@import "external.less";Проблема заключается в том, что LESS компилирует все миксины из внешних файлов, так что в итоге вы получите несколько правил стилизации, которые означают одно и то же.
Взгляните на следующий пример: у нас есть два LESS-файла под названием style.less и external.less. Мы импортируем external.less в style.less. Затем следует миксин .square в external.less для определения стилей квадратного блока. Внутри style.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 LESS было представлено свойство (reference), которое может быть использовано для заявления о необходимости LESS использовать импортируемый файл только для ссылки, а не для вывода контента.
Инструкции (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(), представленного в версии 1.4.
Учитывая вышеприведенный пример, мы можем поступить следующим образом:
@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-коду свойство, которое принимает несколько значений вроде transform, transition и box-shadow. Как видно из названия, это свойство соединяет значения, которые принадлежат одному и тому же свойству. Давайте проверим это на примере ниже.
Как вы вероятно уже знаете, CSS3-свойство box-shadow принимает множественные значения. Используя merging property, вы можете без труда создавать различные эффекты тени и делать их более значимыми.
Сейчас мы создадим 2 миксина, .inner-shadow и .outer-shadow. Надеемся, что названия говорят сами за себя.
.inner-shadow {
box-shadow+: inset 10px 10px 5px #ccc;
}
.outer-shadow {
box-shadow+: inset 10px 10px 5px #ccc;
}Обратите внимание на то, что мы добавили знак + в конце названия свойства. Этот знак + необходим для работы данного свойства в целом. Затем, мы можем следующим образом использовать миксины:
.box {
.inner-shadow;
.outer-shadow;
}
.box2 {
.inner-shadow;
}
.box3 {
.outer-shadow;
}Данный код дает нам следующий результат.
.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;
}В завершение
Эти 3 новых свойства - referencing external file, extend и merging property, - мотивировали нас гораздо чаще использовать LESS. С их помощью можно создавать лучший, более значимый код CSS. Будем ждать обновлений технологии и добавления все новых свойств.
