Sass Підручник Будівництво онлайн візитної картки з Sass & Compass

Сьогодні ми продовжимо нашу дискусію на Sass, і це буде остаточна частина нашої серії Sass. Цього разу, а не теоретичного підходу, це буде трохи більш практичним. Ми створимо онлайн візитну картку за допомогою Sass разом з Compass.

Ідея полягає в тому, що візитна картка повинна бути легко регульованою для кольорів і розмірів. У процесі ми будемо використовувати декілька функцій Sass і Compass Змінні, міксини, операції, успадкування селекторів, вкладені правила і Compass Helpers. Якщо ви пропустили наші попередні повідомлення з цієї серії, ми пропонуємо вам переглянути їх перш, ніж продовжити.

Планування та монтаж каркасу

При роботі з Sass і Compass, планування є дуже важливим. Як правило, нам потрібно мати загальну картину того, як буде наш кінцевий результат (наприклад, сторінка або веб-сайт). Це буде корисно для перегляду деяких сайтів, таких як Behance або Dribbble для ідей. Потім ми можемо розробити ідеї на папері або побудувати їх у каркасному вигляді, як це наведено нижче.

Як видно з наведеного вище зображення, наша візитна картка містить Контактна інформація про "Джон" - профіль зображення, деякі відомості про Джона, такі як його ім'я, адреса електронної пошти, номер телефону та короткий опис того, хто він є або що він робить. Це буде наш "біологічний" розділ.

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

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

Перед тим, як почати кодування, ось деякі основні елементи, щоб підготуватися. Я розумію, що до теперішнього часу ви повинні мати Sass і Compass.

(Якщо ви не впевнені, що їх встановили, ви можете запустити цю команду sass -v або компас -v через Командний рядок або термінал або, ви завжди можете використовувати додаток, як Scout App, якщо ви бажаєте працювати з графічним інтерфейсом.)

Нам також знадобиться кілька активів, таких як значки шрифтів і значки соціальних медіа, які можна отримати з таких місць, як ModernPictograms.

Нарешті, оскільки ми використовуємо командний рядок / термінал для цього підручника, нам потрібно перейти до нашого каталогу та запустити проект Compass з цими двома командами: компас init і годинник компаса.

Розмітка HTML

Нижче наведено розмітку HTML нашої візитної картки. Усі розділи переносяться в логічний тег HTML5

      Торік Фірдаус
 [email protected]
 (+62) 1.2345.678.9
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Призупиняйте доріг, не виходячи за межі дозволу, перейдіть до списку. Етіам і аутор арку.
 
 
 
   Facebook
  Twitter
 Google+
 Dribbble

Як ви можете бачити вище, соціальні ідентичності, включені до «соціальних»розділ структурований в елементах списку, щоб ми могли легко відображати їх поруч. Кожному з них надається назва класу, що відповідає цій конвенції social-facebook, social-twitter, social-google і так далі.

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

Нам потрібно трохи налаштувати Compass, розкомментацію декількох рядків config.rb файл:

 # Тут можна вибрати бажаний стиль виводу (можна перевизначити за допомогою командного рядка): output_style =: expanded # Щоб увімкнути відносні шляхи до активів через допоміжні функції компаса. Uncomment: relative_assets = true # Щоб вимкнути налагодження коментарів, які відображають початкове розташування ваших селекторів. Розчитай: line_comments = false

Якщо ви не можете знайти config.rb Файл, ви, ймовірно, не запустили цю команду компас init у каталозі проекту.

Імпортування файлів

Оскільки ми будемо використовувати компас, нам потрібно імпортувати його за допомогою;

 @import "компас";

І моє особисте бажання відмовитися від стилів за промовчанням у браузерах, щоб виводити текст було більш послідовно. Компас, в даному випадку, має модуль Reset. Цей модуль заснований на перезавантаженні CSS Еріка Мейєра і може бути імпортовано за допомогою;

 @import "компас / скидання";

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

 @ імпорт "нормалізувати";

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

Змінні

Ми, безумовно, матимемо кілька константних значень у таблиці стилів, таким чином ми будемо зберігати їх у змінних, і ці дві змінні нижче визначатимуть базовий колір нашої візитної картки..

 $ base: #fff; $ темно: темніше ($ base, 10%);

Поки $ width змінна нижче буде шириною нашої сторінки; це також буде основою для визначення інших розмірів елементів.

 $ width: 500px; $ простір: $ width / 25; // = 20px

І то $ простір змінна, як ви можете бачити, буде інтервал за замовчуванням або розмір стовпця в vCard, який у цьому прикладі буде 20px;

Компас також має помічників для виявлення розміру зображення, і ми будемо використовувати цю функцію на нашому зображенні профіль, наступним чином;

 $ img: ширина зображення ("me.jpg") + (($ space / 4) * 2);

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

