Главная > CSS/Style Sheets > 3 новых LESS/CSS-свойства, о которых вам следует знать
3 новых LESS/CSS-свойства, о которых вам следует знать14 апреля 2014, 12:00. Разместил: Design FactoRy |
С момента нашего последнего обсуждения на тему LESS/CSS прошло уже довольно много времени. Недавно была представлена версия LESS CSS 1.5, и она оборудована новыми свойствами, которые переносят эту технологию на уровень многофункционального CSS препроцессора. Стоит отметить, что в технологию было привнесено несколько нововведений, и сегодня мы хотим познакомить вас с 3 лучшими свойствами: Referencing External File, Extend, Merging Property, которые помогут вам создавать более продвинутый код CSS. Итак, давайте приступим. Импорт файла Прежде всего, давайте рассмотрим, как LESS CSS оперирует с внешними файлами посредством правила @import. Некоторые разработчики предпочитают разделять таблицы стилей на разные файлы, вместо того, чтобы помещать весь код в один отдельный файл. После чего, эти отдельные файлы импортируются в страницу или в другую таблицу стилей посредством @import, и таким образом миксины (а также переменные) из всех файлов могут быть использованы в нескольких разных файлах и даже в будущих проектах.
Проблема заключается в том, что LESS компилирует все миксины из внешних файлов, так что в итоге вы получите несколько правил стилизации, которые означают одно и то же. Взгляните на следующий пример: у нас есть два LESS-файла под названием style.less и external.less. Мы импортируем external.less в style.less. Затем следует миксин .square в external.less для определения стилей квадратного блока. Внутри style.less мы можем использовать миксин следующим образом.
Это даст нам следующий результат в CSS. У нас также генерируется стилизации из миксина .square, что не есть хорошо.
В версии 1.5 LESS было представлено свойство (reference), которое может быть использовано для заявления о необходимости LESS использовать импортируемый файл только для ссылки, а не для вывода контента. Инструкции (reference) указываются следующим образом:
Скомпилируйте каскадную таблицу LESS, и теперь .square не будет выводиться.
Extend Метод Extend – это магия чистой воды. Технически, это свойство группирует селекторы, которые разделяют одни и те же правила стилизации, что позволяет добиться более опрятного и организованного кода CSS. При разработке веб-сайта, в некоторых случаях, мы можем оказаться в таком положении, что некоторые селекторы будут разделять между собой примерно одинаковые правила стилизации:
Это немного напрягает, и к тому же не соответствует принятым стандартам. В данном случае обычно проблему решают посредством известной директивы @extend, а в LESS мы можем реализовать то же самое при помощи &:extend(), представленного в версии 1.4. Учитывая вышеприведенный пример, мы можем поступить следующим образом:
При компилировании в обычный CSS, вышеприведенный код даст нам следующий результат:
Merging Property Еще одно клевое свойство называется Merging Property. Это свойство применяет к CSS-коду свойство, которое принимает несколько значений вроде transform, transition и box-shadow. Как видно из названия, это свойство соединяет значения, которые принадлежат одному и тому же свойству. Давайте проверим это на примере ниже. Как вы вероятно уже знаете, CSS3-свойство box-shadow принимает множественные значения. Используя merging property, вы можете без труда создавать различные эффекты тени и делать их более значимыми. Сейчас мы создадим 2 миксина, .inner-shadow и .outer-shadow. Надеемся, что названия говорят сами за себя.
Обратите внимание на то, что мы добавили знак + в конце названия свойства. Этот знак + необходим для работы данного свойства в целом. Затем, мы можем следующим образом использовать миксины:
Данный код дает нам следующий результат.
В завершение Эти 3 новых свойства - referencing external file, extend и merging property, - мотивировали нас гораздо чаще использовать LESS. С их помощью можно создавать лучший, более значимый код CSS. Будем ждать обновлений технологии и добавления все новых свойств. Вернуться назад |