Урок 1: Введение в CSS3 — Основы стилизации

Привет, друзья! 👋 Сегодня мы начинаем наш увлекательный путь в мир CSS3 — технологии, которая делает веб-страницы красивыми и современными. Давайте разберем основы!

---

### Что такое CSS3?
CSS (Cascading Style Sheets) — это язык стилей, который используется для описания внешнего вида HTML-документов. CSS3 — это последняя версия, которая добавляет множество новых возможностей, таких как анимации, градиенты, тени и многое другое.

---

### Как подключить CSS к HTML?
Есть три способа подключения стилей:
1. Внутри тега `<style>`

   <style>
       body {
           background-color: lightblue;
       }
   </style>
   

2. Через внешний файл
Создайте файл styles.css и подключите его в HTML:

   <link rel="stylesheet" href="styles.css">
   

3. Инлайн-стили (внутри тегов)

   <p style="color: red;">Этот текст красный.</p>
   

---

### Основы синтаксиса CSS
CSS состоит из селекторов и правил.
Пример:

селектор {
    свойство: значение;
}

- Селектор — указывает, к какому элементу применяются стили (например, h1, .class, #id).
- Свойство — что именно мы меняем (например, color, font-size, background).
- Значение — как мы это меняем (например, red, 20px, #ffffff).

Пример:

h1 {
    color: blue;
    font-size: 24px;
}

---

### Популярные свойства CSS3
1. Цвет текста

   color: red;
   

2. Размер шрифта

   font-size: 16px;
   

3. Фон элемента

   background-color: yellow;
   

4. Границы

   border: 2px solid black;
   

5. Тени

   box-shadow: 5px 5px 10px gray;
   

---

### Практика
Попробуйте создать простой HTML-документ и добавить стили:
1. Задайте цвет фона страницы.
2. Измените цвет заголовка.
3. Добавьте тень к параграфу.

---

В следующем уроке мы разберем селекторы и каскадность в CSS. Оставайтесь с нами! 🚀

Если есть вопросы, пишите в комментариях! 😉

#CSS #ВебРазработка #УрокиCSS #Программирование

Урок 2: Селекторы и каскадность в CSS3

Привет, друзья! 👋 Продолжаем изучать CSS3. Сегодня мы разберем селекторы и каскадность — ключевые понятия, которые помогут вам управлять стилями на вашей веб-странице. Поехали! 🚀

---

### Что такое селекторы?
Селекторы — это шаблоны, которые позволяют выбрать элементы HTML для применения стилей. Вот основные типы селекторов:

1. Селектор по тегу
Применяет стили ко всем элементам с указанным тегом.

   p {
       color: green;
   }
   

2. Селектор по классу
Используется для элементов с определенным классом (указывается через точку).

   .text-red {
       color: red;
   }
   

   <p class="text-red">Этот текст красный.</p>
   

3. Селектор по ID
Применяется к элементу с уникальным идентификатором (указывается через решетку).

   #header {
       font-size: 30px;
   }
   

   <h1 id="header">Заголовок</h1>
   

4. Универсальный селектор
Применяет стили ко всем элементам на странице.

   * {
       margin: 0;
       padding: 0;
   }
   

5. Комбинированные селекторы
Можно комбинировать селекторы для более точного выбора:
- Вложенные элементы:

     div p {
         color: blue;
     }
     

- Несколько классов:

     .text-bold.text-large {
         font-weight: bold;
         font-size: 20px;
     }
     

- Дочерние элементы:

     ul > li {
         list-style: none;
     }
     

---

### Каскадность в CSS
Каскадность — это механизм, который определяет, какие стили будут применены к элементу, если на него влияют несколько правил. Вот основные принципы:

1. Приоритеты:
- Стили, указанные через !important, имеют наивысший приоритет.
- Инлайн-стили (внутри тега) имеют приоритет над внешними стилями.
- Селекторы по ID имеют больший вес, чем классы, а классы — больше, чем теги.

Пример:

   p {
       color: blue !important; /* Этот стиль применится */
   }
   p {
       color: red;
   }
   

2. Порядок объявления:
Если приоритеты равны, применяется последнее объявленное правило.

---

### Практика
1. Создайте HTML-документ с несколькими элементами: заголовками, параграфами и списками.
2. Используйте разные типы селекторов для стилизации:
- Измените цвет всех параграфов.
- Добавьте класс для изменения шрифта заголовка.
- Используйте ID для задания фона определенному блоку.

---

### Домашнее задание
Попробуйте создать страницу с использованием всех типов селекторов. Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем блочную модель CSS и научимся работать с отступами и границами. Оставайтесь с нами! 💪

#CSS #ВебРазработка #УрокиCSS #Программирование

Урок 3: Блочная модель CSS — Отступы, границы и размеры

Привет, друзья! 👋 Сегодня мы погрузимся в одну из самых важных тем в CSS — блочную модель. Это основа верстки, которая поможет вам контролировать размеры, отступы и границы элементов. Давайте разбираться! 🚀

---

### Что такое блочная модель?
Каждый элемент на веб-странице представляет собой прямоугольный блок. Блочная модель описывает, как вычисляются размеры этого блока, включая:
1. Содержимое (content) — область, где отображается текст или другие элементы.
2. Внутренние отступы (padding) — пространство между содержимым и границей.
3. Границы (border) — рамка вокруг элемента.
4. Внешние отступы (margin) — пространство между элементом и другими элементами.

---

### Свойства блочной модели

1. Ширина и высота (width, height)
Задают размеры содержимого элемента.

   div {
       width: 300px;
       height: 200px;
   }
   

2. Внутренние отступы (padding)
Добавляют пространство внутри элемента, вокруг содержимого.

   div {
       padding: 20px; /* Отступы со всех сторон */
       padding-top: 10px; /* Индивидуально */
   }
   

3. Границы (border)
Задают рамку вокруг элемента.

   div {
       border: 2px solid black; /* Толщина, стиль, цвет */
       border-radius: 10px; /* Закругленные углы */
   }
   

4. Внешние отступы (margin)
Создают пространство между элементами.

   div {
       margin: 15px; /* Отступы со всех сторон */
       margin-bottom: 30px; /* Индивидуально */
   }
   

---

### Как рассчитывается общий размер элемента?
По умолчанию общий размер элемента складывается из:
- Ширина = width + padding + border
- Высота = height + padding + border

Чтобы изменить это поведение, можно использовать свойство box-sizing:
- box-sizing: content-box; (по умолчанию) — размеры учитывают только содержимое.
- box-sizing: border-box; — размеры включают padding и border.

Пример:

div {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box; /* Общая ширина останется 300px */
}

---

### Практика
1. Создайте блок с заданными размерами (width, height).
2. Добавьте внутренние отступы (padding) и границу (border).
3. Поэкспериментируйте с внешними отступами (margin), чтобы расположить блоки на странице.
4. Используйте box-sizing: border-box;, чтобы упростить расчеты.

---

### Домашнее задание
Создайте макет из нескольких блоков:
- Заголовок с отступами и границей.
- Текстовый блок с внутренними отступами.
- Изображение с внешними отступами.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем позиционирование элементов — как управлять расположением блоков на странице. Оставайтесь с нами! 💪

#CSS #ВебРазработка #УрокиCSS #Программирование

Урок 4: Позиционирование элементов в CSS

Привет, друзья! 👋 Сегодня мы изучим, как управлять расположением элементов на веб-странице с помощью позиционирования в CSS. Это мощный инструмент, который позволяет точно размещать элементы и создавать сложные макеты. Поехали! 🚀

---

### Типы позиционирования

В CSS есть несколько способов позиционирования элементов:

1. Статическое позиционирование (`static`)
Это значение по умолчанию. Элементы отображаются в обычном потоке документа.

   div {
       position: static;
   }
   

2. Относительное позиционирование (`relative`)
Элемент смещается относительно своего обычного положения. Остальные элементы остаются на своих местах.

   div {
       position: relative;
       top: 20px; /* Смещение вниз */
       left: 30px; /* Смещение вправо */
   }
   

3. Абсолютное позиционирование (`absolute`)
Элемент удаляется из обычного потока документа и позиционируется относительно ближайшего родительского элемента с position: relative, absolute, fixed или sticky. Если такого родителя нет, элемент позиционируется относительно <html>.

   div {
       position: absolute;
       top: 0;
       right: 0;
   }
   

4. Фиксированное позиционирование (`fixed`)
Элемент фиксируется относительно окна браузера и не двигается при прокрутке страницы.

   div {
       position: fixed;
       bottom: 10px;
       right: 10px;
   }
   

5. Липкое позиционирование (`sticky`)
Элемент ведет себя как relative, пока не достигнет определенной точки при прокрутке, после чего становится fixed.

   div {
       position: sticky;
       top: 0;
   }
   

---

### Свойства для позиционирования
Для управления позицией элемента используются свойства:
- top, bottom, left, right — задают смещение относительно краев.
- z-index — управляет порядком наложения элементов (работает только с position: relative, absolute, fixed, sticky).

Пример:

div {
    position: absolute;
    top: 50px;
    left: 100px;
    z-index: 10; /* Элемент будет поверх других */
}

---

### Примеры использования

1. Кнопка "Наверх"

   .to-top {
       position: fixed;
       bottom: 20px;
       right: 20px;
       padding: 10px;
       background-color: blue;
       color: white;
   }
   

2. Липкий заголовок

   header {
       position: sticky;
       top: 0;
       background-color: white;
       z-index: 100;
   }
   

3. Наложение элементов

   .image-container {
       position: relative;
   }
   .overlay {
       position: absolute;
       top: 0;
       left: 0;
       background-color: rgba(0, 0, 0, 0.5);
   }
   

---

### Практика
1. Создайте блок с относительным позиционированием и сместите его.
2. Добавьте фиксированную кнопку в нижний правый угол страницы.
3. Сделайте липкий заголовок, который остается наверху при прокрутке.

---

### Домашнее задание
Создайте макет с использованием всех типов позиционирования:
- Относительное позиционирование для смещения элемента.
- Абсолютное позиционирование для наложения текста на изображение.
- Фиксированное позиционирование для кнопки "Наверх".
- Липкое позиционирование для заголовка.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем Flexbox — мощный инструмент для создания гибких макетов. Оставайтесь с нами! 💪

#CSS #ВебРазработка #УрокиCSS #Программирование

Урок 5: Flexbox — Гибкие макеты в CSS

Привет, друзья! 👋 Сегодня мы изучим Flexbox — одну из самых мощных и удобных технологий для создания гибких и адаптивных макетов. С помощью Flexbox вы сможете легко выравнивать элементы, распределять пространство и управлять порядком отображения. Поехали! 🚀

---

### Что такое Flexbox?
Flexbox (гибкий контейнер) — это модуль CSS, который позволяет создавать макеты с предсказуемым поведением, даже если размеры элементов динамические или неизвестны.

Основные понятия:
- Flex-контейнер — элемент, который содержит дочерние элементы (flex-элементы).
- Flex-элементы — дочерние элементы внутри flex-контейнера.

---

### Как создать Flex-контейнер?
Чтобы превратить элемент в flex-контейнер, используйте свойство display:

.container {
    display: flex;
}

Теперь все дочерние элементы становятся flex-элементами.

---

### Основные свойства Flexbox

#### Для контейнера:
1. Направление оси (`flex-direction`)
Определяет, как элементы располагаются внутри контейнера:
- row (по умолчанию) — слева направо.
- row-reverse — справа налево.
- column — сверху вниз.
- column-reverse — снизу вверх.

Пример:

   .container {
       flex-direction: column;
   }
   

2. Выравнивание по главной оси (`justify-content`)
Распределяет элементы вдоль главной оси:
- flex-start (по умолчанию) — элементы прижимаются к началу.
- flex-end — элементы прижимаются к концу.
- center — элементы по центру.
- space-between — равное расстояние между элементами.
- space-around — равное пространство вокруг элементов.

Пример:

   .container {
       justify-content: space-between;
   }
   

3. Выравнивание по поперечной оси (`align-items`)
Выравнивает элементы вдоль поперечной оси:
- stretch (по умолчанию) — элементы растягиваются на всю высоту.
- flex-start — элементы прижимаются к началу.
- flex-end — элементы прижимаются к концу.
- center — элементы по центру.

Пример:

   .container {
       align-items: center;
   }
   

4. Многострочность (`flex-wrap`)
Позволяет элементам переноситься на новую строку, если они не помещаются:
- nowrap (по умолчанию) — элементы не переносятся.
- wrap — элементы переносятся.
- wrap-reverse — элементы переносятся в обратном порядке.

Пример:

   .container {
       flex-wrap: wrap;
   }
   

---

#### Для элементов:
1. Гибкость (`flex`)
Управляет тем, как элемент растягивается или сжимается относительно других:
- flex-grow — определяет, насколько элемент может растягиваться.
- flex-shrink — определяет, насколько элемент может сжиматься.
- flex-basis — задает начальный размер элемента.

Пример:

   .item {
       flex: 1; /* Элемент растягивается на все доступное пространство */
   }
   

2. Порядок (`order`)
Позволяет изменить порядок отображения элементов.

   .item {
       order: 2; /* Элемент будет отображаться вторым */
   }
   

3. Выравнивание отдельного элемента (`align-self`)
Позволяет переопределить выравнивание для конкретного элемента.

   .item {
       align-self: flex-end;
   }
   

---

### Практика
1. Создайте flex-контейнер и добавьте в него несколько элементов.
2. Поэкспериментируйте с justify-content, align-items и flex-direction.
3. Используйте flex-wrap, чтобы элементы переносились на новую строку.
4. Попробуйте изменить порядок элементов с помощью order.

---

### Домашнее задание
Создайте макет страницы с использованием Flexbox:
- Шапка с логотипом и меню.
- Основной контент с боковой панелью.
- Футер с выравниванием по центру.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем Grid Layout — еще более мощный инструмент для создания сложных макетов. Оставайтесь с нами! 💪

#CSS #ВебРазработка #УрокиCSS #Программирование

Урок 6: CSS Grid — Создание сложных макетов

Привет, друзья! 👋 Сегодня мы изучим CSS Grid — мощный инструмент для создания сложных и адаптивных макетов. Если Flexbox — это про одномерные макеты (строка или столбец), то Grid позволяет работать с двумерными сетками (строки и столбцы одновременно). Поехали! 🚀

---

### Что такое CSS Grid?
CSS Grid — это система для создания сеточных макетов. Она позволяет легко управлять строками, столбцами и промежутками между ними, а также размещать элементы в любом месте сетки.

Основные понятия:
- Grid-контейнер — элемент, который содержит дочерние элементы (grid-элементы).
- Grid-элементы — дочерние элементы внутри grid-контейнера.
- Строки и столбцы — определяют структуру сетки.

---

### Как создать Grid-контейнер?
Чтобы превратить элемент в grid-контейнер, используйте свойство display:

.container {
    display: grid;
}

Теперь все дочерние элементы становятся grid-элементами.

---

### Основные свойства Grid

#### Для контейнера:
1. Определение строк и столбцов (`grid-template-rows`, `grid-template-columns`)
Задайте количество и размеры строк и столбцов:

   .container {
       display: grid;
       grid-template-columns: 100px 200px auto; /* 3 столбца */
       grid-template-rows: 100px 300px; /* 2 строки */
   }
   

Можно использовать единицы измерения: px, %, fr (доля свободного пространства).

2. Промежутки между элементами (`gap`)
Задайте расстояние между строками и столбцами:

   .container {
       gap: 10px; /* Промежутки между всеми элементами */
       row-gap: 15px; /* Только между строками */
       column-gap: 20px; /* Только между столбцами */
   }
   

3. Выравнивание элементов (`justify-items`, `align-items`)
- justify-items — выравнивание по горизонтали.
- align-items — выравнивание по вертикали.

Пример:

   .container {
       justify-items: center; /* По горизонтали */
       align-items: end; /* По вертикали */
   }
   

4. Автоматическое создание строк и столбцов (`grid-auto-rows`, `grid-auto-columns`)
Если элементов больше, чем задано строк/столбцов, Grid автоматически создаст новые:

   .container {
       grid-auto-rows: 100px; /* Высота новых строк */
   }
   

---

#### Для элементов:
1. Размещение элемента в сетке (`grid-row`, `grid-column`)
Укажите, где должен располагаться элемент:

   .item {
       grid-row: 1 / 3; /* Элемент занимает строки 1 и 2 */
       grid-column: 2 / 4; /* Элемент занимает столбцы 2 и 3 */
   }
   

2. Выравнивание отдельного элемента (`justify-self`, `align-self`)
Переопределите выравнивание для конкретного элемента:

   .item {
       justify-self: start; /* По горизонтали */
       align-self: center; /* По вертикали */
   }
   

3. Именованные области (`grid-template-areas`)
Создайте именованные области и разместите элементы в них:

   .container {
       display: grid;
       grid-template-areas:
           "header header"
           "sidebar content"
           "footer footer";
   }
   .header { grid-area: header; }
   .sidebar { grid-area: sidebar; }
   .content { grid-area: content; }
   .footer { grid-area: footer; }
   

---

### Практика
1. Создайте grid-контейнер с 3 столбцами и 2 строками.
2. Разместите элементы в разных частях сетки.
3. Используйте gap, чтобы добавить промежутки между элементами.
4. Попробуйте создать макет с именованными областями.

---

### Домашнее задание
Создайте макет страницы с использованием CSS Grid:
- Шапка (header) на всю ширину.
- Боковая панель (sidebar) и основной контент (content).
- Футер (footer) на всю ширину.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем анимации и трансформации в CSS. Оставайтесь с нами! 💪

Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)

