Compass - фреймворк под SASS (SCSS)

Reading time ~4 minutes

Приступаем к изучению Compass. А что такое?

Говоря официальным языком - это фреймворк для SASS. Если неофициальным - то библиотека (коллекция) готовых

1
mixin
‘ов, которые можно подключать к рабочему проекту. В этой коллекции есть наборы миксинов практически на все случаи жизни - для создания скругленных углов, линейных и радиальных градиентов, теней для блоков и текста и многое другое.

Но вернемся к Compass - ведь это практически неотъемлемая часть SASS. И логично было бы продолжить изучение последнего, перейдя к Compass. Этот фреймворк, также как и сам SASS, является приложением, написанном на Ruby. Установка Compass производится точно также, как и SASS - с помощью менеджера пакетов gem.

Запускаем терминал Windows сочетанием клавиш Win+R и вводим в нем команду:

gem install compass

Если все прошло успешно, то вывод командной строки должен быть следующим:

Успешная установка Compass под Windows

Введем в терминале команду справки по этому фреймворку, чтобы получить полный список доступных команд (обратите внимание, что у ключей команды

1
compass
нет двойных дефисов, как у sass):

compass help

Самые нужные команды из этого списка:

  • 1
    watch
    
    - мониторинг scss-файлов (аналог этой команды в sass)
  • 1
    create
    
    - создать новый compass-проект
  • 1
    init
    
    - создать новый compass-проект из существующего css-проекта

Давайте создадим новый проект. Перейдем через терминал в заранее подготовленную для этой цели директорию и запустим там команду:

compass create

Если теперь взглянуть на содержимое этой директории, то увидим интересные вещи:

Содержимое директории с Compass-проектом

Видим, что появились папки

1
stylesheets
,
1
sass
, файл
1
config.rb
. Все они созданы командой
1
compass
и являются заготовками для будущего проекта.

В папке

1
sass
находятся scss-файлы, в папке
1
stylesheets
- css-файлы, результат преобразования из scss. Файл
1
config.rb
- это конфигурация текущего проекта. Настройки минимальные и очень просты:

Файл настроек проекта Compass

Переменная

1
css_dir
со значением
1
stylesheets
- это “выходная” папка проекта, в которой хранятся css-файлы, сконвертированные из scss-файлов. Переменная
1
sass_dir
хранит имя директории, в которой находятся рабочие scss-файлы. Переменная
1
images_dir
- сюда складываются все изображения проекта. Ну и переменная
1
javascript_dir
- здесь лежат все js-скрипты.

Значения всех этих переменных можно изменить на свой вкус - кто как привык. Например,

1
images
на
1
img
,
1
javascript
на
1
js
,
1
stylesheets
на
1
styles
. Но при этом не забыть переименовать соответствующие папки в проекте.

Давайте откроем файл

1
screen.scss
и обратим внимание на одну строчку (она там действительно одна, не считая комментариев):

Compass с подключенным модулем Reset

Эта строка подключает в проект фреймворк Compass и один из его модулей - файл сброса CSS-стилей

1
reset
. Как известно, таких файлов существует несколько видов, но в данном случае используется самый популярный - от Эрика Мейера. Модуль
1
reset
подключается автоматически, при создании нового проекта. Но, помимо этого модуля, у Compass существуют еще несколько, которые нужно подключать аналогично, но вручную.

Теперь нам стоит отвлечься от терминала и перейти в браузер. Вводим в адресной строке http://compass-style.org/, чтобы попасть на домашнюю страницу проекта.

Все оставшееся время мы будем проводить там за увлекательным чтением документации. Переходим по ссылке reusable patterns, где размещены сами модули Compass. По своему функционалу они разбиты на три большие группы: “CSS3”, “Typography”, “Utilities”. К примеру, перейдем в раздел “CSS3”. Чтобы воспользоваться миксинами модуля “CSS3”, необходимо подключить этот модуль.

Делается это так:

Подключение модуля CSS3 фреймворка Compass

Ниже представлен список ссылок с миксинами, отсортированными по их функционалу. К примеру, “Border Radius” - это

1
mixin
для создания скругленных углов блоков. Аналогично, подключаем другой модуль (к примеру - “Typography”) и применяем на практике наработки других веб-дизайнеров.

Удобство использования фреймворка Compass и его миксинов я расписывать не буду - это и так ясно. И что касается применения каждого из миксинов в отдельности - также. На сайте они описаны подробно и с примерами. Пересказ всех их является пустой задачей. Просто учите английский, кто не знает.

На этом все.


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017