CSS : фреймворк Scaffold


До этого мы рассматривали базовые элементы CSS для создания симпатичных сайтов. А теперь пришло время рассмотреть один фреймворк (framework), который позволит несколько облегчить работу с CSS. Название этому фреймворку Scaffold.

Содержание статьи:

До этого мы рассматривали базовые элементы CSS для создания симпатичных сайтов. А теперь пришло время рассмотреть один фреймворк (framework), который позволит несколько облегчить работу с CSS. Название этому фреймворку Scaffold.

Данный фреймворк написан на PHP и несколько расширяет возможности стандартных CSS - так, например, Вы получаете:

  • Возможность использования констант
  • Наследуемые селекторы
  • Использование выражений
  • Кэширование и автоматическое сжатие css
  • Расширяемость за счет подключаемых модулей

Для начала работы с Scaffold достаточно скачать дистрибутив, распаковать его в корень папки, где у Вас хранятся CSS файлы (в состав будет входить файл .htaccess и сама папка с Scaffold). Данный .htaccess файл позволит автоматически перенаправлять все запросы сервера к css файлам на обработку через Scaffold. После проделывания данной процедуры, Вы сразу получаете следующие возможности:

Импортирование других файлов

Для этого достаточно в CSS написать

@include 'filename.css';  

Наследование классов

Если теперь в CSS файле мы напишем что-то вроде:

body {    color : #fefefe;    font: 12px Helvetica;      div      {         color: #000;         background: #fff;           a {          padding: 5px;        }      }  }  

То после обработки кода Scaffold выдаст примерно такой css:

body {    color : #fefefe;    font: 12px Helvetica;  }    body div  {     color: #000;     background: #fff;   }      body div a{    padding: 5px;  }    

А если чуть-чуть доработать исходный css до такого вида:

body {    color : #fefefe;    font: 12px Helvetica;      div      {         color: #000;         background: #fff;           a {          padding: 5px;          &: hover {color: yellow;}        }      }  }  

То на выходе мы получим

body {    color : #fefefe;    font: 12px Helvetica;  }    body div  {     color: #000;     background: #fff;   }      body div a{    padding: 5px;  }    body div a:hover{    color: yellow;  }    

Как Вы могли заметить - добавилась конструкция &:hover в тэге a. Селектор & позволяет обратиться к предку (в данном примере к a).

Константы

Допишем наш изначальный код до примерно такого вида:

@constants {    body_color: #fefefe;  }  body {    color : !body_color;    font: 12px Helvetica;  }  

Как видите, добавился новый оператор @constants, в котором мы задали одну единственную константу под названием body_color. Использование самой консатнты в селекторах происходит через ! (восклицательный знак). Соответственно после "компиляции", выходной css будет выглядеть так:

body {    color : #fefefe;    font: 12px Helvetica;  }  

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

Выражения

Еще одна плюшка, которая появляется при использовании Scaffold - это возможность использовать выражения для подсчета каких-либо значений. Выражения в Scaffold пишутся с помощью "команды" #[выражение]. Например код:

body {    color : #fefefe;    font: 12px Helvetica;      padding: #[10*5]px;  }  

Даст примерно такой результат:

body {    color : #fefefe;    font: 12px Helvetica;      padding: 50px;  }  

Конечно, перемножать два заранее определенных значения не так интересно (ведь 5 на 10 мы и руками можем умножить), но только представьте, что мы, к примеру, задаем ширину контейнера, который содержит 5 картинок. При этом нам, вдруг, захотелось изменить их ширину. Для этого мы изначально задаем в консанте ширину картинки, а в контейнере вычисляем ширину с помощью перемножения константы (ширины картинки) на 5 (число картинок). Таким образом, в следующий раз, когда понадобиться внести изменения в ширину (например) картинки, достаточно сделать изменение только в константе, а все остальные значения будут персчитаны автоматически.

@constants {    body_color: #fefefe;    global_padding: 10;  }  body {    color : !body_color;    font: 12px Helvetica;      padding: #[!global_padding * 5]px;  }  

Результат компиляции будет выглядеть примерно так:

body {    color : #fefefe;    font: 12px Helvetica;      padding: 50px;  }  

"Смешение"

Теперь перейдем к еще более интересной "плюшке". На английском она называется "mixin", что на русский я перевел бы как "смешение". Суть заключается в том, что мы можем задать какой-то шаблон (например вид границы) и во всех элементах, которым необходимо сделать границу, мы будем ссылаться на название данного шаблона. Думаю понятнее будет на примере:

=bordered {    border: 1px solid #eee;  }  body {    +bordered;    color : !body_color;    font: 12px Helvetica;  }  

Как видите, в коде появился шаблон с названием bordered. Результат выполнения кода:

body {    border: 1px solid #eee;    color : !body_color;    font: 12px Helvetica;  }  

Еще одна замечательная особенность данных "шаблонов", что в них можно передавать параметры, например:

=bordered(!c) {    border: 1px solid !c;  }  body {    +bordered(#222);    color : !body_color;    font: 12px Helvetica;  }  

В коде выше, мы передаем значение #222 как переменную в шаблон bordered. Результат выполнения кода:

body {    border: 1px solid #222;    color : !body_color;    font: 12px Helvetica;  }  

Так же можно задать значение по-умолчанию для шаблона. Давайте доработаем наш код до следующего:

=bordered(!c = #eee) {    border: 1px solid !c;  }  body {    +bordered(#222);    color : !body_color;    font: 12px Helvetica;  }  div {    +bordered;  }  

И результат будет таким:

body {    border: 1px solid #222;    color : !body_color;    font: 12px Helvetica;  }  div {    border: 1px solid #eee;  }  

Сам Scaffold идёт с целым набором шаблонов по-умолчанию. Например:

body {    +reset-border-model;          color : #fefefe;    font: 12px Helvetica;  }  

Даст такой результат:

body {    margin: 0;     padding: 0;    border: 0;       color : #fefefe;    font: 12px Helvetica;  }  

Дополнительно о наборах шаблонов, идущих в Scaffold можно почитать на сайте Scaffold. Всё о чем я щас написал, можно посмотреть в видео, которое прикреплено ниже. Дополнительную информацию по Scaffold можно так же получить на родном сайте


Так же советую почитать: