Нульова лекція

Вступ

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

У цьому курсі вам знадобиться текстовий редактор, де ви можете писати код локально на своєму комп’ютері. Серед популярних – Visual Studios Code, Sublime Text, Atom, та Vim, але на вибір є багато інших!

Вебпрограмування

Теми курсу: Ми детальніше розглянемо пізніше, але ось короткий огляд того, над чим ми будемо працювати під час цього курсу:

  1. HTML і CSS (мова гіпертекстової розмітки, яка використовується для структурування вебсторінки та інструменти для того, щоб зробити наші вебсайти привабливішими візуально).
  2. Git (використовується для контролю версій та співпраці).
  3. Python (широко використовувана мова програмування, яку ми будемо застосовувати, щоб зробити наші сайти динамічнішими).
  4. Django (популярний вебфреймворк, який ми використовуватимемо для серверної частини наших вебсайтів).
  5. SQL, Models, and Migrations (мова програмування, що використовується для того, щоб зробити вебсайти швидшими та інтерактивними).
  6. JavaScript (мова програмування, що використовується для того, щоб зробити вебсайти швидшими та інтерактивними).
  7. Користувацькі інтерфейси (методи, що використовуються для максимально спрощення взаємодії з вебсайтами).
  8. Тестування, CI, CD (вивчення різних методів, які використовуються для забезпечення безперебійного оновлення вебсторінок).
  9. Масштабованість та безпека (забезпечення доступу до наших вебсайтів багатьом користувачам одночасно та захист від зловмисників).

HTML (Мова гіпертекстової розмітки)

  • HTML – це мова гіпертекстової розмітки, яка визначає структуру вебсторінки. Вона інтерпретується вашим веббраузером (Safari, Google Chrome, Firefox тощо) для подання вмісту на екрані.
  • Почнемо з написання простого файлу HTML!
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello!</title>
    </head>
    <body>
        Hello, world!
    </body>
<html>
  • Відкривши цей файл у вашому браузері, ми отримуємо:

Hello Page

  • А тепер давайте трохи поговоримо про файл, який ми щойно написали, він здається досить складним для такої простої сторінки.
    • У першому рядку ми оголошуємо (веббраузеру), що пишемо документ в останній версії HTML, а саме HTML5.
    • Після цього сторінка складається з вкладених елементів HTML (such as html and body), (таких як html та body), кожен з тегами відкриття та закриття які позначені або <element> для відкриття, або </element> для закриття.
    • Зверніть увагу, як кожен з вкладених елементів відступає трохи далі від останнього. Хоча це не обов’язково вимагається браузером, буде дуже корисно мати це у власному коді.
    • Елементи HTML можуть включати атрибути, які надають браузеру додаткову інформацію про елемент. Наприклад, коли ми включаємо lang="en" до нашого початкового тегу, ми повідомляємо браузеру, що використовуємо англійську як основну мову.
    • Всередині елемента HTML ми, як правило, хочемо включити теги head і body. Елемент head містить інформацію про вашу сторінку, яка не обов'язково відображається, а елемент body міститиме те, що насправді видно користувачам, які відвідують сайт.
    • У title ми включили заголовок нашої вебсторінки, який, як ви помітите, відображається на вкладці у верхній частині нашого веббраузера.
    • Нарешті, ми додали текст «Привіт, світ!» в тілі, яке є видимою частиною нашої сторінки.

Об’єктна модель документа (DOM)

DOM

  • DOM – це зручний спосіб візуалізації зв’язків між елементами HTML за допомогою деревоподібної структури. Вище наведено приклад макета DOM для сторінки, яку ми щойно написали.

