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

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

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

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

Как видно из изображения выше, наша визитная карточка содержит контактную информацию о «Джоне» – профиль изображения, некоторую информацию о Джоне, такую ​​как его имя, адрес электронной почты, номер телефона и краткое описание того, кем он является и чем занимается. , Это будет наш раздел «био».

Ниже приведены его социальные идентичности в виде социальных кнопок. Это будет наш «социальный» раздел.

Подготовка активов

Прежде чем приступить к написанию кода, вот несколько основных моментов, которые нужно подготовить. Я понимаю, что на вашем компьютере должны быть установлены Sass и Compass.

(Если вы не уверены, установили ли вы их, вы можете запустить эту команду sass -v или compass -v через командную строку или терминал или вы всегда можете использовать приложение, например Разведчик приложение если вы предпочитаете работать с графическим интерфейсом.)

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

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

HTML-разметка

Ниже приведена HTML-разметка нашей vCard, она довольно проста. Все разделы заключены в логический тег HTML5

<

section>,

• Торик Фирдаус
• me@email.com
• (+62) 1.2345.678.9
• Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Suspendisse dolor neque, eleifend в pellentesque quis, convallis сидеть amet Tellus. Etiam et auctor arcu.

• facebook
• щебет
• Google+
• Dribbble

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

Конфигурация компаса

Нам нужно немного настроить Compass, раскомментировав несколько строк в файле config.rb следующим образом:

Здесь вы можете выбрать предпочитаемый стиль вывода (может быть переопределен через командную строку):

output_style =: расширенный

Включить относительные пути к ресурсам через вспомогательные функции компаса. Раскоментируйте:

lative_assets = true

Чтобы отключить отладку комментариев, которые отображают исходное местоположение ваших селекторов. Раскоментируйте:

line_comments = false

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

Импорт файлов

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

@import “компас”;

И я лично предпочитаю сбросить стили по умолчанию из браузеров, чтобы вывод отображался более согласованно. Компас, в этом случае, имеет Сбросить модуль, Этот модуль основан на Сброс CSS Эрика Мейера и может быть импортирован с использованием;

@import “компас / сброс”;

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

@import “normalize”;

Рекомендуемое чтение: просмотр уровня приоритета стиля CSS

переменные

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

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

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

ширина: 500 пикселей;
$ space: $ width / 25; // = 20 пикселей

И переменная $ space, как вы можете видеть, будет интервалом по умолчанию или размером столбца в нашей vCard, который в этом примере будет 20px;

В Compass также есть помощники для определения размера изображения, и мы будем использовать эту функцию в нашем профиле изображения следующим образом;

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

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

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

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

.плыть налево {
плыть налево;
}
.box-sizing {
@include box-sizing (border-box);
}

Стили

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

html {
высота: 100%;
цвет фона: $ base;
}

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

.vcard {
ширина: $ ширина;
поле: 50px авто;
цвет фона: темнее ($ base, 5%);
граница: 1px solid $ dark;
@include border-radius (3px);
ul {
отступы: 0;
поле: 0;
li {
стиль списка: нет;
}
}
}

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

Визитная карточка также будет иметь радиус закругленных углов 3 пикселя, что достигается с помощью Compass CSS3 Mixins; граница радиуса (3px).
Био раздел
Как мы уже отмечали в начале этого урока, визитную карточку можно разделить на два раздела. Эти вложенные стили ниже будут определять первый раздел, который содержит профиль изображения с несколькими деталями (имя, адрес электронной почты и телефон).

.bio {
Граница внизу: 1px solid $ dark;
отступ: $ пробел;
@extend .box-sizing;
img {
@extend .float-left;
дисплей: блок;
border: ($ space / 4) solid #ffffff;
}
.detail {
@extend .float-left;
@extend .box-sizing;
цвет: темнеет ($ base, 50%);
прибыль: {
слева: $ пробел;
внизу: $ space / 2;
}
ширина: $ ширина – (($ space * 3) + $ img);
li {
&:перед {
ширина: $ пробел;
высота: $ пространство;
margin-right: $ пробел;
семейство шрифтов: “ModernPictogramsNormal”;
}
& .name: before {
содержание: “f”;
}
& .email: перед {
содержание: «м»;
}
& .phone: перед {
содержание: “N”;
}
}
}
}

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

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

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

.Социальное {
цвет фона: $ темный;
ширина: 100%;
отступ: $ пробел;
@extend .box-sizing;
ul {
выравнивание текста: по центру;
li {
дисплей: встроенный блок;
ширина: 32 пикселя;
высота: 32 пикс;
{
текстовое оформление: нет;
дисплей: встроенный блок;
ширина: 100%;
высота: 100%;
текстовый отступ: 100%;
пустое пространство: nowrap;
переполнение: скрытое;
}
}
}
}

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

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

@import “social / *. png”;

Социальный / выше относится к папке, где мы храним значки. Эта папка должна быть вложена в папку с изображениями. Теперь, если мы посмотрим на нашу папку с изображениями, мы увидим спрайт-изображение, сгенерированное со случайными символами, например, social-sc805f18607.png. На данный момент, ничего еще не происходит в front-end, пока мы не применим стили со следующей строкой.

@ Включить все социальные спрайты;

Конечный результат

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

В случае, если мы думаем, что 500px будет слишком широким позже, нам нужно всего лишь изменить значение в переменной $ width – например, 350px – остальное будет «волшебным образом» отрегулировано. Вы также можете поэкспериментировать с переменной цвета.

Вывод

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

Дальнейшее чтение: Официальная документация на языке Sass

Этот пост закрывает нашу серию Sass, и мы надеемся, что вам понравилось. Если у вас есть какие-либо вопросы по этому вопросу, не стесняйтесь добавлять их в поле для комментариев ниже.