Сучасний CSS з SASS

Сучасний CSS із Sass - практичний посібник

Мова: Німецька

Сучасний CSS з Sass - практичний посібник

Ти завжди дратувався, що в CSS немає змінних та циклів? Достататньо! Препроцесори CSS, такі як Sass, надають саме такі можливості. Тепер можна ефективно генерувати CSS-код. Окрім Sass, у цьому підручнику, звичайно ж, розглядається популярний фреймворк Compass, який ще більше піднімає використання Sass на новий рівень. Познайомся протягом трьох годин з можливостями, які надають Sass та Compass.

Стань майстром по Sass з цим трьохгодинним відео-навчанням та веб-розробником Данієлем Кохом.
Визначайте змінні, створюйте власні міксіни, експериментуйте з кольорами та числами, і як штрих використовуйте Compass.
Вивчайте ефективний спосіб створення CSS і застосовуйте свої нові знання для майбутніх проєктів.

Крок за кроком до професійного розвитку CSS. Якщо CSS, то сучасний і з Sass – Даніель Кох покаже вам!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

деталі

Можна використовувати з:
Зміст: 3 h Відео-навчання
Ліцензія: приватна та комерційна Права використання

Категорії

Вебдизайн, CMS та розробка

Створено з любов'ю:

Daniel Koch

Сучасний CSS з Sass

Безкоштовно

Сучасний CSS з Sass - 01 Введення

Завдяки CSS-препроцесорам CSS можна значно ефективніше писати. Що таке ці препроцесори, які існують, і чому вибір в цьому випадку пав на Sass, показує це відео.

Сучасний CSS з Sass - 02 Установка.

Перш ніж використовувати Sass, його потрібно встановити. І передумовою цього є Ruby. Обидва - тобто встановлення Ruby і Sass - показується у цьому відео. Після цього ви можете відразу перевірити, чи справді вдалося встановити Sass.

Сучасний CSS з Sass - Вправна компіляція

Sass-потрібно перетворити в CSS-файли, щоб вони були дійсно корисні. Завдяки команді Watch ви можете легко виявляти зміни в окремих файлах або в цілих каталогах.

Сучасний CSS з Sass - 04 Об'єднати файли

Сучасний CSS з Sass - об'єднати файли 04

За допомогою @import можна імпортувати та об'єднувати файли SCSS. Як це все пов'язано з підкресленням перед ім'ям файлу, це один із аспектів цього відео.

Сучасний CSS з Sass - оголошення і використання змінних

Сучасний CSS з Sass - Оголошення та використання змінних

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

Сучасний CSS з Sass - 06 Принцип вкладеності.

Сучасний CSS з Sass - 06 Принцип вкладення

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

Сучасний CSS з Sass - 07 Вдале успадкування з Extend

Використання @extend дозволяє вам передавати множину властивостей CSS від одного селектора до іншого. Це також допомагає зберігати файли Sass у компактному вигляді.

Сучасний CSS з Sass - 08 модулів з плейсхолдер-селекторами.

Селектор-заповнювач дозволяє визначити модулі. Ця модульність дозволяє розбити синтаксис Sass на логічні блоки, які можуть бути включені в різних місцях.

Сучасний CSS з Sass - визначення 09 Mixins.

Сучасний CSS з Sass - визначення 09 міксинів

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

Сучасний CSS з Sass - 10 Селектор батьківського елементу

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

Сучасний CSS з Sass – 11 Автоматизація з циклами For.

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

Сучасний CSS з Sass – 12 кожні та цикли While

Сучасний CSS з Sass - 12 ітераційних та циклів While.

Крім For- в Sass можна використовувати також Each- та While-цикли. Як це можна використати для автоматизації, показано в цьому відео.

Сучасний CSS з Sass - 13 рішень за допомогою if та else.

Сучасний CSS з Sass - 13 рішення if та else.

У мовах програмування, таких як PHP та JavaScript, є можливість реагувати на різні події за допомогою if та else. Також така можливість існує і в Sass. Як це можна використати, показано в цьому відео.

Сучасний CSS з Sass - 14 математичних операторів

Ви можете рахувати в Sass. Це, наприклад, дуже зручно для визначення розмірів шрифтів. За допомогою відповідних операторів можна створити свою власну сітку.

Сучасний CSS з Sass - 15 ігор кольорів.

Звісно, в Sass можна визначити кольори. Але Sass у цьому відношенні йде далі, ніж традиційний CSS. Завдяки відповідним функціям, наприклад, легко змінювати кольори.

Сучасний CSS з Sass – 16 Compass.

Фреймворк Compass розширює можливості Sass у кілька разів. Це відео покаже, як ви можете встановити та використовувати Compass.

Сучасний CSS з Sass - 17 Compass та CSS3.

Сучасний CSS з Sass - 17 Compass і CSS3.

Веб-сайт проекту Compass є центральним інформаційним засобом, коли мова йде про роботу з цим фреймворком. Я покажу вам, як ви можете працювати з документацією на основі можливостей CSS3 від Compass.

Сучасний CSS з Sass - 18 Compass у дії та огляд Susy.

Сучасний CSS з Sass - 18 Compass у дії та погляд на Susy.

Приклад показує, наскільки легко можна реалізувати речі за допомогою Compass. На кінці цього проекту додатково розглядається альтернативна Sass-структура. Susy надає струнку систему сітки.

Деталі щодо вмісту

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

Встановлення середовища розробки Sass

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

Перші кроки з типовою структурою проекту

Далі слідують вже перші кроки: Починаємо з Sass! Перший погляд на синтаксис доповнюють основні особливості мови. Ви дізнаєтесь про змінні, побачите типову структуру проекту і швидко знайдетесь у Sass.

Розробка: Цикли та умовні вирази

Після цього проходить професійна розробка: Що робить Sass таким особливим, це можливості, які майже нагадують справжні мови сценаріїв, як JavaScript. Також в Sass можна визначати цикли та використовувати умовні вирази. Ці речі є основою для виконання абсолютної майстерності в Sass - визначення Mixins. Це потужні функції, які значно полегшують роботу з Sass, в кінцевому рахунку з CSS.

Compass: Спрощує роботу з CSS

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

Це ви дізнаєтесь з уроків CSS та Sass

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