Більше елементів HTML

  • Існує багато елементів HTML, які ви можете використовувати для змін на сторінці, до них належать заголовки, списки та виділені жирним розділи. У цьому прикладі ми побачимо деякі з них у дії.
  • Також варто звернути увагу: <!-- --> надає нам можливість залишати коментарі у HTML, тому ми використаємо це позначення у коді нижче для пояснення деяких елементів.
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>HTML Elements</title>
    </head>
    <body>
        <!-- Ми можемо створювати заголовки, використавши h1 - h6 як теги. -->
        <h1>A Large Heading</h1>
        <h2>A Smaller Heading</h2>
        <h6>The Smallest Heading</h6>

        <!-- Теги strong та i дають нам жирний та курсив відповідно. -->
        A <strong>bold</strong> word and an <i>italicized</i> word!

        <!-- Ми можемо зробити посилання на іншу сторінку (наприклад, сторінку cs50) за допомогою a. -->
        View the <a href="https://cs50.harvard.edu/">CS50 Website</a>!

        <!-- Ми використовували ul для невпорядкованого списку та ol для впорядкованого. Як впорядковані, так і невпорядковані списки містять li або елементи списку. -->
        An unordered list:
        <ul>
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
        </ul>
        An ordered list:
        <ol>
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
        </ol>

        <!-- Для зображень потрібен атрибут src, який може бути або шляхом до файлу на вашому комп’ютері, або посиланням на зображення в інтернеті. Він також містить атрибут alt, який дає опис на випадок, якщо зображення не вдається завантажити. -->
        An image:
        <img src="../../images/duck.jpeg" alt="Rubber Duck Picture">
        <!-- Вище ми також бачимо, що для деяких елементів, які не містять інших, закривати теги не потрібно. -->

        <!-- Тут ми використовуємо тег br, щоб додати порожній рядок на сторінку. Тут ми використовуємо тег br, щоб додати порожній рядок на сторінку. -->
        <br/> <br/>

        <!-- Для створення таблиці потрібно кілька різних тегів. -->
        <table>
            <thead>
                <th>Ocean</th>
                <th>Average Depth</th>
                <th>Maximum Depth</th>
            </thead>
            <tbody>
                <tr>
                    <td>Pacific</td>
                    <td>4280 m</td>
                    <td>10911 m</td>
                </tr>
                <tr>
                    <td>Atlantic</td>
                    <td>3646 m</td>
                    <td>8486 m</td>
                </tr>
            </tbody>
        </table>
    </body>
<html>

При відображенні ця сторінка виглядає приблизно так:

Elements

  • Якщо ви не все зрозуміли, знайте, що вам ніколи не доведеться запам’ятовувати ці елементи. Ви можете просто пошукати щось на зразок «зображення в HTML», щоб знайти тег img. W3 Schools – один з дуже корисних ресурсів для пошуку.

Форми

  • Ще один набір елементів, який насправді важливий при створенні вебсайта – це збір інформації від користувачів. Ви можете дозволити користувачам вводити інформацію за допомогою форми HTML, яка може містити кілька різних типів введення. Пізніше під час вивчення курсу ми дізнаємося про те, як обробляти інформацію після надсилання форми.
  • Як і у випадку з іншими елементами HTML, не потрібно їх запам’ятовувати, і W3 Schools – чудовий ресурс для їх вивчення!
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Forms</title>
</head>
<body>
    <form>
        <input type="text" placeholder="First Name" name="first">
        <input type="password" placeholder="Password" name="password">
        <div>
            Favorite Color:
            <input name="color" type="radio" value="blue"> Blue
            <input name="color" type="radio" value="green"> Green
            <input name="color" type="radio" value="yellow"> Yellow
            <input name="color" type="radio" value="red"> Red

        </div>
        <input type="submit">
    </form>
</body>
</html>

form

CSS (каскадні таблиці стилів)

  • CSS використовується для зміни зовнішнього вигляду вебсайта.
  • Поки ми тільки починаємо, можемо додати атрибут style до будь-якого елемента HTML, щоб застосувати до нього певний CSS.
  • Ми міняємо стиль, змінюючи властивості CSS елемента, записуючи щось на зразок color: blue або text-align: center
  • У наведеному прикладі ми внесли невелику зміну до нашого першого файлу, щоб надати йому кольоровий заголовок:
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello!</title>
    </head>
    <body>
        <h1 style="color: blue; text-align: center;">A Colorful Heading!</h1>
        Hello, world!
    </body>
<html>

blue heading

  • Якщо ми стилізуємо зовнішній елемент, усі внутрішні елементи автоматично набувають цього стилю. Ми можемо побачити це, якщо перенести стиль, який ми щойно застосували, із тегу заголовка (h1) до тегу тіла (body):
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello!</title>
    </head>
    <body style="color: blue; text-align: center;">
        <h1 >A Colorful Heading!</h1>
        Hello, world!
    </body>