#CSS #ВебРазработка #УрокиCSS #Программирование

Урок 7: Анимации и трансформации в CSS

Привет, друзья! 👋 Сегодня мы изучим, как оживить ваши веб-страницы с помощью анимаций и трансформаций в CSS. Эти инструменты помогут вам создавать плавные переходы, вращение, масштабирование и другие эффекты. Поехали! 🚀

---

### Трансформации в CSS
Трансформации позволяют изменять форму, размер и положение элемента. Основные свойства:

1. Перемещение (`translate`)
Сдвигает элемент по осям X и Y:

   .box {
       transform: translate(50px, 20px); /* Вправо на 50px, вниз на 20px */
   }
   

2. Масштабирование (`scale`)
Увеличивает или уменьшает размер элемента:

   .box {
       transform: scale(1.5); /* Увеличивает элемент в 1.5 раза */
   }
   

3. Вращение (`rotate`)
Поворачивает элемент на заданный угол:

   .box {
       transform: rotate(45deg); /* Поворот на 45 градусов */
   }
   

4. Наклон (`skew`)
Наклоняет элемент по осям X и Y:

   .box {
       transform: skew(20deg, 10deg); /* Наклон по X и Y */
   }
   

5. Множественные трансформации
Можно комбинировать несколько трансформаций:

   .box {
       transform: translate(50px, 20px) rotate(45deg) scale(1.2);
   }
   

