Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sass
Webdesign

Готуємо смачні Sass міксини

by
Difficulty:IntermediateLength:LongLanguages:

Ukrainian (українська мова) translation by Andy Yur (you can also view the original English article)

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

Картинка превью іконки: hand mix egg з PhotoDune.

Зверніть увагу: ви можете відразу завантажити файли з кодами, тим самим ви зрозумієте що ми будемо створювати і як виглядають Sass файли.


Я використовую Sass під час фронтенд розробки вже більше року і міксини я став використовувати з самого початку. Відразу помітивши, що час, який я витрачаю на написання таблиць стилів, значно зменшилася, неважливо з наскільки великим проектом я працюю. Але що ж таке міксини? Інформація з Sass веб-сайту:

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

Погляньте на це з іншого кута, міксини - генератори коду. Ви створюєте миксин в Sass таблиці стилів, використовуючи директиву @mixin, вказуєте правила CSS, які даний миксин повинен додавати, потім викликаєте їх в оголошенні, кожен раз коли ви хочете використовувати дані правила. В основному, я використовую міксини для додавання функціоналу CSS3, наприклад box-shadows, text-shadows і border-radius. Більшість з цих властивостей в повному обсязі підтримуються і для роботи у всіх браузерах вимагають Вендорний префіксів, таких як -webkit-, -moz-, -ms-, -o-. Замість того, щоб писати п'ять правил кожен раз, коли мені потрібно скористатися функціоналом CSS3, я можу викликати миксин, який займає один рядок, після чого буде створено необхідний CSS.


Крок 1: Переконайтеся, що на вашому комп'ютері встановлено Ruby

Для початку відкрийте термінал (командний рядок на Windows) і переконайтеся, що у вас встановлений Ruby, далі поставте гем Sass. Термінал можна знайти наступним чином:

  • Mac OS X: Програми > Утліти > Термінал
  • Linux: Програми > Стандартні > Термінал
  • Windows: Стартc> Командний рядок

Після того як термінал буде відкритий, введіть наступну команду, щоб переконатися, що Ruby встановлений. Не потрібно писати знак долара - це ваш плейсхолдер.

Вам повинна відобразиться інформація про шляхи /usr/local/bin або повідомлення про помилку, якщо Ruby не встановлено. Ось висновок мого OS X терміналу:

Terminal output for which ruby command

Якщо ви бачите помилку або знаєте, що Ruby у вас не встановлений, ознайомтеся з наступними ресурсами, щоб почати роботу без зайвих проблем, під час установки. Процес установки Ruby НЕ буде освячений в даному туторіали, але відмінно документований на сайтах в списку нижче.


Крок 2: Встановіть гем Sass

Після того, як ви перевірили чи встановили мову Ruby, установка Sass не викличе складнощів. У терміналі введіть команду: $ gem install sass. Якщо у вас немає відповідних прав, необхідно запустити команду з sudo ( Super User Do ), ось так: $ sudo gem install sass. Через кілька секунд, ви повинні побачити висновок подібно скриншоту нижче.

Terminal output for Sass gem installation


Крок 3: Скачайте і встановіть LiveRealod

Вам не потрібно додаток для компіляції на подобі, LiveRealod, Compass або CodeKit, щоб скомпілювати Sass в звичайний CSS, проте з ними знайомство з препроцесором буде набагато простіше. CodeKit тільки для OS X, LiveRealod в основному для OS X, є бета версія для Windows; Compass працює на OS X, Windows і Linux. Ліцензія коштує від $10 до $25 на момент написання статті, але це варто того, в тому випадку якщо ви часто використовуєте Sass під час розробки.

Варто згадати, що Sass буває двох типів .sass і .scss. Не буду вдаватися в подробиці, я використовую .scss синтаксис, так як він більше нагадує звичайний CSS і компілюється без проблем.

Після того, як ви налаштували компілятор, вам слід налаштувати робочі директорії з HTML і CSS файлами. Для цього туторіал, я створив простий приклад під назвою Write Your Own Sass Mixins. Нижче ви можете побачити файлову структуру, про яку йтиметься в цій статті. Якщо ви до цих пір не завантажили файли з кодами, будь-ласка зареєструйтеся і додайте Museo Sans і Droid Serif файли в директорію / fonts. Дані шрифти необхідні для деяких Міксини, які будуть створені пізніше в даному туторіали.

Так як я вибрав LiveReload, ми налаштуємо його, щоб він стежив за змінами і компілював scss в CSS. Коду буде запущений LiveRealod, ви повинні побачити вікно з привітанням, показане нижче. Перемістіть робочу директорію в сайдбар з відслідковувати директоріями (Monitored Folders) у вікні LiveReload.

Drag your working folder into LiveReload to start watching for changes

Далі, погляньте на скомпілювати Sass, LESS, Stylus, Coffescript і інші секції. Натисніть на опції (Options) для вибору шляху, куди буде поміщений кінцевий, скомпільований файл.

Check the Compile SASS, LESS, Stylus, CoffeeScript and Others box

Ви повинні побачити порожню таблицю з підсвіченими шляхами і scss / main.scss з галочкою, на першому рядку. Натисніть налаштувати кінцеву папку (Set Output Folder). За замовчуванням буде обраний каталог CSS. Натисніть на налаштувати кінцеву папку, далі підтвердити.