<html>

blue everywhere

  • Хоча ми можемо стилізувати нашу вебсторінку, як це було зроблено вище, для покращення дизайну нам потрібна можливість відійти від окремих рядків.
    • Один із способів зробити це - додати стиль між тегами <style> в head. Всередині цих тегів ми пишемо, які типи елементів ми хочемо стилізувати, і стиль, який ми хочемо застосувати до них. Наприклад:
      <html lang="en">
  <!DOCTYPE html>
  <head>
      <title>Hello!</title>
      <style>
          h1 {
              color: blue;
              text-align: center;
          }
      </style>
  </head>
  <body>
      <h1 >A Colorful Heading!</h1>
      Hello, world!
  </body>
  </html>
    • Інший спосіб – це включити елемент <link> в head із посиланням на файл styles.css, який містить певний стиль. Це означає, що файл HTML буде виглядати так:
      <html lang="en">
  <!DOCTYPE html>
  <head>
      <title>Hello!</title>
      <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <h1 >A Colorful Heading!</h1>
      Hello, world!
  </body>
  </html>

    І наш файл із назвою styles.css буде виглядати так:

      h1 {
      color: blue;
      text-align: center;
  }
  • Існує дуже багато властивостей CSS, всі ми розглянути не зможемо, але так само, як і елементи HTML, як правило, їх легко знайти за запитом, наприклад, «змінити шрифт на синій CSS». Деякі з найпоширеніших:
    • color: колір тексту
    • text-align: де елементи розміщуються на сторінці
    • background-color: можна встановити будь-який колір
    • width: ширина у пікселях або відсотках від сторінки
    • height: висота у пікселях або відсотках сторінки
    • padding: скільки місця слід залишити всередині елемента
    • margin: скільки місця слід залишити поза елементом
    • font-family: тип шрифту для тексту на сторінці
    • font-size: кегль шрифту у пікселях
    • border: тип межі (суцільна, штрихова тощо) та колір
  • Застосуємо те, чому ми навчились, стилізуємо таблиці наших океанів. Ось код HTML для початку:
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Nicer Table</title>
    </head>
    <body>
        <table>
            <thead>
                <th>Ocean</th>
                <th>Average Depth</th>
                <th>Maximum Depth</th>
            </thead>
            <tbody>
                <tr>
                    <td>Pacific</td>
                    <td>4280 m</td>
                    <td>10911 m</td>
                </tr>
                <tr>
                    <td>Atlantic</td>
                    <td>3646 m</td>
                    <td>8486 m</td>
                </tr>
            </tbody>
        </table>
    </body>
<html>

table bad

  • Розміщене вище схоже на те, що було раніше, але тепер, включивши тег стилю або посилання на таблицю стилів до елементу head, ми додаємо такий css:
table {
    border: 1px solid black;
    border-collapse: collapse;
}

td {
    border: 1px solid black;
    padding: 2px;
}

th {
    border: 1px solid black;
    padding: 2px;
}

І це дає нам цю приємнішу для перегляду таблицю:

table good

  • Можливо, ви вже подумали, що зараз у нашому CSS є непотрібне повторення, оскільки td та th мають однаковий стиль. Ми можемо (і повинні) звести це до наведеного нижче коду, використовуючи кому, щоб показати, що стиль повинен застосовуватися до більш ніж одного типу елемента.
table {
    border: 1px solid black;
    border-collapse: collapse;
}

