Як почати роботу з SASS

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

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

• Що таке сас?

Ми будемо створювати список в SASS, щоб створити наші соціальні значки, які складаються з класу, посилання на шрифту та колір першого - і пізніше tooltip.

І ми будемо використовувати Mixins для створення багаторазових засобів масової інформації та створення функції, щоб перетворити значення пікселів у значення EM. Для цього ми також створюємо змінну для нашого базового шрифту.

Існує ряд способів встановлення та використання SASS залежно від вашої системи та потреб інструментів для створення інструментів - можна знайти більше деталей тут - Однак, ми будемо використовувати Codepen, щоб скомпілювати наш SASS у CSS, щоб зберегти речі якомога простіше.

Щоб по-справжньому запрягати силу SASS і не потрапляйте в безлад специфіки та складності, необхідне тверде розуміння CSS. Особливий аромат SASS ми будемо використовувати, це SCSS (Sassy CSS), що означає, що ми будемо використовувати кучеряві дужки {} у нашому SASS-коду.

Отримайте підручники

Щоб завантажити приклади файлів для цього підручника, перейдіть до FileSilo , виберіть безкоштовний матеріал та безкоштовний вміст поруч із підручником. Примітка. Перший раз користувачі доведеться зареєструватися, щоб використовувати файл.

01. Налаштуйте CODEPEN CSS

Перше, що нам потрібно зробити створити нову ручку і змінити деякі параметри за замовчуванням для редактора CSS у Codepen. Ми змінимо Preprocess CSS до SCSS та включити нормалізувати та автоматично.

02. Почніть писати якийсь код

Тепер ми встановили все, що ми можемо почати писати якийсь код. Всередині редактора HTML ми створимо контейнер та ряд елементів, що містять посилання та значок для кожного з наших значків.

Імена, що використовуються тут, будуть використовуватися в нашому списку SASS як посилання в CSS. Ми також будемо використовувати конвенцію про нашого класу.

 & lt; div class = "social__container" & gt;
  & lt; div class = "social__item" & gt;
  & lt; ціль = "_ blank" href = "..."
  Class = "Social__icon - Twitter" & GT;
  & lt; i class = "icon - twitter" & gt; & lt; / i & gt;
  & lt; / a & gt;
  & lt; / div & gt;
  ...
& lt; / div & gt; 