---

### Переходы (`transition`)
Переходы позволяют плавно изменять свойства элемента при наведении или других событиях.

1. Свойства перехода:
- transition-property — указывает, какое свойство анимировать (например, background-color, transform).
- transition-duration — длительность перехода (например, 1s).
- transition-timing-function — функция скорости (например, ease, linear).
- transition-delay — задержка перед началом перехода.

Пример:

   .box {
       background-color: blue;
       transition: background-color 0.5s ease, transform 1s;
   }
   .box:hover {
       background-color: red;
       transform: scale(1.2);
   }
   

---

### Анимации (`@keyframes`)
Анимации позволяют создавать сложные последовательности изменений.

1. Создание анимации:
Используйте @keyframes, чтобы задать этапы анимации:

   @keyframes slide {
       0% { transform: translateX(0); }
       50% { transform: translateX(200px); }
       100% { transform: translateX(0); }
   }
   

2. Применение анимации:
Используйте свойство animation, чтобы применить анимацию к элементу:

   .box {
       animation: slide 3s infinite; /* Название, длительность, повтор */
   }
   

3. Свойства анимации:
- animation-name — название анимации.
- animation-duration — длительность.
- animation-timing-function — функция скорости.
- animation-delay — задержка перед началом.
- animation-iteration-count — количество повторений (infinite для бесконечности).
- animation-direction — направление (normal, reverse, alternate).

