Блог

Перевод: Создать CSS Grid Framework с Compass

compass-heading

CSS framework – это набор кода, который позволит сократить время разработки и сделать разработку легче. Framework CSS обычно содержит некоторые компоненты такие как: css-reset, typography и grid разметка. Сейчас мы попытаемся создать css grid с Compass.

Что такое Compass

Compass использует Sass. Sass это расширение css, которое добавляет вложенные правила, переменные, Mixins, селектор наследства, и многое другое. Sass генерирует отформатирован css и позволяет организовать работу с вашими стилями легче и удобной в поддержке. Compass помогает вам создавать и поддерживать стили и сделать его легким для вас, чтобы использовать библиотеки стилей, предоставленную другими.

Compass и Sass работают вместе. Compass смотрит все ваши файлы в рабочем каталоге и компиляции файла в sass файлы в css каждый раз когда вы вносите изменения в файл.

Давайте приступим

Хорошо, сейчас вам необходимо установить RubySass, и Compass. Здесь ссылки которые помогут вам установить их.

Возвращайтесь после установки, I will be waiting.

Подготовка

После того как вы установили Compass, compass команда, должна быть доступна в вашем терминале. Очень легко с генерировать ваш первый Compass проект. Просто выполните команду в вашем терминале.

$ compass create /home/arif/framework

Вы увидите это сообщение, в случаи успешно создано Compass проекта.

compass-install-success.png

Это команда создаст compass project в framework каталоге. Если каталог не существует, будет создан для вас. Сейчас откройте с генерированный каталог. Вы увидите два каталога и config файл.

compass-directory-sturcture.png

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

Пишим Код

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

$ compass watch

Эта команда будет следить за всеми изменениями внутри каталога sass, теперь можете удалить все файлы внутри sass и в stylesheets каталоге. Создайте новый файл с именем framework.scss внутри sass каталога. Обратите внимание, что scss расширение? Да, это не опечатка, файл нужно scss расширение. Компас может использовать два типа файлов: sass и scss. Вы можете увидеть разницу здесь. Теперь откройте файл framework.scss и давайте писать код.

/* Import compass reset module */
@import "compass";

/* Import reset module */
@import "compass/reset";

/* Define some variables */
$containerWidth :   978px;
$columnWidth :      5.5; //In percent
$column :           12; //Twelve columns

Теперь мы должны получить ширину выреза. Нужно немного заняться математикой. Вырез это расстояние между колонкой, в данном случае у нас есть двенадцать столбцов, поэтому вычитаем номер столбца с 1 по 11. Нам нужна ширина выреза здесь не количество колонок. Ширина первой колонки на количеством колонок.

5.5% × 12 = 66%

Это общая ширина колонки без выреза. В одной строке, столбце и выреза имеют общую ширину 100%, таким образом, вычесть 100 с общей шириной столбца.

100% - 66% = 34%

Последнее, разделить это число с числом выреза.

34% / ( 12 - 1 ) = 3.0909%

Это наша ширина выреза. И вот наша окончательная формула выреза.

$columnGutter   : (100 - ($columnWidth * $column)) / ($column - 1);

Давайте продолжим наш scss код.

/* Flexible image */
img {
  height: auto;
  max-width: 100%;
}

.container {
  padding: 0 15px;
  position: relative;

  // This is mixin from compass for clearing float
  @include pie-clearfix;
}

.row {
  width: 100%;
  margin: 0 auto;
  position: relative;

  // If you need different container width, you can easily
  // change $containerWidth variable;
  max-width: $containerWidth;

  @include pie-clearfix;
}

// Select all element that contains class 'col'
[class*="col"] {
  float: left;
  display: inline;
  min-height: 1px;
  position: relative;
  margin-left: 1% * $columnGutter;

  // Get rid of margin from first column
  &:first-child {
    margin-left: 0;
  }
}

Назад к математике, нам нужно от ширины столбцов column-1 к column-12. В компаса мы можем сделать итерации как мы делаем в JavaScript или PHP. И вот формула.

@for $i from 1 through $column {
  .col#{$i} {
    $colWidth: 1% * ($columnWidth * $i) + ($columnGutter *($i - 1));
    width: $colWidth;
  }
}

Запутались? Поясняем строка за строкой.

  • Line 1: Это итератор синтаксиса sass, вы можете увидеть в документацие. Цикл выполнится от 1 до 12.
  • Line 2: Это sass синтаксис интерполяция, в javascript синтаксис ‘col ‘+ $i  sass будет генерировать. От col1 до сol12 в css.
  • Line 3: Мы храним ширину формулы в переменной.
  • Line 4: Устанавливаем ширину колонки.

Последний, определить ширину столбцов для мобильных устройств с помощью медиа запросов.

@media only screen and (max-width: 767px) {
.row {
  max-width: 767px;
    [class*="col"] {
      width: 100%;
      margin-left: 0;
    }
  }
}

Ура! Мы завершили. Compass добавляет вашей разработке разнообразие. Вы можете использовать переменные, циклы и много другого. Есть куча полезных вещей, которые вы можете использовать в Compass. Чтобы узнать весь список полезных вещей в Compass можно просмотреть документацию.

Взято и переведено из ColorLabs – Оригинал статьи здесь: http://colorlabsproject.com/tutorials/create-css-grid-framework-with-compass/

Так же можно посмотреть их