td, th {
    border: 1px solid black;
    padding: 2px;
}
  • Це хороший вступ до так званих селекторів CSS. Є багато способів визначити, які елементи HTML ви створюєте, деякі з них ми згадаємо тут:
    • тип елемента: це те, що ми робили до цього часу – стилізуємо всі елементи одного типу;
    • id: інший варіант – надати нашим елементам HTML такий ідентифікатор: <h1 id="first-header">Привіт!</h1> а потім застосувати стиль за допомогою #first-header{...} використовуючи хештег для демонстрації того, що ми шукаємо за ідентифікатором. Важливо, що два елементи не можуть мати однаковий ідентифікатор, і жоден елемент не може мати понад один ідентифікатор.
    • class: це схоже на id, але клас може бути спільним для використання понад одним елементом, а один елемент може мати понад один клас. Ми додаємо класи до елемента HTML таким чином: <h1 class="page-text muted">Привіт!</h1> (зауважте, що ми щойно додали два елементи до елемента: page-text і muted). Потім ми створюємо стиль на основі класу, використовуючи крапку замість хештегу: .muted {...}
  • Тепер нам також доведеться мати справу з конфліктами в CSS. Що трапиться, коли заголовок повинен бути червоним на основі свого класу, і в той же час синім на основі його ідентифікатора? CSS має наступний пріоритет застосування:
    1. рядковий стиль;
    2. id;
    3. клас;
    4. тип елемента.
  • На додаток до коми для кількох селекторів, існує ще кілька способів вказати, які елементи ви хочете стилізувати. У цій таблиці з лекції подано кілька, і ми розглянемо кілька прикладів нижче:

selectors