---

### Практика
1. Создайте кнопку, которая увеличивается при наведении.
2. Добавьте плавный переход для изменения цвета фона.
3. Создайте анимацию, чтобы элемент двигался по кругу.

---

### Домашнее задание
Создайте страницу с использованием анимаций и трансформаций:
- Кнопка с эффектом наведения.
- Блок, который вращается при клике.
- Текст, который плавно появляется при загрузке страницы.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем адаптивный дизайн и медиазапросы. Оставайтесь с нами! 💪

Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)

#CSS #ВебРазработка #УрокиCSS #Программирование

Урок 8: Адаптивный дизайн и медиазапросы

Привет, друзья! 👋 Сегодня мы изучим, как сделать ваши веб-страницы адаптивными, чтобы они отлично выглядели на любых устройствах — от смартфонов до больших мониторов. Для этого мы будем использовать медиазапросы и другие техники. Поехали! 🚀

---

### Что такое адаптивный дизайн?
Адаптивный дизайн — это подход к верстке, при котором страница автоматически подстраивается под размер экрана устройства. Это важно, ведь пользователи заходят на сайты с разных устройств: смартфонов, планшетов, ноутбуков и десктопов.

---

### Медиазапросы (`@media`)
Медиазапросы позволяют применять стили в зависимости от характеристик устройства, таких как ширина экрана, ориентация и разрешение.

