В этой главе мы будем изучать глобальные стили . Глобальная платформа CSS of Foundation включает в себя полезные перезагрузки, которые обеспечивают согласованность стилей во всех браузерах.
Размер шрифта
Размер шрифта таблицы стилей браузера по умолчанию установлен на 100%. Размер шрифта по умолчанию установлен в 16 пикселей. В зависимости от размера шрифта рассчитывается размер сетки. Чтобы иметь различный базовый размер шрифта и незатронутые точки останова сетки, установите $ rem-base в значение $ global-font-size , которое должно быть в пикселях.
Цвета
Интерактивные элементы, такие как ссылки и кнопки, используют синий оттенок по умолчанию, который получается из переменной SASS $ primary-color . Компоненты также могут иметь такие цвета, как: вторичный, предупреждение, успех и предупреждение . Для получения дополнительной информации проверьте здесь .
SASS Ссылка
переменные
В следующей таблице перечислены переменные SASS, которые используются для настройки стилей компонентов по умолчанию в вашем проекте _settings.scss .
$ глобальной ширины
Он представляет глобальную ширину сайта. Используется для определения ширины строки сетки.
$ глобального размера шрифта
Он представляет размер шрифта, примененного к <html> и <body> . Он установлен на 100% по умолчанию, и значение настроек браузера пользователя будет унаследовано.
$ глобального LineHeight
Он представляет все типы высоты линии по умолчанию. $ global-lineheight равен 24px, а $ global-font-size установлен на 16px.
$ первичного цвета
Он дает цвет интерактивным компонентам, таким как ссылки и кнопки.
$ вторичного цвета
Используется с компонентами, которые поддерживают класс .secondary .
$ успеха цвета
Он представляет положительный статус или действие при использовании с классом .success .
$ предупреждение цвет
Он представляет статус предостережения или действие при использовании с классом .warning .
$ предупреждение цвет
Он представляет отрицательный статус или действие при использовании с классом .alert .
$ светло-серый
Он используется для светло-серых элементов пользовательского интерфейса.
$ средне-серый
Используется для средне-серых элементов пользовательского интерфейса.
$ темно-серый
Используется для темно-серых элементов пользовательского интерфейса.
$ черный
Он используется для черных элементов пользовательского интерфейса.
$ белый
Он используется для белых элементов пользовательского интерфейса.
$ тело фон
Он представляет цвет фона тела.
$ тела цвет шрифта
Он представляет цвет текста тела.
$ тело-семейство шрифтов
Представляет список шрифтов тела.
$ тела сглажены
Сглаженный тип включается, если для этого атрибута задано значение true, используя свойства CSS -webkit-font-smoothing и -moz-osx-font-smoothing .
$ глобальной рентабельность
Он представляет значение глобальной маржи для компонентов.
$ глобального заполнения
Он представляет значение глобального заполнения для компонентов.
$ глобальной рентабельность
Он представляет значение глобальной маржи, используемое между компонентами.
$ глобальный вес нормальный
Он представляет общий вес шрифта для нормального типа.
$ глобального веса полужирный
Он представляет общий вес шрифта для жирного шрифта.
$ глобального радиуса
Он представляет глобальное значение всех элементов, у которых есть радиус границы.
$ глобального текста направления
Устанавливает направление текста CSS на ltr или rtl