—»     —»   Руководство Sass: разработка онлайн-vCard при помощи Sass и Compass
  Раздел: Руководства   Нет комментариев  

Руководство Sass: разработка онлайн-vCard при помощи Sass и Compass



Сегодня мы продолжим наше обсуждение Sass, и это будет последняя часть нашего руководства, посвященного Sass. На этот раз вместо теории мы хотим перейти к практической части. Давайте займемся разработкой онлайн vCard при помощи Sass и Compass.

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

- Введение в Sass: установка и основы
- Использование Compass в Sass

Планирование и разработка прототипа

При работе с Sass и Compass планирование очень важно. Нам нужно иметь перед глазами картинку того, как должен выглядеть финальный результат (например, страница или веб-сайт). Будет полезно пробежаться по сайтам вроде Behance или Dribbble в поисках идей. Мы можем набросать черновик на листе бумаги, либо создать прототип наподобие примера, приведенного ниже.

Руководство Sass: разработка онлайн-vCard при помощи Sass и Compass

Как видно из изображения выше, vCard содержит контактные данные о Джоне: фотографию, информацию о Джоне (имя, адрес электронной почты, номер телефона), а также краткое описание Джона. Это будет наш раздел bio.

Ниже можно видеть его социальные идентификаторы в виде кнопок на социальные сети. Это будет наш раздел social.

Подготавливаем элементы

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

(если вы не уверены в том, установлены они или нет, то можете посредством командной строки запустить команду sass -v или compass –v, либо вы всегда можете воспользоваться приложением Scout, если вам больше нравится работать с графическим интерфейсом).

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

Руководство Sass: разработка онлайн-vCard при помощи Sass и Compass

HTML-разметка

Ниже вы можете видеть HTML-разметку для нашей vCard – она очень проста. Все разделы обернуты в логический HTML5-тег «section»:

<div class="vcard">
<section class="bio cf">
<img src="images/me.jpg" width="80" height="80">
<div class="detail">
<ul>
<li class="name">Thoriq Firdaus</li>
<li class="email">me@email.com</li>
<li class="phone">(+62)1.2345.678.9</li>
<li class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor neque, eleifend at pellentesque quis, convallis sit amet tellus. Etiam et auctor arcu.</li>
</ul>
</div>
</section>
<section class="social cf">
<ul>
<li class="social-facebook"><a href="#">Facebook</a></li>
<li class="social-twitter"><a href="#"> Twitter</a></li>
<li class="social-google"><a href="#">Google+</a></li>
<li class="social-dribbble"><a href="#">Dribbble</a></li>
</ul>
</section>
</div>

Как можно видеть выше, социальные идентификаторы, включенные в раздел «social», структурированы посредством элементов списка, поэтому мы можем без труда отобразить их друг за другом. Каждому пункту задан класс по следующему принципу: social-facebook, social-twitter, social-google и так далее.

Настройка Compass

Нам нужно немного настроить Compass, сняв комментирование с некоторых строк кода в файле config.rb:

# Здесь вы можете выбрать предпочитаемый стиль вывода (можно переписать при помощи командной строки):
output_style = :expanded

# Для того чтобы разрешить относительные пути к элементам посредством вспомогательных функций compass. Снимаем комментарий:
relative_assets = true

# Для того чтобы отключить дебаггинг комментариев, которые отображают исходное расположение ваших селекторов. Снимаем комментарий:
line_comments = false

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

Импортируем файлы

Так как мы будем использовать compass, нам нужно импортировать его при помощи;

@import "compass";

А также лично мы рекомендуем вам сбросить исходные стили браузеров, чтобы получить примерно одинаковый результат во всех браузерах. Compass в данном случае имеет модуль Reset (сброс). Этот модуль основан на CSS-сбросе от Эрика Мейера, и может быть импортирован при помощи;

@import "compass/reset";

Тем не менее, мы предпочитаем использовать Normalize, который, к счастью, также присутствует в формате Sass/Scss. Файл можно скачать здесь. Затем нужно сохранить его в рабочий каталог sass, и импортировать его в наши таблицы стилей.

@import "normalize";

Переменные

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

$base: #fff;
$dark: darken($base, 10%);

А переменная $width, приведенная ниже, будет определять ширину нашей страницы. Это также будет основной определения размеров остальных элементов.

$width: 500px;
$space: $width / 25; // = 20px

А переменная $space, как вы видите, будет обозначать исходное расстояние или размер колонки в нашей vCard, которое в нашем примере будет 20 пикселей.

Руководство Sass: разработка онлайн-vCard при помощи Sass и Compass

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

