scss typography_02.scss
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss typography_02.scss相关的知识,希望对你有一定的参考价值。
:root {
--font-primary: sans-serif;
--font-secondary: serif;
/* set base values */
--text-base-size: 1em;
--text-scale-ratio: 1.2;
/* type scale */
--text-xs: calc(1em / (var(--text-scale-ratio) * var(--text-scale-ratio)));
--text-sm: calc(1em / var(--text-scale-ratio));
--text-md: calc(1em * var(--text-scale-ratio));
--text-lg: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio));
--text-xl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
--text-xxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
--text-xxxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
}
body {
font-size: var(--text-base-size);
font-family: var(--font-primary);
color: var(--color-text);
}
h1, h2, h3, h4, form legend {
color: var(--color-text-heading);
margin-bottom: var(--space-xxs);
line-height: var(--heading-line-height);
}
/* text size */
.text--xxxl {
font-size: var(--text-xxxl);
}
h1, .text--xxl {
font-size: var(--text-xxl);
}
h2, .text--xl {
font-size: var(--text-xl);
}
h3, .text--lg {
font-size: var(--text-lg);
}
h4, .text--md {
font-size: var(--text-md);
}
.text--sm, small {
font-size: var(--text-sm);
}
.text--xs {
font-size: var(--text-xs);
}
p {
line-height: var(--body-line-height);
}
以上是关于scss typography_02.scss的主要内容,如果未能解决你的问题,请参考以下文章
scss typography_09.scss
scss typography_07.scss
scss typography_06.scss
scss typography_05.scss
scss typography_04.scss
scss typography_03.scss