14.04.14, 21:04
0 комментарий
  Уроки

3 новых 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. Будем ждать обновлений технологии и добавления все новых свойств.

Напишите своё мнение