[TOC] > [home])(https://open-props.style/#getting-started) ## 概述 css 引入 ``` <link rel="stylesheet" href="https://unpkg.com/open-props@1.5.8/open-props.min.css"> ``` ## 语法 ### Light & Dark Example ``` html { --text-1: var(--gray-9); --text-2: var(--gray-7); @media (--OSdark) { --text-1: var(--gray-1); --text-2: var(--gray-2); } } ``` ### 颜色 ``` --gray-{0-12} --stone-{0-12} --red-{0-12} --pink-{0-12} --purple-{0-12} --violet-{0-12} --indigo-{0-12} --blue-{0-12} --cyan-{0-12} --teal-{0-12} --green-{0-12} --lime-{0-12} --yellow-{0-12} --orange-{0-12} --choco-{0-12} --brown-{0-12} --sand-{0-12} --camo-{0-12} --jungle-{0-12} ``` ### 背景渐变色 ``` --gradient-{0-30} ``` 如 ``` background: var(--gradient-20); ``` ### 阴影 ``` --shadow-{1-6} --inner-shadow-{0-4} ``` 如 ``` .card { box-shadow: var(--shadow-1); &:hover { box-shadow: var(--shadow-3); } } ``` ### 宽高比 ``` --ratio-square: 1; --ratio-landscape: 4/3; --ratio-portrait: 3/4; --ratio-widescreen: 16/9; --ratio-ultrawide: 18/5; --ratio-golden: 1.6180/1; ``` 如 ``` .video-thumbnail { block-size: 480px; aspect-ratio: var(--ratio-widescreen); } ``` ### 字体 ``` --font-size-{00-8} --font-size-fluid-{0-3} --font-weight-{1-9} --font-letterspacing-{0-7} // 字间距 --font-lineheight-{00-5} //字高 ``` 示例 ``` .hero { line-height: var(--font-lineheight-1); font-size: var(--font-size-fluid-3); font-weight: var(--font-weight-9); font-family: var(--font-sans); } ``` ### 动画 ease ``` --ease-{1-5} --ease-in-{1-5} --ease-out-{1-5} --ease-in-out-{1-5} --ease-elastic-{1-5} --ease-squish-{1-5} --ease-step-{1-5} ``` 如 ``` .slight-ease { animation: fade-in 300ms var(--ease-1); } .dramatic-ease { animation: fade-in 1s var(--ease-5); } ``` Animations ``` --animation-fade-{in,out} --animation-fade-{in,out}-bloom --animation-shake-{x,y} --animation-slide-out-{up,down,left,right} --animation-slide-in-{up,down,left,right} --animation-spin --animation-ping --animation-blink --animation-float --animation-bounce --animation-pulse ``` 如 ``` .loaded { animation: var(--animation-fade-in) forwards; } .actionsheet { animation: var(--animation-slide-out-down) forwards; &.open { animation: var(--animation-slide-in-up) forwards; } } .alert { animation: var(--animation-blink); } ``` ### size ``` --size-{000-15} --size-fluid-{1-10} --size-content-{1-3} --size-header-{1-3} ``` 值 ``` --size-000: -.5rem; --size-00: -.25rem; --size-1: .25rem; --size-2: .5rem; --size-3: 1rem; --size-4: 1.25rem; --size-5: 1.5rem; --size-6: 1.75rem; --size-7: 2rem; --size-8: 3rem; --size-9: 4rem; --size-10: 5rem; --size-11: 7.5rem; --size-12: 10rem; --size-13: 15rem; --size-14: 20rem; --size-15: 30rem; ``` 如 ``` article { display: grid; gap: var(--size-3); } li { padding-inline-start: var(--size-2); } .icon { inline-size: var(--size-5); block-size: var(--size-5); } ``` ### Borders / radius ``` --border-size-{1-5} --radius-{1-6} --radius-round --radius-blob-{1-5} --radius-conditional-{1-6} ``` ### Z Index ``` --layer-{1-5} --layer-important: 2147483647; ``` 如 ``` figure { position: relative; & figcaption { position: absolute; z-index: var(--layer-1); inset-inline: 0; inset-block: auto 0; } } .desperate-measures { position: fixed; z-index: var(--layer-important); } ```