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. Призупиняйте доріг, не виходячи за межі дозволу, перейдіть до списку. Етіам і аутор арку.
Як ви можете бачити вище, соціальні ідентичності, включені до «соціальних»розділ структурований в елементах списку, щоб ми могли легко відображати їх поруч. Кожному з них надається назва класу, що відповідає цій конвенції 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, і ми сподіваємося, що вам сподобалося. Якщо у Вас виникли питання стосовно цієї теми, не соромтеся додати її в поле для коментарів нижче.