Успадкування селектора

Є, мабуть, кілька селекторів у нашому стилі, які матимуть однакові правила укладання. Щоб уникнути повторення в нашому коді, ми повинні вказати ці стилі в першу чергу і успадкувати їх з @extend директиви, коли це необхідно. Цей метод, в Sass, відомий як Успадкування селектора, дуже корисна функція, яка відсутня в LESS.

 .float-left float: left;  .box-sizing @include box-sizing (кордоні);

Стилі

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

 html висота: 100%; фоновий колір: $ base;

vCard

Наступні стилі визначають оболонку vCard. Якщо ви раніше працювали з LESS, цей код буде вам знайомий і легко перетравлюється.

 .vcard width: $ width; запас: 50px auto; фоновий колір: темніше ($ base, 5%); кордон: 1px твердий $ темний; @include border-radius (3px); ul padding: 0; маржа: 0; li list-style: none;

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

Візитна картка також матиме 3px радіус закруглених кутів, що досягається за допомогою Compass CSS3 Mixins; кордон-радіус (3px).

Біо секція

Як ми вже відзначали на початку цього підручника, візитну картку можна розділити на два розділи. Ці вкладені стилі нижче визначатимуть перший розділ, що містить профіль зображення з кількома деталями (ім'я, електронна пошта та телефон).

 .bio border-bottom: 1px solid $ dark; padding: $ space; @extend .box-sizing; img @extend .float-left; дисплей: блок; border: ($ space / 4) твердий #ffffff;  .detail @extend .float-left; @extend .box-sizing; колір: темніше ($ основа, 50%); margin: left: $ space; дно: $ space / 2;  ширина: $ width - (($ space * 3) + $ img); li &: before width: $ space; висота: $ space; margin-right: $ space; сімейство шрифтів: "ModernPictogramsNormal";  & .name: before content: "f";  & .email: до content: "m";  & .phone: до зміст: "N";

Існує одне з наведеного вище коду, який, на нашу думку, потрібно прийняти. Ширина в .детально з цим рівнянням задається селектор $ width - (($ space * 3) + $ img);.

Це рівняння використовується для динамічного обчислення деталей ширина шляхом вирахування ширини профілю зображення і пропусків (відступу і запас) від загальної ширини vCard.

Соціальний розділ

Нижче наведено стилі для другого розділу vCard. Тут фактично немає різниці з звичайним CSS, тільки тепер вони вкладені, і кілька значень визначаються за допомогою змінних.

 .соціальний фоновий колір: $ темний; ширина: 100%; padding: $ space; @extend .box-sizing; ul text-align: center; li відображення: вбудований блок; ширина: 32px; висота: 32px; a text-decoration: none; дисплей: вбудований блок; ширина: 100%; висота: 100%; text-indent: 100%; білий простір: nowrap; переповнення: приховано;

У цьому розділі ми покажемо іконки соціальних медіа, використовуючи техніку спрайту зображень, а Compass має функцію, яка виконує цю роботу швидше.

Перш за все, ми повинні помістити наші іконки в спеціальну папку - назвемо папку / соціальний /, наприклад. Повернувшись до таблиці стилів, об'єднайте ці піктограми з наступним @import правило.

 @import "соціальний / *. png";

The соціальний / вище, зверніться до папки, де ми зберігаємо іконки. Ця папка має бути вкладена в папку зображень. Тепер, якщо ми подивимося в нашій папці зображень, ми повинні побачити зображення спрайту, створеного з випадковими символами, наприклад social-sc805f18607.png. На цьому етапі нічого ще не відбувається на передньому кінці, поки ми не застосуємо стилі з наступним рядком.

 @ включають загальносоціальні спрайти;

Кінцевий результат

Нарешті, після всієї важкої роботи ми тепер можемо побачити такий результат:

У випадку, якщо ми думаємо про це 500px пізніше занадто широкий, нам потрібно лише змінити значення в $ width змінна - наприклад, 350px - решта будуть “чарівно” регулювати. Також можна експериментувати з змінною кольору.

Переглянути демонстрацію
Завантажити джерело

Висновок

У цьому навчальному посібнику ми показали вам, як створити просту візитну картку онлайн з Sass і Compass; це лише приклад. Sass і Compass дійсно потужні, але іноді це не потрібно. Наприклад, коли ми працюємо на веб-сайті з кількома сторінками і, можливо, буде потрібно лише менше рядків стилів, використання Sass і Compass вважається надмірним.

Цей пост закриває нашу серію Sass, і ми сподіваємося, що вам сподобалося. Якщо у Вас виникли питання стосовно цієї теми, не соромтеся додати її в поле для коментарів нижче.