Что такое SCSS (часть 1)
SCSS — "диалект" языка SASS. А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода.
Отличие SCSS от SASS заключается в том, что SCSS больше похож на обычный CSS код.
Made in HTML/CSS
SCSS — "диалект" языка SASS. А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода.
Проще говоря, SASS это такой язык, код которого специальной ruby-программой транслируется в обычный CSS код. Синтаксис этого языка очень гибок, он учитывает множество мелочей, которые так желанны в CSS. Более того, в нём есть даже логика (@if, each), математика (можно складывать как числа, строки, так и цвета). Возможно, некоторые возможности SCSS покажутся вам избыточными, но, на мой взгляд, лишними они не будут, останутся "про запас".
Отличие SCSS от SASS заключается в том, что SCSS больше похож на обычный CSS код.
Made in HTML/CSS
🔥7
Основные особенности SCSS
1. Вложенность:
- SCSS позволяет использовать вложенные селекторы, чтобы сделать код более читаемым и иерархическим.
2. Переменные:
- Вы можете объявлять переменные для хранения значений, таких как цвета, размеры и другие свойства, что облегчает масштабируемость.
Made in HTML/CSS
1. Вложенность:
- SCSS позволяет использовать вложенные селекторы, чтобы сделать код более читаемым и иерархическим.
2. Переменные:
- Вы можете объявлять переменные для хранения значений, таких как цвета, размеры и другие свойства, что облегчает масштабируемость.
Made in HTML/CSS
👍5🔥1
Основные особенности SCSS:
3. Миксины:
- Миксины позволяют вам создавать повторно используемые блоки кода, которые можно вставить в другие селекторы.
4. Наследование:
- SCSS поддерживает наследование стилей с помощью директивы @extend, что позволяет избежать дублирования кода.
Made in HTML/CSS
3. Миксины:
- Миксины позволяют вам создавать повторно используемые блоки кода, которые можно вставить в другие селекторы.
4. Наследование:
- SCSS поддерживает наследование стилей с помощью директивы @extend, что позволяет избежать дублирования кода.
Made in HTML/CSS
🔥5
Основные особенности SCSS
5. Функции и математические операции:
- SCSS поддерживает операции с числами и фильтрацию значений через встроенные функции.
6. Файловая структура и импорт:
- SCSS позволяет разбивать код на множество файлов и импортировать их при помощи @import, облегчая организацию проекта.
Made in HTML/CSS
5. Функции и математические операции:
- SCSS поддерживает операции с числами и фильтрацию значений через встроенные функции.
6. Файловая структура и импорт:
- SCSS позволяет разбивать код на множество файлов и импортировать их при помощи @import, облегчая организацию проекта.
Made in HTML/CSS
👍3🔥1
Итог:
SCSS значительно облегчает написание и поддержку стилей, особенно в крупных проектах.
Он позволяет создавать более структурированный и организованный код, что делает разработку удобнее и эффективнее.
SCSS значительно облегчает написание и поддержку стилей, особенно в крупных проектах.
Он позволяет создавать более структурированный и организованный код, что делает разработку удобнее и эффективнее.
Его возможности, такие как переменные, миксины и наследование, позволяют разработчикам повторно использовать код и поддерживать стили более гибко.
👍4🔥1
Проект 16: кнопка с анимацией
HTML
Подробнее:
- Основной контейнер, который центрирует содержимое.
- Кнопка, которая активирует анимацию при нажатии.
- Элемент тени, который создает эффект тени под кнопкой.
Made in HTML/CSS
HTML
Подробнее:
- Основной контейнер, который центрирует содержимое.
- Кнопка, которая активирует анимацию при нажатии.
- Элемент тени, который создает эффект тени под кнопкой.
Made in HTML/CSS
🔥6
Проект 16: кнопка с анимацией
SCSS - 1 часть
Подробнее:
body: Определяет стили для тела страницы, включая центрирование содержимого и градиентный фон.
.content: Определяет высоту контейнера.
.jump: Определяет относительное позиционирование для кнопки.
.moveAndRotate: Применяет анимацию moveAndRotate к кнопке, когда она получает класс moveAndRotate.
Made in HTML/CSS
SCSS - 1 часть
Подробнее:
body: Определяет стили для тела страницы, включая центрирование содержимого и градиентный фон.
.content: Определяет высоту контейнера.
.jump: Определяет относительное позиционирование для кнопки.
.moveAndRotate: Применяет анимацию moveAndRotate к кнопке, когда она получает класс moveAndRotate.
Made in HTML/CSS
🔥7
Проект 16: кнопка с анимацией
SCSS - 2 часть
Подробнее:
@keyframes moveAndRotate: Определяет анимацию, которая включает перемещение, вращение и масштабирование кнопки.
0%: Начальное состояние кнопки.
50%: Кнопка перемещается вверх на 30px.
75%: Кнопка вращается на 720 градусов и увеличивается в два раза.
100%: Кнопка возвращается в исходное положение, но остается повернутой на 720 градусов.
Made in HTML/CSS
SCSS - 2 часть
Подробнее:
@keyframes moveAndRotate: Определяет анимацию, которая включает перемещение, вращение и масштабирование кнопки.
0%: Начальное состояние кнопки.
50%: Кнопка перемещается вверх на 30px.
75%: Кнопка вращается на 720 градусов и увеличивается в два раза.
100%: Кнопка возвращается в исходное положение, но остается повернутой на 720 градусов.
Made in HTML/CSS
👍5🔥2
Проект 16: кнопка с анимацией
SCSS - 3 часть
Подробнее:
.shadow: Определяет стили для элемента тени.
width и height: Размеры тени.
background-color: Цвет тени с прозрачностью.
border-radius: Закругление углов тени.
position: Абсолютное позиционирование.
bottom и left: Позиционирование тени относительно контейнера.
transform: Центрирование тени по горизонтали.
filter: Размытие тени для создания эффекта мягкой тени.
Made in HTML/CSS
SCSS - 3 часть
Подробнее:
.shadow: Определяет стили для элемента тени.
width и height: Размеры тени.
background-color: Цвет тени с прозрачностью.
border-radius: Закругление углов тени.
position: Абсолютное позиционирование.
bottom и left: Позиционирование тени относительно контейнера.
transform: Центрирование тени по горизонтали.
filter: Размытие тени для создания эффекта мягкой тени.
Made in HTML/CSS
👍5
Проект 17: прикольный переключатель
HTML
Подробнее:
<div class="toggle">: Основной контейнер для переключателя.
<input type="checkbox" id="btn" checked>: Скрытый чекбокс, который используется для управления состоянием переключателя.
<label for="btn">: Метка, связанная с чекбоксом, которая визуально представляет переключатель.
<span class="ball off"></span>: Элемент, представляющий шарик в выключенном состоянии.
<span class="ball on"></span>: Элемент, представляющий шарик в включенном состоянии.
<div class="bar"></div>: Элемент, представляющий полосу переключателя.
Made in HTML/CSS
HTML
Подробнее:
<div class="toggle">: Основной контейнер для переключателя.
<input type="checkbox" id="btn" checked>: Скрытый чекбокс, который используется для управления состоянием переключателя.
<label for="btn">: Метка, связанная с чекбоксом, которая визуально представляет переключатель.
<span class="ball off"></span>: Элемент, представляющий шарик в выключенном состоянии.
<span class="ball on"></span>: Элемент, представляющий шарик в включенном состоянии.
<div class="bar"></div>: Элемент, представляющий полосу переключателя.
Made in HTML/CSS
🔥5
Проект 17: прикольный переключатель
CSS - 1 часть
Подробнее:
:root: Определение CSS-переменных для управления размерами, цветами и анимациями.
*: Применение общих стилей ко всем элементам, включая box-sizing и переходы.
body: Стилизация body для центрирования содержимого и установки фонового градиента.
Made in HTML/CSS
CSS - 1 часть
Подробнее:
:root: Определение CSS-переменных для управления размерами, цветами и анимациями.
*: Применение общих стилей ко всем элементам, включая box-sizing и переходы.
body: Стилизация body для центрирования содержимого и установки фонового градиента.
Made in HTML/CSS
👍6
Проект 17: прикольный переключатель
CSS - 2 часть
Подробнее:
.toggle: Основной контейнер для переключателя с заданными размерами и центрированием содержимого.
input: Скрытие чекбокса, так как он управляется через лейбл.
label[for=btn]: Стилизация лейбла, который представляет собой фон переключателя с градиентом, тенями и скругленными углами.
Made in HTML/CSS
CSS - 2 часть
Подробнее:
.toggle: Основной контейнер для переключателя с заданными размерами и центрированием содержимого.
input: Скрытие чекбокса, так как он управляется через лейбл.
label[for=btn]: Стилизация лейбла, который представляет собой фон переключателя с градиентом, тенями и скругленными углами.
Made in HTML/CSS
👍3🔥2
Проект 17: прикольный переключатель
CSS - 3 часть
Подробнее:
label:after: Псевдоэлемент, создающий дополнительный визуальный эффект (например, тень или отражение).
Made in HTML/CSS
CSS - 3 часть
Подробнее:
label:after: Псевдоэлемент, создающий дополнительный визуальный эффект (например, тень или отражение).
Made in HTML/CSS
👍6
Проект 17: прикольный переключатель
CSS - 4 часть
Подробнее:
.ball: Стилизация шарика переключателя с градиентами, тенями и скругленными углами.
Made in HTML/CSS
CSS - 4 часть
Подробнее:
.ball: Стилизация шарика переключателя с градиентами, тенями и скругленными углами.
Made in HTML/CSS
🔥7
Проект 17: прикольный переключатель
CSS - 5 часть
Подробнее:
.ball.off: Стилизация шарика в выключенном состоянии.
#btn:checked + label: Изменение цвета фона переключателя при активации чекбокса.
#btn:checked + label .ball.off:hover: Стилизация шарика в выключенном состоянии при наведении.
Made in HTML/CSS
CSS - 5 часть
Подробнее:
.ball.off: Стилизация шарика в выключенном состоянии.
#btn:checked + label: Изменение цвета фона переключателя при активации чекбокса.
#btn:checked + label .ball.off:hover: Стилизация шарика в выключенном состоянии при наведении.
Made in HTML/CSS
🔥6👨💻1
Проект 17: прикольный переключатель
CSS - 6 часть
Подробнее:
#btn:checked + label .ball.off:hover: Стилизация шарика в выключенном состоянии при наведении.
#btn:checked + label .ball.off: Стилизация шарика в выключенном состоянии при активации чекбокса.
Made in HTML/CSS
CSS - 6 часть
Подробнее:
#btn:checked + label .ball.off:hover: Стилизация шарика в выключенном состоянии при наведении.
#btn:checked + label .ball.off: Стилизация шарика в выключенном состоянии при активации чекбокса.
Made in HTML/CSS
👍4🔥2
Проект 17: прикольный переключатель
CSS - 7 часть
.ball.on: Стилизация шарика во включенном состоянии.
.ball.on:hover: Стилизация шарика во включенном состоянии при наведении.
#btn:checked + label .ball.on: Стилизация шарика во включенном состоянии при активации чекбокса.
Made in HTML/CSS
CSS - 7 часть
.ball.on: Стилизация шарика во включенном состоянии.
.ball.on:hover: Стилизация шарика во включенном состоянии при наведении.
#btn:checked + label .ball.on: Стилизация шарика во включенном состоянии при активации чекбокса.
Made in HTML/CSS
🔥6
Проект 17: прикольный переключатель
CSS - 8 часть
.bar: Стилизация дополнительного элемента (полоски) с градиентами, тенями и поворотом.
#btn:checked + label + .bar: Изменение угла поворота полоски при активации чекбокса.
Made in HTML/CSS
CSS - 8 часть
.bar: Стилизация дополнительного элемента (полоски) с градиентами, тенями и поворотом.
#btn:checked + label + .bar: Изменение угла поворота полоски при активации чекбокса.
Made in HTML/CSS
🔥5👍1
Атрибут loading позволяет браузеру откладывать загрузку содержимого элементов <img> и <iframe>, находящихся за пределами видимой области страницы, до тех пор, пока пользователь, прокручивая страницу, не окажется достаточно близко к этим элементам.
В этом переводе дается объяснение о том, как один атрибут может уменьшить нагрузку на сайт.
🌐 Читать статью
Made in HTML/CSS
👍5🔥2👨💻1
Кастомные скроллбары (пользовательские полосы прокрутки) позволяют разработчикам изменять внешний вид и поведение стандартных полос прокрутки в веб-приложениях.
Made in HTML/CSS
Это может быть полезно для создания уникального дизайна, улучшения пользовательского опыта или соответствия стилю сайта.
Made in HTML/CSS
👍8🔥4