#### Основной синтаксис:

@media (условие) {
    /* Стили, которые применяются при выполнении условия */
}

#### Примеры условий:
1. Ширина экрана:

   @media (max-width: 768px) {
       body {
           background-color: lightblue;
       }
   }
   

Этот стиль применится, если ширина экрана меньше или равна 768px.

2. Ориентация устройства:

   @media (orientation: portrait) {
       body {
           font-size: 18px;
       }
   }
   

Этот стиль применится, если устройство находится в портретной ориентации.

3. Минимальная и максимальная ширина:

   @media (min-width: 480px) and (max-width: 1024px) {
       .container {
           width: 90%;
       }
   }
   

Этот стиль применится для экранов от 480px до 1024px.

---

### Подходы к адаптивному дизайну

1. Mobile First
Сначала создаются стили для мобильных устройств, а затем добавляются медиазапросы для более широких экранов.

Пример:

   body {
       font-size: 14px;
   }
   @media (min-width: 768px) {
       body {
           font-size: 16px;
       }
   }
   

2. Использование относительных единиц
Используйте %, em, rem, vw, vh вместо фиксированных значений (px), чтобы элементы масштабировались пропорционально.

Пример:

   .container {
       width: 100%; /* Занимает всю ширину экрана */
       padding: 2rem; /* Отступы в зависимости от размера шрифта */
   }
   

