Cascading Style Sheets

CSS (Cascading Style Sheets) — каскадные таблицы стилей  — механизм добавления стиля в веб-документ.

Стиль - системная совокупность элеменотов оформления.

Таблица стилей - совокупность правил управления расположением и поведением элементов оформления страницы (шрифты, цвета и т.д).

Таблицы стилей могут быть внутренние (в коде HTML файла) и внешние (представляют собой файлы с расширением *.css.)

Анимация в CSS3 представляет собой изменение значения какого-либо свойства.

В CSS3 для задания CSS3 анимации используется свойство animation, содержащие запись различных свойств анимации:

• animation-name — задает имя анимации

• animation-duration — задает время проигрывания анимации

• animation-timing-function — описывает метод расчета промежуточных значений свойств для анимации

• animation-delay — задает задержку анимации

• animation-iteration-count — задает количество циклов анимации

• animation-direction — задает направление анимации

• animation-play-state — определяет, проигрывается ли анимация или стоит на паузе...

Эти CSS3 свойства по разному поддерживаются  распространенными браузерами, поэтому они используются с вендорным префиксом (vendor-prefix).

Для Google Chrome и Safari: -webkit-

• -webkit-animation-name — задает имя анимации

• -webkit-animation-duration — задает время проигрывания анимации

• ................................

Каждый разработчик имел собственное представление, как делать CSS.

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

В качестве решения проблемы был предложен SASS  (Syntactically Awesome Stylesheets) — метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.

Sass фактически является модулем Haml.

SASS превратил CSS в настоящий язык программирования, представленный в виде препроцессингового движка, реализующего в таблицах стилей вложенность, переменные, миксины, расширения (extends) и логику.

Технология SASS:

• берётся CSS-код,

• предварительно обрабатывается,

• в общий CSS-пакет помещается скомпилированный файл.

Одним из путей развития концепции SASS стал  LESS

LESS — это программируемый язык стилей, надстройка над CSS.

LESS разработал Alexis Sellier под влиянием языка стилей Sass.

LESS написан первоначально на языке Ruby, но в последующих версиях используется JavaScript.

LESS  — вложенный метаязык: валидный CSS будет валидной less-программой с аналогичной семантикой.

LESS обеспечивает следующие расширения CSS: переменные, вложенные блоки, миксины, операторы и функции

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