—»     —»   Использование Compass в Sass
  Раздел: CSS/Style Sheets   Нет комментариев  

Использование Compass в Sass

В нашей предыдущей статье мы упоминали о Compass. Судя по официальному сайту, инструмент представляет собой платформу авторских разработок CSS с открытым исходным кодом.

Использование Compass в Sass

Вкратце, Compass – это расширение Sass и, как LESS-элемент в LESS, он оснащен множеством готовых к использованию CSS3-миксинов. Кроме того, он предоставляет некоторые другие элементы, которые делают его довольно мощным добавлением к Sass. Давайте с ним познакомимся.

Установка Compass

Compass, как и Sass, должен быть установлен на ваш компьютер. Но, если вы используете приложения вроде Scout App или Compass.app, то это вовсе не обязательно.

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

На Mac/Linux терминале

sudo gem install compass

В командной строке Windows

gem install compass

После успешной установки вы получите следующее оповещение:

Использование Compass в Sass

Затем, запустите следующую команду в вашей рабочей директории, чтобы добавить файлы проекта Compass.

compass init

Использование Compass в Sass

Настройка Compass

Если вы запустите команду compass init, то у вас должен появиться файл под названием config.rb. этот файл используется для конфигурации выходного результата проекта. Например, мы можем изменить названия предпочитаемых каталогов.

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

Исключаем строку комментария, сгенерированную Compass. Мы выставляем true, если нам нужно выводить комментарии, либо false, если это не требуется.

line_comments = false

Мы также можем определить результат вывода CSS. Есть 4 опции, из которых мы можем выбирать: :expanded, :compact, :compressed и :nested. Сейчас нам нужна опция :expanded, так как мы на этапе разработки.

output_style = :expanded

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

Наконец нам нужно просмотреть каждый файл в каталоге посредством данной командной строки:

compass watch

Использование Compass в Sass

Это командная строка, как и в Sass, будет следить за всеми изменениями в файлах, и создавать или обновлять соответствующие CSS-файлы. Но помните, что эту строку нужно запускать после того, как вы настроили проект в config.rb, в противном случае она просто проигнорирует изменения в файле.

CSS3-миксины

Перед тем, как мы перейдем к CSS3, в нашем основном .scss-файле нам нужно импортировать Compass посредством следующей строки «@import "compass";». Это импортируем все расширения в Compass. Но, если нам нужны только CSS3, мы также можем повторить это все более подробно при помощи строки @import "compass/css3".

Теперь давайте начнем разработку проекта при помощи Sass и Compass. В HTML-документе, предположив что вы уже создали его, нам нужно поместить следующую разметку:

<section>
<div> </div>
</section>

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

body {
background-color: #f3f3f3;
}
section {
width: 500px;
margin: 50px auto 0;
div {
width: 250px;
height: 250px;
background-color: #ccc;
margin: 0 auto;
}
}

И для того, чтобы у нашего прямоугольника были закругленные углы, мы можем включить CSS3-миксин Compass следующим образом:

body {
background-color: #f3f3f3;
}
section {
width: 500px;
margin: 50px auto 0;
div {
width: 250px;
height: 250px;
background-color: #ccc;
margin: 0 auto;
@include border-radius;
}
}

Этот миксин border-radius сгенерирует все необходимые браузерные префиксы и, по умолчанию радиус углов будет составлять 5 пикселей. Но мы также можем указать необходимый нам радиус следующим образом:
@include border-radius(10px);

section div {
width: 250px;
height: 250px;
background-color: #ccc;
margin: 0 auto;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}

Далее, следуя плану, нам нужно немного повернуть блок. Это довольно просто сделать при помощи Compass. Все, что нам нужно сделать, это просто запустить метод transformation следующим образом:

body {
background-color: #f3f3f3;
}
section {
width: 500px;
margin: 50px auto 0;
div {
width: 250px;
height: 250px;
background-color: #ccc;
margin: 0 auto;
@include border-radius(10px);
@include rotate;
}
}

Этот миксин также будет генерировать браузерные префиксы, и по умолчанию вращение будет составлять 45 градусов. Ознакомьтесь с только что сгенерированным CSS-кодом ниже:

section div {
width: 250px;
height: 250px;
background-color: #ccc;
margin: 0 auto;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

Compass Helpers (вспомогательные функции)

Одним из самых мощных свойств Compass является Helpers. Судя по официальному сайту, Compass Helpers представляют собой функции, которые позволяют встроить функции, представленные в Sass. Итак, давайте посмотрим на следующие примеры, чтобы все стало более понятным.

Добавляем файлы @font-face

В данном примере мы собираемся добавить собственные шрифты при помощи правила @font-face. В чистом CSS3, код может выглядеть примерно так, как показано ниже, и содержать 4 разных типа шрифтов.

@font-face {
font-family: "MyFont";
src: url('/fonts/font.ttf') format('truetype'),
url('/fonts/font.otf') format('opentype'),
url('/fonts/font.woff') format('woff'),
url('/fonts/font.eot') format('embedded-opentype');
}

С помощью Compass мы можем сделать то же самое гораздо проще при помощи вспомогательной функции font-files();

@include font-face("MyFont", font-files("font.ttf", "font.otf", "font.woff", "font.eot"));

Вышеприведенный код будет генерировать результат, абсолютно идентичный с тем, который можно получить при помощи CSS3-кода, который был приведен чуть ранее. Он также автоматически определит тип шрифта и добавит его в синтаксис format().

Тем не менее, если мы взглянем на код чуть внимательнее, то заметим, что здесь мы не добавляли путь до шрифта (/fonts/). Так как же compass знает, где расположены эти шрифты? Что же, не путайтесь, этот путь представляет собой производное из файла config.rb, где путь указан в параметре fonts_path.

fonts_dir = "fonts"

Давайте предположим, что мы изменили параметр на fonts_dir = "myfonts", тогда сгенерированный код будет следующим: url('/myfonts/font.ttf'). По умолчанию, когда мы не указываем путь, Compass направляет его на stylesheets/fonts.

Добавляем изображения

Давайте создадим еще один пример, на этот раз мы будем добавлять изображение. Добавление изображений посредством CSS – это довольно распространенная практика. Мы реализуем это при помощи параметра background-image следующим образом:

div {
background-image: url('/img/the-image.png');
}

В Compass, вместо того, чтобы использовать функцию url(), мы можем заменить ее вспомогательной функцией image-url(), а также как и в случае с вышеприведенным примером @font-face, мы можем полностью игнорировать путь, а compass сделает все за нас.

Этот код также генерирует те же CSS-выражения, как и в первом отрывке кода.

div {
background-image: image-url(the-image.png);
}

Вдобавок, Compass также оснащен вспомогательной функций габаритов изображения, которая напрямую определяет ширину и высоту изображения, так что, если нам нужно будет указать оба параметра в нашем CSS-коде, мы можем добавить дополнительные две строки кода следующим образом:

div {
background-image: image-url("images.png");
width: image-width("images.png");
height: image-height("images.png");
}

В результаты мы получим вроде этого:

div {
background-image: url('/img/images.png?1344774650');
width: 80px;
height: 80px;
}

В завершение

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

И как вы уже знаете, Sass – это не единственный CSS-препроцессор. Есть также LESS, который мы уже с вами обсуждали. В одном из следующих руководств мы постараемся сравнить эти два препроцессора CSS-кода.

* Скачать исходные файлы
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: SASS, CSS
Опубликовал Design FactoRy   Прочитано (раз): 21681   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031