3. Гибкие изображения
Чтобы изображения не выходили за пределы контейнера:

   img {
       max-width: 100%;
       height: auto;
   }
   

---

### Практика
1. Создайте простую страницу с текстом и изображением.
2. Добавьте медиазапросы, чтобы:
- На экранах меньше 768px текст был больше, а изображение занимало всю ширину.
- На экранах больше 1200px контент был центрирован и занимал 60% ширины.

---

### Домашнее задание
Создайте адаптивную страницу:
- На мобильных устройствах элементы должны отображаться в один столбец.
- На планшетах — в два столбца.
- На десктопах — в три столбца.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем препроцессоры CSS (SASS/SCSS). Оставайтесь с нами! 💪

Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)

#CSS #ВебРазработка #УрокиCSS #Программирование

Урок 9: Препроцессоры CSS — SASS/SCSS

Привет, друзья! 👋 Сегодня мы познакомимся с препроцессорами CSS, такими как SASS/SCSS. Эти инструменты делают написание стилей проще, удобнее и мощнее. Вы узнаете, как использовать переменные, вложенности, миксины и многое другое. Поехали! 🚀

---

### Что такое SASS/SCSS?
SASS (Syntactically Awesome Style Sheets) — это препроцессор, который расширяет возможности CSS. Он добавляет функции, которых нет в обычном CSS, такие как:
- Переменные.
- Вложенности.
- Миксины (функции).
- Импорт файлов.

