{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"39ldt"},{"data":{"image":{"id":"6aa27e301bb6bd41ea2c62b5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"19t2s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"«Автоматически» в вебе не значит «без кода» — это значит, что стили применяются ко всем подходящим элементам сразу, по правилам (селекторам), а не прописываются для каждого вручную. Ниже — основные способы, как это делают, с примерами и пояснениями под реальные задачи (вроде тех, что вы раньше обсуждали: каталоги, карточки, сетки).","type":"unstyled","key":"5t334"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a2snl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":80,"offset":0,"style":"BOLD"}],"text":"Способ 1: внешний CSS‑файл (самый правильный и «автоматический» для всего сайта)","type":"unstyled","key":"5cel0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы пишете правила один раз в файле style.css, а они автоматически применяются ко всем страницам, где этот файл подключён.","type":"unstyled","key":"fd899"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2s72d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как подключить:","type":"unstyled","key":"eoppc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<head>","type":"unstyled","key":"fhiep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8l7pi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"dd0h4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4rbd6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"eqcc1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"emb5f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример правил:","type":"unstyled","key":"bdp6e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".card {","type":"unstyled","key":"8s7ss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5csh6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background: #ededed; ","type":"unstyled","key":"3jh1c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bjmhp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border-radius: 5px; ","type":"unstyled","key":"fls8h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"72vt7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding: 15px; ","type":"unstyled","key":"bcarh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3e93i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"} ","type":"unstyled","key":"3jsv1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a7otp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"4npdc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"97hja"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".card-row > .card { ","type":"unstyled","key":"bst5v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6m51i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: calc(25% - 20px); ","type":"unstyled","key":"vic0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"130r2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"} ","type":"unstyled","key":"2dl0s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dmk77"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все элементы с классом card сразу получат эти стили. Если завтра вы поменяете цвет фона в одном месте — он обновится везде.","type":"unstyled","key":"dp5mo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1f526"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Плюсы: удобно поддерживать, легко масштабировать, хорошо для SEO и скорости (файл кэшируется).","type":"unstyled","key":"5e1jh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Для кого: для любых проектов, особенно если страниц больше одной.","type":"unstyled","key":"bfp1h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"c8jq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":75,"offset":0,"style":"BOLD"}],"text":"Способ 2: встроенные стили в ","type":"unstyled","key":"2qgsj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cn5h5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"ckmfn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fj14o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стили применяются автоматически ко всем .card на этой странице.","type":"unstyled","key":"2chnb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bsae0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Плюсы: ничего не нужно подключать, удобно для прототипов.","type":"unstyled","key":"d472u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Минусы: не переиспользуется между страницами, сложнее поддерживать.","type":"unstyled","key":"adn3n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"90ias"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":60,"offset":0,"style":"BOLD"}],"text":"Способ 3: инлайн‑стили (только точечно, не для «автоматики»)","type":"unstyled","key":"6ai13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<div class="card" style="width: 300px; background: #f0f0f0;">Текст</div>","type":"unstyled","key":"7qbod"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5ja56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стиль применяется только к этому элементу. Это не способ для автоматической стилизации множества элементов: если карточек 50 штук, придётся прописывать каждому отдельно.","type":"unstyled","key":"37nh1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2jc3d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда уместно: когда нужно переопределить стиль у одного конкретного элемента (например, выделить «хит продаж»).","type":"unstyled","key":"9js6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"32gfl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":71,"offset":0,"style":"BOLD"}],"text":"Способ 4: CSS‑селекторы и псевдоклассы — вот где настоящая «автоматика»","type":"unstyled","key":"690ua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Именно они позволяют одним правилом стилизовать группы элементов по логике: каждый второй, первый в ряду, все ссылки и т. п.","type":"unstyled","key":"ejsa4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e3ln8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Примеры «умной» автоматики","type":"unstyled","key":"4chjc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждый первый, восьмой, пятнадцатый элемент (как в вашем примере):","type":"unstyled","key":"9usen"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e1epr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".categories-line > div:nth-child(7n+1),","type":"unstyled","key":"51r46"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"c266o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".categories-line > div:nth-child(7n+2), ","type":"unstyled","key":"c920i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6ni4k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".categories-line > div:nth-child(7n+3) { ","type":"unstyled","key":"d6rpl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"aol0k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: calc(33% - 20px); ","type":"unstyled","key":"amrt4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9o4js"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"} ","type":"unstyled","key":"do2hh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6ouh6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это правило само находит нужные элементы и применяет к ним особый стиль.","type":"unstyled","key":"em9sc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5k0nk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все ссылки внутри карточек:","type":"unstyled","key":"cknq2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9t18a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".card a {","type":"unstyled","key":"2g3lr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8imt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" color: #007bff; ","type":"unstyled","key":"8qib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"49su8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" text-decoration: none; ","type":"unstyled","key":"c43sl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a9hfd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"} ","type":"unstyled","key":"9bp9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d5m1j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".card a:hover { ","type":"unstyled","key":"fcrgg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"34jlj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" text-decoration: underline; ","type":"unstyled","key":"babrr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4sj2c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"} ","type":"unstyled","key":"eapne"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b2j36"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Никакой ручной работы: все ссылки внутри .card автоматически получают эти стили, включая будущие.","type":"unstyled","key":"dpmsi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"46rnt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Адаптивность: на мобильных все карточки в одну колонку:","type":"unstyled","key":"4sk5j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"50c0s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@media (max-width: 768px) {","type":"unstyled","key":"1gmj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"erjo8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" .card { ","type":"unstyled","key":"f0gre"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8hoeq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: 100%; ","type":"unstyled","key":"6g9fq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f0t51"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" margin-bottom: 16px; ","type":"unstyled","key":"5bubt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cd4c4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" } ","type":"unstyled","key":"6re6h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eq5d1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"} ","type":"unstyled","key":"45vb2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2fot3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Правило срабатывает автоматически, когда ширина экрана меньше 768 px.","type":"unstyled","key":"n56t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"160ba"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":65,"offset":0,"style":"BOLD"}],"text":"Способ 5: CSS‑фреймворки (готовые автоматические сетки и утилиты)","type":"unstyled","key":"9qdb0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если хочется меньше писать CSS вручную, используют фреймворки вроде Bootstrap, Tailwind, Bulma. Там «автоматика» уже зашита в классы.","type":"unstyled","key":"eu290"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3h9u0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример на Tailwind:","type":"unstyled","key":"880qr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"erdb8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<div class="grid grid-cols-4 gap-4">","type":"unstyled","key":"i3uj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e543t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Карточка 1

","type":"unstyled","key":"e7k2o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"epbd9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Карточка 2

","type":"unstyled","key":"bsucd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4nig5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"el0nc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"emkap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сетка и отступы создаются автоматически через классы.","type":"unstyled","key":"61k8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2e5d8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Плюсы: быстро, предсказуемо, есть готовые адаптивные сетки.","type":"unstyled","key":"15t6j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Минусы: нужно подключать библиотеку, итоговый CSS может быть тяжелее.","type":"unstyled","key":"ahkol"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9nfon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":70,"offset":0,"style":"BOLD"}],"text":"Способ 6: стили через JavaScript (когда логика сложная и динамическая)","type":"unstyled","key":"bjol0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Иногда автоматизация нужна не на этапе загрузки, а в ответ на действия пользователя или данные.","type":"unstyled","key":"11p43"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f87d4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Простой пример:","type":"unstyled","key":"1sle0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5mr4k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const cards = document.querySelectorAll('.card');","type":"unstyled","key":"5q8fl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"424ej"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cards.forEach((card, index) => { ","type":"unstyled","key":"bnjpf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e9qk1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" if (index % 2 === 0) { ","type":"unstyled","key":"4tdj0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fff68"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" card.style.backgroundColor = '#eef'; ","type":"unstyled","key":"6ur8c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ca517"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" } else { ","type":"unstyled","key":"bt4fi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2tpon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" card.style.backgroundColor = '#ffe'; ","type":"unstyled","key":"c16rm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a1jdn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" } ","type":"unstyled","key":"57ngr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4b4p4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}); ","type":"unstyled","key":"9j32b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6bgr8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JS автоматически раскрашивает карточки по чётности.","type":"unstyled","key":"eppuj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3t47r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда это уместно: когда стиль зависит от данных, состояния, AJAX‑загрузки и т. п. Для обычной раскладки лучше использовать CSS.","type":"unstyled","key":"12thl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"afcl9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Способ 7: препроцессоры (Sass/Less) — автоматизация написания CSS","type":"unstyled","key":"4lcmk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Препроцессоры не меняют то, как браузер применяет стили, но сильно ускоряют и упрощают их написание. Например, цикл в Sass:","type":"unstyled","key":"fsrhi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5jlo0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@for $i from 1 through 4 {","type":"unstyled","key":"4llmu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"68vn4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" .item-#{$i} { ","type":"unstyled","key":"1gpk8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8hh1s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: calc(#{$i * 25%} - 20px); ","type":"unstyled","key":"eum9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5u63j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" } ","type":"unstyled","key":"8s2ku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"279if"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"} ","type":"unstyled","key":"fer16"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"febch"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На выходе получится обычный CSS, который браузер применит автоматически.","type":"unstyled","key":"cvmiq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5r1t6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Плюсы: меньше дублирования, удобнее поддерживать.","type":"unstyled","key":"62lqj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Минусы: требует настройки сборки (или онлайн‑конвертера).","type":"unstyled","key":"69ch9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"324h6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что выбрать под разные задачи (с учётом ваших прошлых запросов)","type":"unstyled","key":"9odiu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для сайта на WordPress/Tilda/самописном движке: внешний CSS‑файл + селекторы (.card, :nth-child, медиа‑запросы). Это даёт контроль, адаптивность и простоту поддержки.","type":"unstyled","key":"1pgg7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для быстрого лендинга: встроенные стили (