Файл scss/style.scss является основным файлом стилей в стартовом шаблоне «Чертоги Фрилансера» v3.0.0 . (далее ЧФ). Как правило, стили проекта здесь не пишут, файл выполняет роль материнского файла, куда подключаются отдельные файлы страниц, модулей и т.п.
Здесь же подключаются шрифты и основные переменные для настройки семейства и размера шрифта по умолчанию, цветов, адаптивной сетки, корректной работы миксинов и т.д.
Настройка семейства, размера и цвета шрифта по умолчанию
Для того чтобы работать со шрифтами, сначала нужно их подключить. Все действия подробно описаны в данной статье.
После выполнения действий по подключению шрифтов необходимо указать значение для следующих переменных:
$fontFamily – имя семейства шрифт по умолчанию. Указываем имя основного шрифта в проекте.
$fontFamily: "Montserrat";$fontSize – размер шрифта по умолчанию. Это переменное присвоено одной из SCSS-функций шаблона, она выполняет перевод пикселей в REM. Следовательно, в эту функцию следует передать значение размера шрифта по умолчанию в пикселях (только число без px).
$fontSize: rem(14);$mainColor – цвет шрифта по умолчанию. Указываем код цвета.
$mainColor: #000;Настройка адаптивной сетки
У ЧФ есть возможность настроить ограничивающий контейнер на работу как с адаптивной (чуткой) версткой, так и с версткой по брейкпоинтам.
Перед началом работ настраиваем следующие переменные:
$minWidth – минимальная ширина вьюпорта (экрана), поддерживаемая проектом. Обычно это 320px, но с отмиранием старых устройств это значение можно изменять на любое нужное, указываем только число без px:
$minWidth: 320;$maxWidth – ширина всего макета (холста), не путать с шириной ограничивающего контейнера. Как правило, дизайнеры предоставляют макеты шириной 1920 или 1440 точек, но это значение может быть любым. Измеряем макет и указываем только число без px:
$maxWidth: 1920;$maxWidthContainer – ширина ограничивающего контейнера. По сути, это ширина контента в макете дизайна. Измеряем макет и указываем только число без px:
$maxWidthContainer: 1170;Если в макете нет ограничения контента, то есть контент расположен на всю ширину полотна (с отступами), то следует указать значение 0 (ноль):
$maxWidthContainer: 0;$containerPadding – общее отступление (сумма отступов влево и вправо) у ограничивающего контейнера. Указываем только число без px:
$containerPadding: 30;Если отступов нет, или вы хотите использовать адаптивное свойство, следует указать 0 (ноль):
$containerPadding: 0;$containerWidth – ширина срабатывания первого брейкпоинта. По сути, это сумма ширин ограничивающего контейнера и его отступов. Как правило, менять здесь ничего не нужно.
$containerWidth: $maxWidthContainer + $containerPadding;Вышеупомянутые переменные влияют и на функционал чуткого свойства, описанный в отдельной статье
Настройка брейкпоинтов
Сменным брейпоинтам присвоена одна из SCSS-функций шаблона em(), она выполняет перевод пикселей в EM.
$pc – ПК, ноутбуки, некоторые планшеты в горизонтальном положении. Как правило, здесь указывается переменная $containerWidth :
$pc: em($containerWidth);$tablet – планшеты, некоторые телефоны в горизонтальном положении. Обычно значение равно 991.98px:
$tablet: em(991.98);$mobile – большие телефоны. Обычно значение равно 767.98px:
$mobile: em(767.98);$mobileSmall – маленькие телефоны. Обычно значение равно 479.98px:
$mobileSmall: em(479.98);Для быстрого вызова медиа-запроса с требуемым брейкпоинтом можно использовать сниппеты md1, md2, md3, md4. Или для Mobile First, mmd1, mmd2, mmd3, mmd4
Настройка типа адаптива (поведение ограничивающего контейнера)
$responsiveType – настройка типа адаптива (поведение ограничивающего контейнера):
- 1 – отзывчива. У контейнера нет брейкпоинтов, он сужается вместе с браузером.
- 2 – по брейкпоитам. Контейнер изменяет свою ширину по настроенным брейкпоинтам.
$responsiveType: 1;Ниже в файле стилей scss/style.scss указан селектор ограничивающего контейнера и его стили, значения которых во многом состоят из настроенных переменных.
Стили ограничительного контейнера будут применяться к любому элементу, в классе которого есть строка «__container» . Для удобства можно использовать снипет cnt
<div class="block__container">
...
</div>Подключение дополнительных файлов стиле
Файл scss/style.scss уже подключен и можно подключать другие файлы стилей.
Порядок подключения имеет значение!
@use «sass:math»; – включает SASS-модуль математических вычислений. Теперь мы можем использовать разделение с помощью math.div(число, число).
@import “base/mixins”; – подключение миксинов, используемых в ЧФ. Файл scss/base/mixins.scss
@import “base/null”; – подключение обнуления стилей. Файл scss/base/null.scss
@import «base»; – подключение общего файла базовых стилей модулей ЧФ, SASS-шаблонов (заготовок) и вспомогательных классов. Файл scss/base.scss для подключения/выключения конкретных стилей см. scss/base.scss.
@import “common”; – подключение файла стилей общих частей конкретного проекта. Файл scss/common.scss (сначала пуст).
@import «header»; , @import “footer”; – подключение стилей отдельных блоков (сначала scss/header.scss и scss/footer.scss). Вы можете дополнять список подключением файлов
@import «home»; – подключение стилей отдельных страниц (сначала scss/home.scss). Вы можете дополнять список подключением файлов
Селекторы и стили
Сначала в файле стилей scss/style.scss есть ряд SCSS-селекторов:
body {} – стили основного тега <body> часть из которых описана в файле обнуления scss/base/null.scss. Также добавлена подготовка для появления у тега <html> двух классов:
- lock – блокировка скрола. Для этого уже написаны соответствующие CSS-стили
- loaded – сайт загружен. По этому классу мы можем влиять на <body> для отображения контента после полной загрузки данных
. wrapper {} – обертка всего контента на странице. Для нее написаны стили прижатия подвала к низу страницы, важен параметр overflow: hidden; который не даст появиться горизонтальному скролу страницы, а также разрешению проблемы для слайдеров внутри дочерних flex-элементов.