#2 Пишем свой Bootstrap с нуля | Классы колонок на Sass

Исходники к видео:

Подписывайся на альтернативные каналы:

В прошлом уроке мы начали писать свою реализацию Bootstrap. И на данный момент у нас уже есть основа для сетки:

— класс контейнера
— ряда
— и гибкой колонки

Этого уже достаточно, чтобы создавать макеты с симметричными элементами в ряду. Но не позволяет нам размещать их более сложные конфигурации. Например, чтобы один элемент занимал 3 колонки, а другой 9.

Как вы знаете, в Bootstrap для этого существуют специальные классы с фиксированной шириной от .col-1 до .col-12, соответственно.

В этом уроке мы с вами также создадим эти классы, используя возможности препроцессора Sass.

0:00 - Вступление
1:04 - Создание переменных
2:27 - Класс ".col-1"
2:54 - Расчет ширины одной колонки
4:55 - Выносим общую часть колонок
5:10 - Класс ".col-2"
5:47 - Миксин для колонок
6:38 - Генерируем классы колонок через @for
7:43 - Использование нашей сетки
8:34 - Послесловие

#bootstrap #sass #flexbox

Если тебе интересна данная тематика, подпишись на канал!
Для меня это также станет дополнительным стимулом продолжать свою работу.

Здесь вы найдете подробные интерактивные курсы по веб-разработке.

[CodeQuestRu]

0:00 - Вступление
1:04 - Создание переменных
2:27 - Класс ".col-1"
2:54 - Расчет ширины одной колонки
4:55 - Выносим общую часть колонок
5:10 - Класс ".col-2"
5:47 - Миксин для колонок
6:38 - Генерируем классы колонок через @for
7:43 - Использование нашей сетки
8:34 - Послесловие

[jackdoe]

Давно работаю с Sass, но то что увидел в твоих видео- это потрясающе!

[artikor]

Я, выучивший css и хорошо пишущий на scss: -"У меня такая хорошая компановка кода!"
Я, посмотревший новый видос КоКвы(CoQue): -"У меня такая плохая компановка кода.."

Видос шик, продолжай :)

[lesan]

я даже не подозревал что Scss можно использовать циклы)