Selecting your output folder for compiled Sass
Selecting your output folder for compiled Sass
Selecting your output folder for compiled Sass

Оновлення ваш index.html додавши даний код, після чого поновіть браузер. Ваш index повинен виглядати, як на зображенні нижче.

A basic index.html file

Для LiveRealod є доповнення для браузерів FireFox і Chrome, в тому випадку, якщо ви хочете скоріше почати роботу, швидше за все буде скопіювати Javascript код (з вікна LiveReload) в ваш index.html, вставте його відразу перед закриває body тегом. Після того як даний шматочок коду буде додано, LiveReload буде відстежувати зміни HTML і Sass файлів і автоматично оновлювати сторінку в браузері, ніяких більше Command + R кожні кілька хвилин.

Тепер, все необхідне готове і ми можемо приступити до створення Міксини, компілятор зробить решту роботи за нас.


Крок 4: Border Radius - ваш перший миксин

Як я згадав раніше, я використовую безліч особливостей і функцій CSS3 для створення структури веб-сторінок. Проблема полягає в тому, що дані властивості вимагає вказівки Вендорний префіксів, на що у мене не вистачає терпіння, робити це вручну. Мені не доведеться дублювати п'ять схожих CSS рядків кожен раз, коли я захочу поставити закруглені кути елементу, замість цього я краще напишу один миксин.

Міксини вказуються в Sass файлах, за допомогою оголошення @mixin() {}. Кожен раз коли обробник, наприклад такий як LiveReload, зустрічає подібний синтаксис, він дивиться є-ли аргументи в дужках, потім перевіряє CSS інструкції всередині кутових дужок. Далі, компілятор обробляє дані інструкції і на виході ми отримуємо звичайну CSS таблицю стилів, main.css в нашому випадку.

Відкрийте файл main.scss і скопіюйте код міксина. Коли ви натиснете зберегти, браузер з відкритим index.html буде автоматично оновлено і ми побачимо сірий div із закругленими кутами, розміром 6 пікселів.

Index.html with a proper border-radius mixin


Крок 5: Розширюємо функціонал Border Radius міксина

Непоганий початок з нашим першим Міксини. Але в Міксини border-radius є недолік: якщо наш кордон матиме властивість opacity (непрозорість) менше 100%, по кутах буде видно фон блоку. Не найкращий дизайн.

На щастя ми можемо запросто це виправити за допомогою властивості background-clip. Якщо ви не знайомі з цією властивістю, у Chris Coyier з CSS-Tricks є відмінна стаття на цю тему.

Функціонал Sass Міксини може бути розширено іншими Міксини. Це дозволяє написати background-clip окремо, тим самим даний миксин може бути викликаний в border-radius, який ми створили раніше. Додайте наступний код в main.scss і збережіть файл. Після оновлення сторінки в браузері, ви повинні побачити блакитний фон і підлозі прозорий світло - блакитний радіус кордону.

Незважаючи на те що спочатку ми дублюємо рядки коду, в нашому розпорядженні буде миксин, який можна викликати повторно, кожен раз коли нам необхідно задати елементу border-radius. Що в свою чергу дозволить відобразити елемент, так як ми задумали.


Крок 6: Text Shadow

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

Незважаючи на цей факт, я створю миксин з кодом для сучасних браузерів і бета версії IE 10. Також я реалізував невеликий jQuery скрипт для кращого відображення text-shadow в IE9 і нижче.

Для сучасних браузерів, властивість text-shadow виглядає приблизно так само, як і box-shadow, з горизонтальним і вертикальним зміщенням, блюр і параметрами кольору. Додайте наступний код в main.scss і index.html файли і в результаті ви отримаєте трьох піксельну, розмиту, блакитнувату тінь позаду тексту.

index.html, додайте відразу після закриває тега div#wrapper


Крок 7: Додаткові міксини - утліти

В якості останнього кроку, я створив міксини для box shadows, фонових градієнтів, оголошення @font-face і поліпшив відображення шрифтів. Міксини були перевірені в сучасних браузерах (Firefox, Chrome, Safari, Opera, IE9) і включають всі необхідні Вендорний префікси.

Я не буду заглиблюватися в деталі кожного з них; коментарі з усіма деталями знаходяться в файлі main.scss. Міксини слідують такому ж формату і можуть бути поліпшені в залежності від ваших потреб. Якщо вам знадобиться додатковий функціонал в CSS, миксин може бути переписаний для цього.

Оновлення ваш index.html і main.scss файли додавши наступний код. Після оновлення сторінки, ви повинні побачити у вікні браузера кілька блоків, кожен має різні тінями, за які відповідають створені міксини.


Висновок

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

Так як дані міксини створені для реалізації властивостей CSS3, ви повинні подбати про запасний план при роботі зі старими браузерами. Деяким сайтам не так важливі тіні і закруглені кути у блоків, і хвилі можна обійтися без них, якщо мова йде про застарілих браузерах. В інших випадках завжди можна скористатися поліфілії, таким як Modernizr, для створення фаллбек CSS властивостей, для відповідних класів.

Сподіваюся вам сподобався даний туторіал, спасибі що прочитали його!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.