03. Встановіть основні стилі

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

 @import URL (http://srt.lt/w8yt8);
// змінні
$ base-font-size: 16px;
// основний стиль
тіло {
  Шрифт-розмір: $ base-font-size;
  ...
} 

04. Створіть основну функцію

Далі ми створимо основну функцію, щоб перетворити значення пікселя до значення EM за допомогою нашого "$ base-font-size".

Функції в SASS створюються за допомогою "@function", з подальшим ім'ям функції та введення, що використовується для виконання функції.

Потім всередині декларації ми використовуємо "@return", щоб вивести значення при використанні функції. "# {}", Що оточує розрахунок інтерполяція .

 // Функції
@function px-to-em ($ pixels) {
@return # {$ пікселі / $ base-font-size} em;
} 

05. Зробити мікс

Продовжуючи з нашою установкою, ми створимо Mixins для Simple Mobile-First Media Queries, використовуючи функцію "PX-TO-EM", яку ми будемо проходити в значення PX, щоб повернути значення EM.

Mixins створюються за допомогою "@mixin", а потім назва для Mixin. Тоді всередині декларації ми використовуємо "@content", щоб вивести код, який ми поставили всередині Mixin під час виклику його пізніше в нашій кодова панелі.

 @Mixin ViewPort - Великий {
  @media тільки екран і
  (MIN-ширина: PX-TO-EM (1680px)) {
  @content;
}}
@Mixin ViewPort - середовище {
  @media тільки екран і
  (хв. Ширина: px-to-em (1080px)) {
  @content;
}} 

06. Налаштуйте список SASS

Останній крок у нашому налаштуванні є створення списку. Списки в SASS створюються за допомогою змінної; Після цього точний синтаксис досить вільний, приймаючи широкий спектр способи його визначення .

Всередині змінної ми визначимо назву класу, значення Unicode та колір для кожного значка, що розділяє їх з комою, внутрішні дужки.

 $ Icon-List: (
  vimeo "\ f27d" # 1ab7ea,
  Twitter "\ f099" # 1da1F2,
  ...
  github "\ f113" # 333,
  RSS "\ f09e" # F26522
) 

07. Відображення значків поспіль

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

 .social__item {
  Дисплей: inline-block;
  маржа-праворуч: 0.05em;
} 

08. Створіть спільний значок

Щоб мінімізувати суму CSS, ми виходимо, ми будемо використовувати селектор CSS3, щоб знайти всі класи, що починаються з "піктограмою" та створити для них спільного стилю.

 [клас ^ = "значок"] {
  Шрифт-Сім'я: "Fontawesome";
  Говоріть: немає;
  стиль шрифту: нормальний;
  Шрифт-вага: Нормальний;
  FONT-VARIANT: Нормальний;
  Текст-перетворення: Ні;
  Лінійна висота: 1;
  -Webkit-Font-згладжування: противалій;
  -Moz-osx-шрифт-згладжування: сірого; } 

09. Кнопка "Стиль"

Використовуючи той самий метод, ми будемо робити те ж саме для кнопок, що визначають наші значення в "em", дозволяючи нам пізніше змінювати їх, використовуючи контейнер.

 [клас ^ = "social__icon"] {{
  Шрифт-розмір: 1EM; Ширина: 2em; Висота: 2em;
  Колір фону: # 333;
  Колір: білий;
  Текст-прикраса: Ні;
  Прикордонний радіус: 100%;
  Текст-вирівнювання: Центр;
  Дисплей: Flex;
  Вирівнювання елементів: Центр;
  Обґрунтування-вміст: Центр;
} 

10. @each петля для наших значків

Тепер у нас є всі наші базові стилі, які ми можемо використовувати наш список, щоб створити CSS, специфічну для кожного значка.

Щоб створити цикл у SASS, ми використовуємо "@each", а потім імена для кожного значення кожного елемента - "$ icon", "$ Unicode" та "$ icon-background" - слідує слово "In", а потім назва списку.

Всередині циклу ми будемо застосувати значення "$ Unicode" до Pseudo Element кожної піктограми, яку ми створили в HTML, дозволяючи спільному стилю, який ми створили раніше, щоб піклуватися про всі інші необхідні стилі.

 @each $ icon, $ Unicode, $ icon-background
у списку значків {{{
  .icon - # {$ icon} {
  & amp; :: до {
  Вміст: $ Unicode;
  }
  }
} 

11. @each петля для наших фонових кольорів

Ікони зараз працюють, але у нас ще є колір зворотного фону. Ми додамо ще кілька коду до нашого списку, щоб виправити це. Використовуючи той самий метод, як зазначено вище, ми виведемо ім'я "$ icon", але на цей раз на класах "Social__ICon" і всередині цього кольору "$ icon-background".

 @each $ icon, $ Unicode, $ icon-background
у списку значків {{{
  ...
  .social__icon - # {$ icon} {
  Колір фону: $ icon-background;
  }
} 

12. Використовуйте мікс

Використовуючи Mixins, ми створили раніше, і тому, що ми стикули піктограми, використовуючи значення "em", ми можемо застосувати розмір шрифту до контейнера та збільшити його за допомогою нашого засобу Media-Query, використовуючи "@include", а назва Mixin, а потім Код, який ми хочемо включити в Media-Query.

 .social__container {
  Шрифт-розмір: 1EM;
  @include Viewport - середній {
  шрифт: 1.5em;
  }
  @include ViewPort - великий {
  Шрифт-розмір: 2EM;
  }} 

13. Додайте стан взаємодії та вбудовані функції

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

SASS має ряд Вбудовані кольорові функції Дозволяє нам взяти фоновий колір, який ми встановили у нашому списку та змішаємо його з чорним, щоб потемніти кнопку - при взаємодії.

 icon - # {$ icon} {
  Колір фону: $ icon-background;
  & amp;: hover,
  & amp;: Фокус,
  & amp;: Активний {
  Колір фону:
  змішайте (чорний, $ icon-background, 15%);
  }} 

14. Перехід кольору фону

Ми також можемо використовувати властивість "перехід" у CSS, щоб анімувати відмінності між кольорами фону. Ми могли б використовувати "все", але це як дорого з точки зору виконання та не дозволять нам переходити різні значення за різними таймінгами та функціями часу.

 [Class ^ = "Social__icon"]{
  ...
  Перехід: фоновий колір
  150 мс легкість
  ;
} 

15. Додайте подальші ефекти переходу

Додаючи "відносне" позиціонування до кнопок та верхнього значення та додавання "вершини" до нашого "перехідного" властивості ми можемо готувати елементи для подальшої взаємодії.

 [клас ^ = "social__icon"] {{
  Позиція: відносна;
  Верх: 0;
  ...
  Перехід: фоновий колір
   150 мс легкість,
    Топ 250ms лінійний
  ; } 

16. Перемістіть кнопки після взаємодії

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

 [клас ^ = "social__icon"] {{
  ...
  & amp;: hover,
  & amp;: Фокус,
  & amp;: Активний {
  Outline: Ні;
  Верх: -0.25ЕМ;
  }} 

17. Додайте тінь падіння

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

 Коробка-тінь:
  0 0 0.25em -0.25em RGBA (0,0,0,0.2);
& amp;: hover,
& amp;: Фокус,
& amp;: Активний {
  ...
  Коробка-тінь:
  0 0.5em 0.25em -0.25em rgba (0,0,0,0,3);
} 

18. Додати підказки

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

 $ Icon-List: (
  Vimeo "Vimeo" "\ f27d" # 1ab7ea,
  Twitter "Twitter" "\ f099" # 1da1F2,
  ...
  github "github" "\ f113" # 333,
  RSS "RSS" "\ F09E" # F26522,
) 

19. Змінити циклу @each

Через додавання до нашого списку нам потрібно змінити нашу "@each", щоб включити значення підказки ("$ name"). Потім ми можемо вивести це ім'я як вміст елемента "Перед pseudo" на наших кнопок.

 @each $ icon, $ name, $ Unicode,
  $ icon-background в $ icon-listly {
  ...
  .social__icon - # {$ icon} {
  ...
  & amp; :: до {
  вміст: '# {$ name}';
  }
  }} 

20. Стиль перед псевдоменом

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

 & amp; :: до {...
  Верх: -3.5ЕМ;
  непрозорість: 0;
  Перехід:
  Top 250ms лінійна, непрозорість 150ms лінійна 150 мс;
}
& amp;: hover, ... {...
  & amp; :: до {
  непрозорість: 1;
  Верх: -2.5ЕМ; }
} 

21. Стиль після псевдо

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

Додаючи затримку, ми отримуємо анімацію, що складається з підказки, що згасає і рухається вниз.

 & amp; :: Після {...
  Верх: -1.9EM;
  непрозорість: 0;
  Перехід:
  Top 250ms лінійна, непрозорість 150ms лінійна 150 мс;
}
& amp;: hover, ... {...
  & amp; :: після {
  непрозорість: 1;
  Верх: -0.9EM; }
} 

Codepen Collection of Tutorial Steps можна знайти тут .

Ця стаття спочатку з'явилася в журналі Web Designer 264. Купити його тут .

Читати далі:

• Що таке сас?
• 8 Кодепен, які ви не знали
• 5 порад для Super-Fast CSS