Техно-мир

Опубликовано приблизительно  3 месяца и 2 недели назад
Недавно была представлена версия 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. Будем ждать обновлений технологии и добавления все новых свойств.