SCSS — это синтаксис SASS, который полностью совместим с обычным CSS.

---

### Основные возможности SASS/SCSS

#### 1. Переменные
Переменные позволяют хранить значения (цвета, размеры и т.д.) для повторного использования.

Пример:

$primary-color: #3498db;
$font-size: 16px;

body {
    color: $primary-color;
    font-size: $font-size;
}

#### 2. Вложенности
Вложенности позволяют писать более читаемый и структурированный код.

Пример:

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    li {
        display: inline-block;
    }
    a {
        text-decoration: none;
    }
}

#### 3. Миксины (Mixins)
Миксины — это функции, которые позволяют повторно использовать блоки кода.

Пример:

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.button {
    @include border-radius(10px);
}

#### 4. Импорт файлов
Вы можете разбивать стили на несколько файлов и импортировать их в основной файл.

Пример:

@import 'variables';
@import 'buttons';
@import 'layout';

#### 5. Наследование (`@extend`)
Наследование позволяет повторно использовать стили одного элемента для другого.

Пример:

.message {
    padding: 10px;
    border: 1px solid #ccc;
}

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

#### 6. Математические операции
SASS поддерживает математические операции прямо в стилях.

Пример:

.container {
    width: 100% / 3; /* Ширина будет 33.333% */
}

---

### Как использовать SASS/SCSS?
1. Установите SASS через npm (Node.js):

   npm install -g sass
   

2. Создайте файл .scss и напишите в нем стили.

3. Скомпилируйте SCSS в CSS:

   sass input.scss output.css
   

4. Подключите скомпилированный CSS-файл к вашему HTML.

---

### Практика
1. Создайте файл styles.scss.
2. Используйте переменные для цветов и размеров.
3. Добавьте вложенности для структурирования стилей.
4. Создайте миксин для градиентного фона.

---

### Домашнее задание
Создайте проект с использованием SASS/SCSS:
- Разделите стили на несколько файлов (например, variables.scss, buttons.scss, layout.scss).
- Используйте миксины для создания кнопок с разными стилями.
- Подключите скомпилированный CSS к HTML.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем BEM-методологию для написания чистого и поддерживаемого CSS. Оставайтесь с нами! 💪

Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)

#CSS #ВебРазработка #УрокиCSS #Программирование