—»     —»   3 новых LESS/CSS-свойства, о которых вам следует знать
  Раздел: CSS/Style Sheets   Комментариев: 1  

3 новых LESS/CSS-свойства, о которых вам следует знать



3 новых LESS/CSS-свойства, о которых вам следует знать

С момента нашего последнего обсуждения на тему 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. Будем ждать обновлений технологии и добавления все новых свойств.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: LESS, CSS
Опубликовал Design FactoRy   Прочитано (раз): 4697   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 19 августа 2014 @ 23:17
Написал: vlsoprun — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Про
@import (reference) "external";
только узнал (
Пошел переписывать стили smile
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Апрель 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930