Супер конструктор сайта нового поколения Тильда. Тильда меняет современное представление о дизайне сайта, и о его возможностях, а самое главное вам не нужно быть программистам или веб дизайнером что бы разобраться в конструкторе сайтов Тильда.

Сегодня мы с вами познакомимся с тремя наиболее примечательными: Referencing External File, Extend и Merging Property. Итак, давайте рассмотрим их более подробно.

Импорт файла

   Обратите внимание, что некоторые разработчики любят разделять все таблицы стилей на разные файлы. А ведь можно поместить весь код в один отдельный файл. После этого все отдельные файлы импортируются в одну страницу или совершенно другую таблицу стилей посредством @import:

@import "external.less";

Вот только главная проблема заключается в том, что технология LESS компилирует абсолютно все миксины из внешних файлов. В итоге, вы получаете несколько правил стилизации, которые будут означать одно и то же.

А вот вам пример для наглядности. Допустим, у нас есть два файла LESS, которые называются style.less и external.less. Вы импортируете external.less в style.less, после чего последует миксин .square в external.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 было представлено свойство reference. При этом все инструкции 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;3 новых LESS/CSS-свойства, о которых вам следует знать

background-color: red;

}

 

   Такое разделение не совсем соответствует принятым стандартам. При этом проблема решается посредством директивы @extend, тогда как в LESS то же самое легко реализовать с помощью &:extend().

Учитывая данный пример, можно поступить вот как:

@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-коду свойство, принимающее несколько значений: transition, box-shadow, transform. Уже из названия видно, что данное свойство соединяет между собой значения, принадлежащие одному и тому же свойству.

Прямо сейчас мы с вами создадим два миксина под названием .inner-shadow и .outer-shadow.

.inner-shadow {

box-shadow+: inset 10px 10px 5px #ccc;

}

.outer-shadow {

box-shadow+: inset 10px 10px 5px #ccc;

}

 

Данный код даст нам вот какой результат:

.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;

}

 В завершение еще раз подчеркнем, что с помощью данных трех свойств можно создавать более продвинутый код CSS. Будем ждать от разработчиков обновления технологий и добавления новых свойств.

 Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

Добавить комментарий


Яндекс.Метрика