$img: image-width("me.jpg") + (($space / 4) * 2);

В вышеприведенном коде дополнение (($space / 4) * 2) необходимо для вычисления общей ширины изображения, включая границу, которой будет оформлено наше изображение. Рамка будет состоять из 2 сторон: верхней и нижней / левой и правой, поэтому мы просто умножаем результат на 2.

Наследственные селекторы

В нашей таблице стилей будет несколько селекторов, которые будут иметь те же правила стилизации. Чтобы избежать повторения нашего кода, нам нужно указать эти стили в самом начале, а затем передавать их по необходимости при помощи @extend. Этот метод в Sass известен как наследственность селекторов – очень удобная функция, которой так не хватает в LESS.

.float-left {
float: left;
}
.box-sizing {
@include box-sizing(border-box);
}

Стили

Когда все необходимое уже реализовано, приходит время оформить нашу vCard, начиная от цвета фона, заканчивая нашим HTML-документом:

html { 
height: 100%;
background-color: $base;
}

vCard

Следующие стили будут определять оболочку нашей vCard. Если вы ранее работали с LESS, то этот код будет вам знаком и понятен.

.vcard {
width: $width;
margin: 50px auto;
background-color: darken($base, 5%);
border: 1px solid $dark;
@include border-radius(3px);
ul {
padding: 0;
margin: 0;
li {
list-style: none;
}
}
}

Ширина оболочки наследует значение из переменой $width. Цвет фона на 5% темнее основного цвета, а цвет границ будет темнее на 10%. Такое распределение цветов реализуется при помощи функций из Sass.

vCard также будет иметь закругленные на 3 пикселя углы, что реализуется при помощи CSS3 миксинов в Compass; border-radius(3px).

Раздел bio

Как мы уже ранее упоминали в этом руководстве, vCard может быть разделена на два раздела. Вложенные стили, приведенные ниже, будут определять первый раздел, который содержит изображение профиля и некоторые детали (имя, email и телефон).

.bio {
border-bottom: 1px solid $dark;
padding: $space;
@extend .box-sizing;
img {
@extend .float-left;
display: block;
border: ($space / 4) solid #ffffff;
}
.detail {
@extend .float-left;
@extend .box-sizing;
color: darken($base, 50%);
margin: {
left: $space;
bottom: $space / 2;
}
width: $width - (($space * 3) + $img);
li {
&:before {
width: $space;
height: $space;
margin-right: $space;
font-family: "ModernPictogramsNormal";
}
&.name:before {
content: "f";
}
&.email:before {
content: "m";
}
&.phone:before {
content: "N";
}
}
}
}

В вышеприведенном коде нам хочется кое-что выделить. Ширина селектора .detail указана при помощи уравнения $width - (($space * 3) + $img);.

Это уравнение используется для динамического вычисления значения ширины, исключая ширину изображения профиля и промежутки (поля и отступы) от общей ширины vCard.

Руководство Sass: разработка онлайн-vCard при помощи Sass и Compass

Раздел social

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

.social {
background-color: $dark;
width: 100%;
padding: $space;
@extend .box-sizing;
ul {
text-align: center;
li {
display: inline-block;
width: 32px;
height: 32px;
a {
text-decoration: none;
display: inline-block;
width: 100%;
height: 100%;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
}
}
}

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

Прежде всего, нам нужно поместить наши иконки в специальную папку – давайте назовем нашу папку /social/, например. Возвращаясь обратно к таблице стилей, нужно объединить эти иконки следующим правилом @import.

@import "social/*.png";

В коде, приведенном выше, social/ ведет к папке, где мы храним иконки. Эта папка должна быть вложена в папку images. Теперь, если мы посмотрим нам нашу папку images, то сможем видеть спрайт-изображение, сгенерированное с различными символами в названии вроде social-sc805f18607.png. На данном этапе во внешнем интерфейсе не будет происходит ничего. До тех пор, пока мы не применим стили посредством следующей строки.

@include all-social-sprites;

Финальный результат

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

Руководство Sass: разработка онлайн-vCard при помощи Sass и Compass

Если вам покажется, что 500 пикселей – это слишком широко, вам всего лишь нужно изменить значение переменной $width. Например, на 350 пикселей – и все остальное магическим образом так же изменится в размере. Вы можете также поэкспериментировать с переменной, отвечающей за цвет.

Руководство Sass: разработка онлайн-vCard при помощи Sass и Compass

Посмотреть демо | Скачать исходные файлы
Внимание! У вас нет прав для просмотра скрытого текста.


Завершение

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

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

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

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

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


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31