Селектор нащадків: Тут ми використовуємо селектор нащадків, щоб застосовувати стилі лише до елементів списку, знайдених у невпорядкованому списку:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Using Selectors</title>
        <style>
            ul li {
                color: blue;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>foo</li>
            <li> bar
                <ul>
                    <li>hello</li>
                    <li>goodbye</li>
                    <li>hello</li>
                </ul>
            </li>
            <li>baz</li>
        </ol>

    </body>
<html>

list selector

Атрибути як селектори: ми також можемо звузити наш вибір на основі атрибутів, які ми призначаємо елементам HTML за допомогою квадратних дужок. Наприклад, у наведеному списку посилань ми вирішили зробити лише посилання на Amazon червоним:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Using Selectors</title>
        <style>
            a[href="https://www.amazon.com/"] {
                color: red;
            }
        </style>
    </head>
    <body>
        <ol>
            <li><a href="https://www.google.com/">Google</a></li>
            <li><a href="https://www.amazon.com/">Amazon</a> </li>
            <li><a href="https://www.facebook.com/">Facebook</a></li>
        </ol>

    </body>
<html>

link selectors

  • Ми можемо не тільки використовувати CSS для постійної зміни того, як виглядає елемент, а й того, як він виглядає за певних умов. Наприклад, що, якби ми хотіли, щоб кнопка змінила колір, коли ми наводимо на неї курсор? Ми можемо це зробити за допомогою псевдокласу CSS, який забезпечує додатковий стиль під час особливих обставин. Ми пишемо це, додаючи двокрапку після нашого селектора, а потім додаючи обставину після цієї двокрапки.
  • У випадку з кнопкою ми додамо :hover до селектора кнопок, щоб вказати дизайн лише при наведенні на кнопку:
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Pseudoclasses</title>
        <style>
            button {
                background-color: red;
                width: 200px;
                height: 50px;
                font-size: 24px;
            }

            button:hover {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <button>Button 1</button>
        <button>Button 2</button>
        <button>Button 3</button>

    </body>
<html>

buttons

Адаптивний дизайн

  • Зараз багато людей переглядають вебсайти на різних пристроях, не лише на комп’ютерах, наприклад, на смартфонах та планшетах. Важливо переконатися, що ваш вебсайт читабельний для людей на всіх пристроях.
  • Ми можемо досягти цього завдяки розумінню області перегляду. Це частина екрана, яка фактично видна користувачеві постійно. За замовчуванням багато вебсторінок вважають, що область перегляду однакова на будь-якому пристрої, що призводить до того, що з багатьма сайтами (особливо старими) важко взаємодіяти на мобільних пристроях.
  • Один із простих способів покращити зовнішній вигляд сайту на мобільному пристрої – це додати наведений далі рядок у заголовок наших HTML-файлів. Цей рядок вказує мобільному пристрою використовувати область перегляду тієї ж ширини, що і ширина пристрою, який ви використовуєте, а не значно більшу.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Інший спосіб, за допомогою якого ми можемо взаємодіяти з різними пристроями, - це медіазапити. Медіазапити – це способи зміни стилю сторінки на основі того, як саме переглядається сторінка.
  • Для прикладу медіазапиту спробуємо просто змінити колір екрана, коли він зменшується до певного розміру. Ми сигналізуємо про медіазапит, вводячи @media а потім в дужках тип запиту:
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Screen Size</title>
        <style>
            @media (min-width: 600px) {
                body {
                    background-color: red;
                }
            }

            @media (max-width: 599px) {
                body {
                    background-color: blue;
                }
            }
        </style>
    </head>
    <body>
        <h1>Welcome to the page!</h1>
    </body>
</html>

screen size

  • Інший спосіб – використання нового атрибута CSS, відомого як flexbox. Це дозволяє нам легко перенести елементи до наступного рядка, якщо вони не вміщуються горизонтально. Ми робимо це, розміщуючи всі наші елементи у div, який ми будемо називати своїм контейнером. Потім ми додаємо певний стиль до цього div, вказуючи, що ми хочемо використовувати відображення flexbox для елементів всередині нього. Ми також додали кілька додаткових стилів до внутрішніх div, щоб краще проілюструвати, як цей перенос відбувається.
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Screen Size</title>
        <style>
            #container {
                display: flex;
                flex-wrap: wrap;
            }

            #container > div {
                background-color: green;
                font-size: 20px;
                margin: 20px;
                padding: 20px;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div>Some text 1!</div>
            <div>Some text 2!</div>
            <div>Some text 3!</div>
            <div>Some text 4!</div>
            <div>Some text 5!</div>
            <div>Some text 6!</div>
            <div>Some text 7!</div>
            <div>Some text 8!</div>
            <div>Some text 9!</div>
            <div>Some text 10!</div>
            <div>Some text 11!</div>
            <div>Some text 12!</div>
        </div>
    </body>
</html>

flexbox

  • Іншим популярним способом стилізації сторінки є використання сітки HTML grid. У цій сітці ми можемо вказати такі атрибути стилю, як ширина стовпців та пробіли між стовпцями та рядками, як показано нижче. Зверніть увагу, що коли ми вказуємо ширину стовпців, ми говоримо, що третій має автоматичну ширину, тобто він повинен заповнити решту сторінки.
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Web Page!</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .grid {
                background-color: green;
                display: grid;
                padding: 20px;
                grid-column-gap: 20px;
                grid-row-gap: 10px;
                grid-template-columns: 200px 200px auto;
            }

            .grid-item {
                background-color: white;
                font-size: 20px;
                padding: 20px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="grid">
            <div class="grid-item">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6</div>
            <div class="grid-item">7</div>
            <div class="grid-item">8</div>
            <div class="grid-item">9</div>
            <div class="grid-item">10</div>
            <div class="grid-item">11</div>
            <div class="grid-item">12</div>
        </div>
    </body>
</html>

grid

Bootstrap

  • Виявляється, існує безліч бібліотек, їх вже створили інші люди. Ці бібліотеки можуть зробити стилізування вебсторінки ще простішим. Одна популярна бібліотека, якою ми будемо користуватися протягом курсу, відома як bootstrap.
  • Ми можемо додати Bootstrap до нашого коду за допомогою одного рядка в заголовку нашого HTML-файлу:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  • Далі ми можемо розглянути деякі особливості Bootstrap, перейшовши до документації на їхньому вебсайті. На цій сторінці ви знайдете багато прикладів класів, які можна додати до елементів, що дозволяють їх стилізувати за допомогою Bootstrap.
  • Однією з популярних функцій Bootstrap є сітка. Bootstrap автоматично розділяє сторінку на 12 стовпців, і ми можемо вирішити, скільки стовпців забирає елемент, додавши клас col-x, де x - число від 1 до 12. Наприклад, на наведеній сторінці у нас є рядок стовпців однакової ширини, а потім рядок, де центральний стовпець більший:
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Web Page!</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <style>
            .row > div {
                padding: 20px;
                background-color: teal;
                border: 2px solid black;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-4">
                    This is a section.
                </div>
                <div class="col-4">
                    This is another section.
                </div>
                <div class="col-4">
                    This is a third section.
                </div>
            </div>
        </div>
        <br/>
        <div class="container">
            <div class="row">
                <div class="col-3">
                    This is a section.
                </div>
                <div class="col-6">
                    This is another section.
                </div>
                <div class="col-3">
                    This is a third section.
                </div>
            </div>
        </div>
    </body>
</html>

columns

  • Щоб покращити швидкість реагування на мобільних пристроях, Bootstrap також дозволяє вказати розміри стовпців, які відрізняються залежно від розміру екрана. У наведеному прикладі ми використовуємо col-lg-3, щоб показати, що елемент повинен займати 3 стовпці на великому екрані, а col-sm-6, щоб показати, що елемент, повинен займати 6 стовпців, коли екран невеликий:
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Web Page!</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <style>
            .row > div {
                padding: 20px;
                background-color: teal;
                border: 2px solid black;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-sm-6">
                    This is a section.
                </div>
                <div class="col-lg-3 col-sm-6">
                    This is another section.
                </div>
                <div class="col-lg-3 col-sm-6">
                    This is a third section.
                </div>
                <div class="col-lg-3 col-sm-6">
                    This is a fourth section.
                </div>
            </div>
        </div>
    </body>
</html>

wrap columns

Sass (Синтаксично дивовижні таблиці стилів)

  • Ми вже знайшли кілька способів усунути надмірність у CSS, наприклад, перенести його в окремі файли або використати Bootstrap, але є ще досить багато місць, де ми можемо вдосконалити наш код. Наприклад, якщо ми хочемо, щоб декілька елементів мали різні стилі, але щоб усі вони були однакового кольору? Якщо пізніше ми вирішимо, що хочемо змінити колір, то нам доведеться змінити його для кількох різних елементів.
  • Sass – це мова, яка дозволяє нам ефективніше писати CSS кількома способами, одним із яких є створення змінних, як у наведеному прикладі.
  • Під час написання на Sass ми створюємо новий файл із розширенням назва_файлу.scss. У цьому файлі ми можемо створити нову змінну, додавши $ перед іменем, потім двокрапку та значення. Наприклад, ми б написали $color: red, щоб встановити для змінної color значення red або «червоний». Потім ми отримуємо доступ до цієї змінної за допомогою $color. Ось приклад нашого файлу variables.scss:
$color: red;

ul {
    font-size: 14px;
    color: $color;
}

ol {
    font-size: 18px;
    color: $color;
}
  • Тепер, щоб пов’язати цей стиль із нашим файлом HTML, ми не зможемо просто пов’язати файл .scss, оскільки більшість веббраузерів розпізнають лише файли .css. Для розв’язку цієї задачі ми повинні завантажити програму під назвою Sass на наші комп’ютери. Потім у нашому терміналі ми пишемо sass variables.scss:variables.css Ця команда скомпілює файл .scss з назвою variables.scss у файл .css з назвою variables.css, tдо якого ви можете надати посилання на своїй HTML-сторінці.
  • Щоб пришвидшити цей процес, ми можемо використовувати команду sass --watch variables.scss:variables.css, яка автоматично змінює файл .css щоразу, коли у файлі .scss виявляється зміна.
  • Використовуючи Sass, ми також можемо робити вкладені стилі, а не використовувати селектори CSS, про які ми говорили раніше. Наприклад, якщо ми хочемо застосувати деякий стиль лише до абзаців та невпорядкованих списків у div, ми можемо написати щось подібне до наведеного нижче:
div {
    font-size: 18px;

    p {
        color: blue;
    }

    ul {
        color: green;
    }
}

Після компіляції в CSS ми отримаємо файл, який виглядатиме так:

div {
    font-size: 18px;
}

div p {
    color: blue;
}

div ul {
    color: green;
}
  • Ще одна особливість, яку дає нам Sass, відома як успадкування. Це дозволяє нам створити базовий набір стилів, яким можуть користуватися кілька різних елементів. Ми робимо це, додаючи % перед назвою класу, додаючи певний стиль, а потім додаючи рядок @extend %classname на початку стилю. Наприклад, наведений код застосовує стиль у класі message до кожного з різних класів нижче, в результаті чого з’являється вебсторінка, схожа на наведену далі.
%message {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    border: 1px solid black;
    padding: 20px;
    margin: 20px;
}

.success {
    @extend %message;
    background-color: green;
}

.warning {
    @extend %message;
    background-color: orange;
}

.error {
    @extend %message;
    background-color: red;
}

inheritance

  • На цьому на сьогодні все!