├── env.d.ts ├── public └── favicon.ico ├── .vscode └── extensions.json ├── src ├── App.vue ├── scss │ ├── _mixins.scss │ ├── opacity.scss │ ├── mobile │ │ ├── fontsize.scss │ │ ├── index.scss │ │ ├── layout.scss │ │ ├── rotate.scss │ │ ├── margin.scss │ │ ├── padding.scss │ │ ├── radius.scss │ │ ├── border.scss │ │ ├── position.scss │ │ ├── width.scss │ │ ├── height.scss │ │ ├── typography.scss │ │ └── flex.scss │ ├── uni │ │ ├── fontsize.scss │ │ ├── index.scss │ │ ├── rotate.scss │ │ ├── margin.scss │ │ ├── padding.scss │ │ ├── layout.scss │ │ ├── radius.scss │ │ ├── width.scss │ │ ├── height.scss │ │ ├── shadow.scss │ │ ├── border.scss │ │ ├── position.scss │ │ ├── reboot.scss │ │ ├── flex.scss │ │ └── typography.scss │ ├── index.scss │ ├── lite │ │ ├── index.scss │ │ ├── fontsize.scss │ │ ├── animation.scss │ │ ├── margin.scss │ │ ├── padding.scss │ │ ├── radius.scss │ │ ├── border.scss │ │ ├── width.scss │ │ ├── height.scss │ │ ├── position.scss │ │ └── flex.scss │ ├── image.scss │ ├── fontsize.scss │ ├── mixins │ │ ├── _utils.scss │ │ ├── _rem.scss │ │ └── _media.scss │ ├── rotate.scss │ ├── layout.scss │ ├── margin.scss │ ├── padding.scss │ ├── radius.scss │ ├── border.scss │ ├── reboot.scss │ ├── color.scss │ ├── _variables.scss │ ├── shadow.scss │ ├── width.scss │ ├── height.scss │ ├── position.scss │ ├── typography.scss │ └── flex.scss └── main.ts ├── tsconfig.vitest.json ├── tsconfig.config.json ├── tsconfig.json ├── tsconfig.app.json ├── index.html ├── .gitignore ├── .prettierrc.cjs ├── .eslintrc.cjs ├── packages ├── lib │ ├── opacity.css │ ├── image.css │ ├── layout.css │ ├── reboot.css │ ├── rotate.css │ ├── animation.css │ └── typography.css ├── package.json ├── LICENSE └── README.md ├── LICENSE ├── package.json ├── README.md └── vite.config.ts /env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusui/vusui-css/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 12 | -------------------------------------------------------------------------------- /tsconfig.vitest.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.app.json", 3 | "exclude": [], 4 | "compilerOptions": { 5 | "module": "esnext", 6 | "composite": true, 7 | "lib": [], 8 | "types": ["node", "jsdom"] 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /tsconfig.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.node.json", 3 | "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"], 4 | "compilerOptions": { 5 | "composite": true, 6 | "types": ["node"] 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { 5 | "path": "./tsconfig.config.json" 6 | }, 7 | { 8 | "path": "./tsconfig.app.json" 9 | }, 10 | { 11 | "path": "./tsconfig.vitest.json" 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.web.json", 3 | "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], 4 | "exclude": ["src/**/__tests__/*"], 5 | "compilerOptions": { 6 | "composite": true, 7 | "baseUrl": ".", 8 | "paths": { 9 | "@/*": ["./src/*"] 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: mixins 3 | * @Author: linpan 4 | * @Date: 2022-11-23 09:42:13 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:23:19 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @import "mixins/rem"; 12 | @import "mixins/utils"; 13 | @import "mixins/media"; 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | 4 | // import "./scss/index.scss"; 5 | // import "./scss/mobile/index.scss"; 6 | // import "./scss/lite/index.scss"; 7 | import "./scss/uni/index.scss"; 8 | 9 | // import "@vusui/css/lib/style.css"; 10 | 11 | // import "@vusui/icon/font/index.css"; 12 | 13 | // import "@vusui/icon/svg"; 14 | // import "@vusui/icon/svg/style.css"; 15 | 16 | const app = createApp(App); 17 | 18 | app.mount("#app"); 19 | -------------------------------------------------------------------------------- /.prettierrc.cjs: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: prettier配置 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-08-18 09:50:54 5 | * @LastEditors: linp linp@epsoft.com.cn 6 | * @LastEditTime: 2022-11-22 17:09:57 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | module.exports = { 12 | tabWidth: 2, 13 | // 使用 tab 键 default:false 14 | useTabs: false, 15 | // 语句行末是否添加分号 default:true 16 | semi: true, 17 | // 是否使用单引号 default:false 18 | singleQuote: false, 19 | }; 20 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | require("@rushstack/eslint-patch/modern-module-resolution"); 3 | 4 | module.exports = { 5 | root: true, 6 | env: { 7 | node: true, 8 | browser: true, 9 | es2021: true, 10 | // 开启setup语法糖环境 11 | "vue/setup-compiler-macros": true, 12 | }, 13 | extends: [ 14 | "plugin:vue/vue3-essential", 15 | "eslint:recommended", 16 | "@vue/eslint-config-typescript", 17 | "@vue/eslint-config-prettier", 18 | ], 19 | parserOptions: { 20 | ecmaVersion: "latest", 21 | }, 22 | // 规则设置 23 | rules: {}, 24 | }; 25 | -------------------------------------------------------------------------------- /src/scss/opacity.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 不透明度样式 3 | * @Author: linpan 4 | * @Date: 2022-11-24 18:09:44 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:30:03 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @each $key, 12 | $val 13 | in ( 14 | "0": 0, 15 | "01": 0.1, 16 | "02": 0.2, 17 | "03": 0.3, 18 | "04": 0.4, 19 | "05": 0.5, 20 | "06": 0.6, 21 | "07": 0.7, 22 | "08": 0.8, 23 | "09": 0.9, 24 | "1": 1 25 | ) 26 | { 27 | #{$v}opacity-#{$key} { 28 | opacity: #{$val} !important; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/scss/mobile/fontsize.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 字体大小样式 3 | * @Author: linpan 4 | * @Date: 2022-11-24 18:07:47 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:50:20 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | $numberList: 10 12 13 14 16 18 20 22 24 26 28 30 32 34 36 38 40 42 44 46 48 50 14 | 52 54 56 58 60 62 64 66 68 70 72 74 76 78 80 82 84 86 88 90 92 94 96 98 100; 15 | @for $i from 1 through length($numberList) { 16 | #{$v}fs-#{nth($numberList, $i)} { 17 | font-size: #{math.div(nth($numberList, $i), 16)}rem !important; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/scss/uni/fontsize.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 字体大小样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-24 18:07:47 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-09 08:55:05 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | // @use "sass:math"; 12 | 13 | $numberList: 6 8 10 12 13 14 16 18 20 22 24 26 28 30 32 34 36 38 40 42 44 46 48 14 | 50 52 54 56 58 60 62 64 66 68 70 72 74 76 78 80 82 84 86 88 90 92 94 96 98 100 15 | 0; 16 | @for $i from 1 through length($numberList) { 17 | #{$v}fs-#{nth($numberList, $i)} { 18 | font-size: #{nth($numberList, $i) * 2}rpx !important; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/lib/opacity.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";/*! 2 | * @Description: Vusui-css CSS样式库 3 | * @Author: linpan 4 | * @Date: 2022-11-22 17:39:35 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:28:50 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */.vus-opacity-0{opacity:0!important}.vus-opacity-01{opacity:.1!important}.vus-opacity-02{opacity:.2!important}.vus-opacity-03{opacity:.3!important}.vus-opacity-04{opacity:.4!important}.vus-opacity-05{opacity:.5!important}.vus-opacity-06{opacity:.6!important}.vus-opacity-07{opacity:.7!important}.vus-opacity-08{opacity:.8!important}.vus-opacity-09{opacity:.9!important}.vus-opacity-1{opacity:1!important} 11 | -------------------------------------------------------------------------------- /src/scss/index.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * @Description: Vusui-css CSS样式库 3 | * @Author: linpan 4 | * @Date: 2022-11-22 17:39:35 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:28:50 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @import "variables"; 12 | @import "mixins"; 13 | 14 | // all 15 | @import "reboot"; 16 | @import "layout"; 17 | @import "typography"; 18 | @import "flex"; 19 | @import "color"; 20 | @import "shadow"; 21 | @import "image"; 22 | @import "rotate"; 23 | @import "radius"; 24 | @import "opacity"; 25 | @import "position"; 26 | @import "border"; 27 | @import "width"; 28 | @import "height"; 29 | @import "margin"; 30 | @import "padding"; 31 | @import "fontsize"; 32 | @import "animation"; 33 | -------------------------------------------------------------------------------- /src/scss/uni/index.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * @Description: Vusui-css [uni-app]定制版样式库 3 | * @Author: linpan 4 | * @Date: 2022-11-22 17:39:35 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:32:54 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @import "../variables"; 12 | @import "../mixins"; 13 | 14 | // all 15 | @import "reboot"; 16 | @import "layout"; 17 | @import "typography"; 18 | @import "flex"; 19 | @import "../color"; 20 | @import "shadow"; 21 | @import "../image"; 22 | @import "rotate"; 23 | @import "radius"; 24 | @import "../opacity"; 25 | @import "position"; 26 | @import "border"; 27 | @import "width"; 28 | @import "height"; 29 | @import "margin"; 30 | @import "padding"; 31 | @import "fontsize"; 32 | -------------------------------------------------------------------------------- /packages/lib/image.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";/*! 2 | * @Description: Vusui-css CSS样式库 3 | * @Author: linpan 4 | * @Date: 2022-11-22 17:39:35 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:28:50 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */.vus-img,.vus-img-full{max-width:100%;height:auto;display:block}.vus-img-full{width:100%}.vus-img-wh-full{width:100%;height:100%;display:block}.vus-bg-size,.vus-bg-size-contain,.vus-bg-size-cover,.vus-bg-size-x,.vus-bg-size-y{background-size:100% 100%;background-position:center;background-repeat:no-repeat}.vus-bg-size-x{background-size:100% auto}.vus-bg-size-y{background-size:auto 100%}.vus-bg-size-cover{background-size:cover}.vus-bg-size-contain{background-size:contain} 11 | -------------------------------------------------------------------------------- /src/scss/mobile/index.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * @Description: Vusui-css [移动端]CSS样式库 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-22 17:39:35 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2022-11-25 14:13:53 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @import "../variables"; 12 | @import "../mixins"; 13 | 14 | // all 15 | @import "../reboot"; 16 | @import "layout"; 17 | @import "typography"; 18 | @import "flex"; 19 | @import "../color"; 20 | @import "../shadow"; 21 | @import "../image"; 22 | @import "rotate"; 23 | @import "radius"; 24 | @import "../opacity"; 25 | @import "position"; 26 | @import "border"; 27 | @import "width"; 28 | @import "height"; 29 | @import "margin"; 30 | @import "padding"; 31 | @import "fontsize"; 32 | @import "../animation"; 33 | -------------------------------------------------------------------------------- /src/scss/lite/index.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * @Description: Vusui-css [精简版]CSS样式库 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-22 17:39:35 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2022-11-25 14:13:53 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @import "../variables"; 12 | @import "../mixins"; 13 | 14 | // all 15 | @import "../reboot"; 16 | @import "../layout"; 17 | @import "../typography"; 18 | @import "flex"; 19 | @import "../color"; 20 | @import "../shadow"; 21 | @import "../image"; 22 | @import "../rotate"; 23 | @import "radius"; 24 | @import "../opacity"; 25 | @import "position"; 26 | @import "border"; 27 | @import "width"; 28 | @import "height"; 29 | @import "margin"; 30 | @import "padding"; 31 | @import "fontsize"; 32 | @import "animation"; 33 | -------------------------------------------------------------------------------- /src/scss/uni/rotate.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 旋转样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 15:19:41 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-09 09:17:54 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | $numberList: 45 90 135 180 225 270 315 360; 12 | @for $i from 1 through length($numberList) { 13 | #{$v}rotate-#{nth($numberList, $i)} { 14 | transform: rotate(#{nth($numberList, $i)}deg); 15 | } 16 | #{$v}rotate--#{nth($numberList, $i)} { 17 | transform: rotate(-#{nth($numberList, $i)}deg); 18 | } 19 | } 20 | 21 | #{$v}rotate-0 { 22 | transform: rotate(0); 23 | } 24 | #{$v}rotate-x-0 { 25 | transform: rotateX(0); 26 | } 27 | #{$v}rotate-x-180 { 28 | transform: rotateX(180deg); 29 | } 30 | #{$v}rotate-y-0 { 31 | transform: rotateY(0); 32 | } 33 | #{$v}rotate-y-180 { 34 | transform: rotateY(180deg); 35 | } 36 | -------------------------------------------------------------------------------- /packages/lib/layout.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";/*! 2 | * @Description: Vusui-css CSS样式库 3 | * @Author: linpan 4 | * @Date: 2022-11-22 17:39:35 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:28:50 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */.vus-html-unscrollable,.vus-html-unscrollable body{height:100%;overflow:hidden}.vus-wrapper{width:100%;position:relative;overflow-x:hidden;overflow-y:auto}.vus-container{width:100%;margin:0 auto;padding:0 .625rem;box-sizing:border-box}.vus-mx-auto{margin-left:auto;margin-right:auto}.vus-full,.vus-full-flex{width:100%;display:block}.vus-full-flex{display:flex}@media (min-width: 576px){.vus-container{max-width:540px}}@media (min-width: 768px){.vus-container{max-width:760px}}@media (min-width: 992px){.vus-container{max-width:980px}}@media (min-width: 1200px){.vus-container{max-width:1200px}}@media (min-width: 1920px){.vus-container{max-width:1600px}} 11 | -------------------------------------------------------------------------------- /src/scss/lite/fontsize.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 字体大小样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-24 18:07:47 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:48:30 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | $numberList: 10 12 13 14 16 18 20 22 24 26 28 30 32 34 36 38 40 42 44 46 48 50; 14 | @for $i from 1 through length($numberList) { 15 | #{$v}fs-#{nth($numberList, $i)} { 16 | font-size: #{math.div(nth($numberList, $i), 16)}rem !important; 17 | } 18 | } 19 | 20 | /*------------------------------ 21 | * 媒体设备 22 | *------------------------------ 23 | */ 24 | @each $device, $value in $media-min-width { 25 | @include media-min($device) { 26 | @for $i from 1 through length($numberList) { 27 | #{$v}fs-#{$device}-#{nth($numberList, $i)} { 28 | font-size: #{math.div(nth($numberList, $i), 16)}rem !important; 29 | } 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/scss/image.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 图片样式 3 | * @Author: linpan 4 | * @Date: 2022-11-23 15:30:28 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:28:27 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | #{$v}img, 12 | #{$v}img-full { 13 | max-width: 100%; 14 | height: auto; 15 | display: block; 16 | } 17 | 18 | #{$v}img-full { 19 | width: 100%; 20 | } 21 | 22 | #{$v}img-wh-full { 23 | width: 100%; 24 | height: 100%; 25 | display: block; 26 | } 27 | 28 | #{$v}bg-size, 29 | #{$v}bg-size-contain, 30 | #{$v}bg-size-cover, 31 | #{$v}bg-size-x, 32 | #{$v}bg-size-y { 33 | background-size: 100% 100%; 34 | background-position: center; 35 | background-repeat: no-repeat; 36 | } 37 | 38 | #{$v}bg-size-x { 39 | background-size: 100% auto; 40 | } 41 | 42 | #{$v}bg-size-y { 43 | background-size: auto 100%; 44 | } 45 | 46 | #{$v}bg-size-cover { 47 | background-size: cover; 48 | } 49 | 50 | #{$v}bg-size-contain { 51 | background-size: contain; 52 | } 53 | -------------------------------------------------------------------------------- /packages/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vusui/css", 3 | "version": "7.2.7", 4 | "private": false, 5 | "description": "免除开发者繁复的手写CSS样式。", 6 | "main": "lib/style.css", 7 | "module": "lib/style.css", 8 | "unpkg": "lib/style.css", 9 | "jsdelivr": "lib/style.css", 10 | "cdnjs": "lib/style.css", 11 | "bootcdn": "lib/style.css", 12 | "files": [ 13 | "lib" 14 | ], 15 | "publishConfig": { 16 | "access": "public", 17 | "registry": "https://registry.npmjs.org/" 18 | }, 19 | "keywords": [ 20 | "@vusui/css", 21 | "vusui-css", 22 | "vusui", 23 | "css", 24 | "css3", 25 | "scss", 26 | "css样式库", 27 | "前端", 28 | "自适应", 29 | "响应式", 30 | "uni-app", 31 | "uni", 32 | "app", 33 | "小程序", 34 | "wxss" 35 | ], 36 | "author": "linpan(45650368@qq.com)", 37 | "license": "MIT", 38 | "homepage": "https://vusui.com", 39 | "repository": { 40 | "type": "git", 41 | "url": "git+https://github.com/vusui/vusui-css.git" 42 | }, 43 | "bugs": { 44 | "url": "https://github.com/vusui/vusui-css/issues" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/scss/fontsize.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 字体大小样式 3 | * @Author: linpan 4 | * @Date: 2022-11-24 18:07:47 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:48:12 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | $numberList: 10 12 13 14 16 18 20 22 24 26 28 30 32 34 36 38 40 42 44 46 48 50 14 | 52 54 56 58 60 62 64 66 68 70 72 74 76 78 80 82 84 86 88 90 92 94 96 98 100; 15 | @for $i from 1 through length($numberList) { 16 | #{$v}fs-#{nth($numberList, $i)} { 17 | font-size: #{math.div(nth($numberList, $i), 16)}rem !important; 18 | } 19 | } 20 | 21 | /*------------------------------ 22 | * 媒体设备 23 | *------------------------------ 24 | */ 25 | @each $device, $value in $media-min-width { 26 | @include media-min($device) { 27 | @for $i from 1 through length($numberList) { 28 | #{$v}fs-#{$device}-#{nth($numberList, $i)} { 29 | font-size: #{math.div(nth($numberList, $i), 16)}rem !important; 30 | } 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017-present Vusui 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /packages/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017-present Vusui 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /src/scss/mixins/_utils.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 公共方法 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 09:44:42 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:36:03 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | // 字符截止加省略号 12 | @mixin ellipsis { 13 | overflow: hidden; 14 | white-space: nowrap; 15 | text-overflow: ellipsis; 16 | } 17 | 18 | // 强制换行 19 | @mixin word-wrap { 20 | word-break: break-all; //只对英文起作用，以字母作为换行依据。 21 | word-wrap: break-word; //只对英文起作用，以单词作为换行依据。 22 | } 23 | 24 | // 清除浮动 25 | @mixin clearfix { 26 | &::before, 27 | &::after { 28 | display: table; 29 | content: " "; 30 | } 31 | &::after { 32 | clear: both; 33 | } 34 | } 35 | 36 | // 设置placeholder 37 | @mixin placeholder { 38 | &::-webkit-input-placeholder { 39 | @content; 40 | } 41 | &::-moz-placeholder { 42 | @content; 43 | } 44 | &:-ms-input-placeholder { 45 | @content; 46 | } 47 | &::-ms-input-placeholder { 48 | @content; 49 | } 50 | &::placeholder { 51 | @content; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/scss/lite/animation.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 动画样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 15:39:36 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2022-11-25 15:14:09 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | /*------------------------------ 12 | * Transition 过渡动画时间、类型 13 | *------------------------------ 14 | */ 15 | #{$v}trans { 16 | transition-property: all; 17 | transition-duration: 0.3s; /* 规定慢速开始，然后变快，然后慢速结束的过渡效果 */ 18 | transition-timing-function: ease; 19 | 20 | // 快速 21 | &.fast { 22 | transition-duration: 0.25s; 23 | } 24 | 25 | // 缓慢 26 | &.slow { 27 | transition-duration: 1s; 28 | } 29 | 30 | // 规定以相同速度开始至结束的过渡效果 31 | &.linear { 32 | transition-timing-function: linear; 33 | } 34 | 35 | // 规定以慢速开始的过渡效果 36 | &.ease-in { 37 | transition-timing-function: ease-in; 38 | } 39 | 40 | // 规定以慢速结束的过渡效果 41 | &.ease-out { 42 | transition-timing-function: ease-out; 43 | } 44 | 45 | // 规定以慢速开始和结束的过渡效果 46 | &.ease-in-out { 47 | transition-timing-function: ease-in-out; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vusui-css", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "run-p type-check build-only", 7 | "preview": "vite preview", 8 | "test:unit": "vitest --environment jsdom --root src/", 9 | "build-only": "vite build", 10 | "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false", 11 | "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" 12 | }, 13 | "dependencies": { 14 | "vue": "^3.2.41" 15 | }, 16 | "devDependencies": { 17 | "@rushstack/eslint-patch": "^1.1.4", 18 | "@types/jsdom": "^20.0.0", 19 | "@types/node": "^16.11.68", 20 | "@vitejs/plugin-vue": "^3.1.2", 21 | "@vue/eslint-config-prettier": "^7.0.0", 22 | "@vue/eslint-config-typescript": "^11.0.0", 23 | "@vue/test-utils": "^2.1.0", 24 | "@vue/tsconfig": "^0.1.3", 25 | "eslint": "^8.22.0", 26 | "eslint-plugin-vue": "^9.3.0", 27 | "jsdom": "^20.0.1", 28 | "npm-run-all": "^4.1.5", 29 | "prettier": "^2.7.1", 30 | "sass": "^1.56.1", 31 | "terser": "^5.15.1", 32 | "typescript": "~4.7.4", 33 | "vite": "^3.1.8", 34 | "vitest": "^0.24.3", 35 | "vue-tsc": "^1.0.8" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/scss/uni/margin.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 外补填充(margin) 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 14:55:10 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-09 08:53:07 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | // @use "sass:math"; 12 | 13 | $numberList: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 14 | 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 15 | 80 82 84 85 86 88 90 92 94 95 96 98 100 110 120 130 140 150 160 170 180 190 16 | 200 0; 17 | 18 | @for $i from 1 through length($numberList) { 19 | #{$v}ma-#{nth($numberList, $i)} { 20 | margin: #{nth($numberList, $i) * 2}rpx !important; 21 | } 22 | } 23 | 24 | @for $i from 1 through length($numberList) { 25 | #{$v}ml-#{nth($numberList, $i)} { 26 | margin-left: #{nth($numberList, $i) * 2}rpx !important; 27 | } 28 | #{$v}mt-#{nth($numberList, $i)} { 29 | margin-top: #{nth($numberList, $i) * 2}rpx !important; 30 | } 31 | #{$v}mr-#{nth($numberList, $i)} { 32 | margin-right: #{nth($numberList, $i) * 2}rpx !important; 33 | } 34 | #{$v}mb-#{nth($numberList, $i)} { 35 | margin-bottom: #{nth($numberList, $i) * 2}rpx !important; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/scss/uni/padding.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 内补填充(padding) 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 15:02:14 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-09 08:58:02 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | // @use "sass:math"; 12 | 13 | $numberList: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 14 | 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 15 | 80 82 84 85 86 88 90 92 94 95 96 98 100 110 120 130 140 150 160 170 180 190 16 | 200 0; 17 | 18 | @for $i from 1 through length($numberList) { 19 | #{$v}pa-#{nth($numberList, $i)} { 20 | padding: #{nth($numberList, $i) * 2}rpx !important; 21 | } 22 | } 23 | 24 | @for $i from 1 through length($numberList) { 25 | #{$v}pl-#{nth($numberList, $i)} { 26 | padding-left: #{nth($numberList, $i) * 2}rpx !important; 27 | } 28 | #{$v}pt-#{nth($numberList, $i)} { 29 | padding-top: #{nth($numberList, $i) * 2}rpx !important; 30 | } 31 | #{$v}pr-#{nth($numberList, $i)} { 32 | padding-right: #{nth($numberList, $i) * 2}rpx !important; 33 | } 34 | #{$v}pb-#{nth($numberList, $i)} { 35 | padding-bottom: #{nth($numberList, $i) * 2}rpx !important; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/scss/uni/layout.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 布局样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 09:25:39 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-09 09:22:38 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | 12 | /*------------------------------ 13 | * 禁止页面滚动 14 | *------------------------------ 15 | */ 16 | #{$v}html-unscrollable, 17 | #{$v}html-unscrollable body { 18 | height: 100%; 19 | overflow: hidden; 20 | } 21 | 22 | /*------------------------------ 23 | * 布局包装 24 | *------------------------------ 25 | */ 26 | #{$v}wrapper { 27 | width: 100%; 28 | position: relative; 29 | overflow-x: hidden; 30 | overflow-y: auto; 31 | } 32 | 33 | /*------------------------------ 34 | * 布局容器 35 | *------------------------------ 36 | */ 37 | #{$v}container { 38 | width: 100%; 39 | margin: 0 auto; 40 | padding: 0 20rpx; 41 | } 42 | 43 | /*------------------------------ 44 | * 元素水平居中 45 | *------------------------------ 46 | */ 47 | #{$v}mx-auto { 48 | margin-left: auto; 49 | margin-right: auto; 50 | } 51 | 52 | /*------------------------------ 53 | * 元素全屏 54 | *------------------------------ 55 | */ 56 | #{$v}full, 57 | #{$v}full-flex { 58 | width: 100%; 59 | display: block; 60 | } 61 | #{$v}full-flex { 62 | display: flex; 63 | } 64 | -------------------------------------------------------------------------------- /src/scss/mobile/layout.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 布局样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 09:25:39 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-08-23 21:02:24 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | 12 | /*------------------------------ 13 | * 禁止页面滚动 14 | *------------------------------ 15 | */ 16 | #{$v}html-unscrollable, 17 | #{$v}html-unscrollable body { 18 | height: 100%; 19 | overflow: hidden; 20 | } 21 | 22 | /*------------------------------ 23 | * 布局包装 24 | *------------------------------ 25 | */ 26 | #{$v}wrapper { 27 | width: 100%; 28 | position: relative; 29 | overflow-x: hidden; 30 | overflow-y: auto; 31 | } 32 | 33 | /*------------------------------ 34 | * 布局容器 35 | *------------------------------ 36 | */ 37 | #{$v}container { 38 | width: 100%; 39 | margin: 0 auto; 40 | padding: 0 0.625rem; 41 | } 42 | 43 | /*------------------------------ 44 | * 元素水平居中 45 | *------------------------------ 46 | */ 47 | #{$v}mx-auto { 48 | margin-left: auto; 49 | margin-right: auto; 50 | } 51 | 52 | /*------------------------------ 53 | * 元素全屏 54 | *------------------------------ 55 | */ 56 | #{$v}full, 57 | #{$v}full-flex { 58 | width: 100%; 59 | display: block; 60 | } 61 | #{$v}full-flex { 62 | display: flex; 63 | } 64 | -------------------------------------------------------------------------------- /src/scss/rotate.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 旋转样式 3 | * @Author: linpan 4 | * @Date: 2022-11-23 15:19:41 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:31:38 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | $numberList: 45 90 135 180 225 270 315 360; 12 | 13 | @for $i from 1 through length($numberList) { 14 | #{$v}rotate-#{nth($numberList, $i)} { 15 | transform: rotate(#{nth($numberList, $i)}deg); 16 | } 17 | #{$v}rotate--#{nth($numberList, $i)} { 18 | transform: rotate(-#{nth($numberList, $i)}deg); 19 | } 20 | } 21 | 22 | // 媒体设备 23 | @each $device, $value in $media-min-width { 24 | @include media-min($device) { 25 | @for $i from 1 through length($numberList) { 26 | #{$v}rotate-#{$device}-#{nth($numberList, $i)} { 27 | transform: rotate(#{nth($numberList, $i)}deg); 28 | } 29 | #{$v}rotate-#{$device}--#{nth($numberList, $i)} { 30 | transform: rotate(-#{nth($numberList, $i)}deg); 31 | } 32 | } 33 | } 34 | } 35 | 36 | #{$v}rotate-0 { 37 | transform: rotate(0); 38 | } 39 | #{$v}rotate-x-0 { 40 | transform: rotateX(0); 41 | } 42 | #{$v}rotate-x-180 { 43 | transform: rotateX(180deg); 44 | } 45 | #{$v}rotate-y-0 { 46 | transform: rotateY(0); 47 | } 48 | #{$v}rotate-y-180 { 49 | transform: rotateY(180deg); 50 | } 51 | -------------------------------------------------------------------------------- /src/scss/mobile/rotate.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 旋转样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 15:19:41 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2022-11-25 15:11:43 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | $numberList: 45 90 135 180 225 270 315 360; 12 | @for $i from 1 through length($numberList) { 13 | #{$v}rotate-#{nth($numberList, $i)} { 14 | transform: rotate(#{nth($numberList, $i)}deg); 15 | } 16 | #{$v}rotate--#{nth($numberList, $i)} { 17 | transform: rotate(-#{nth($numberList, $i)}deg); 18 | } 19 | } 20 | 21 | // // 媒体设备 22 | // @each $device, $value in $media-min-width { 23 | // @include media-min($device) { 24 | // @for $i from 1 through length($numberList) { 25 | // #{$v}rotate-#{$device}-#{nth($numberList, $i)} { 26 | // transform: rotate(#{nth($numberList, $i)}deg); 27 | // } 28 | // #{$v}rotate-#{$device}--#{nth($numberList, $i)} { 29 | // transform: rotate(-#{nth($numberList, $i)}deg); 30 | // } 31 | // } 32 | // } 33 | // } 34 | 35 | #{$v}rotate-0 { 36 | transform: rotate(0); 37 | } 38 | #{$v}rotate-x-0 { 39 | transform: rotateX(0); 40 | } 41 | #{$v}rotate-x-180 { 42 | transform: rotateX(180deg); 43 | } 44 | #{$v}rotate-y-0 { 45 | transform: rotateY(0); 46 | } 47 | #{$v}rotate-y-180 { 48 | transform: rotateY(180deg); 49 | } 50 | -------------------------------------------------------------------------------- /src/scss/uni/radius.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 圆角半径样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 15:08:35 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-09 08:59:42 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | // @use "sass:math"; 12 | 13 | @for $i from 0 through 20 { 14 | #{$v}radius-#{$i} { 15 | border-radius: #{$i * 2}rpx; 16 | } 17 | } 18 | 19 | @for $i from 0 through 20 { 20 | #{$v}radius-tl-#{$i} { 21 | border-top-left-radius: #{$i * 2}rpx; 22 | } 23 | #{$v}radius-tr-#{$i} { 24 | border-top-right-radius: #{$i * 2}rpx; 25 | } 26 | #{$v}radius-bl-#{$i} { 27 | border-bottom-left-radius: #{$i * 2}rpx; 28 | } 29 | #{$v}radius-br-#{$i} { 30 | border-bottom-right-radius: #{$i * 2}rpx; 31 | } 32 | } 33 | 34 | #{$v}radius-circle { 35 | border-radius: 50%; 36 | } 37 | #{$v}radius-large { 38 | border-radius: 4000rpx; 39 | } 40 | #{$v}radius-tl-circle { 41 | border-top-left-radius: 50%; 42 | } 43 | #{$v}radius-tl-large { 44 | border-top-left-radius: 4000rpx; 45 | } 46 | #{$v}radius-tr-circle { 47 | border-top-right-radius: 50%; 48 | } 49 | #{$v}radius-tr-large { 50 | border-top-right-radius: 4000rpx; 51 | } 52 | #{$v}radius-bl-circle { 53 | border-bottom-left-radius: 50%; 54 | } 55 | #{$v}radius-bl-large { 56 | border-bottom-left-radius: 4000rpx; 57 | } 58 | #{$v}radius-br-circle { 59 | border-bottom-right-radius: 50%; 60 | } 61 | #{$v}radius-br-large { 62 | border-bottom-right-radius: 4000rpx; 63 | } 64 | -------------------------------------------------------------------------------- /packages/lib/reboot.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";/*! 2 | * @Description: Vusui-css CSS样式库 3 | * @Author: linpan 4 | * @Date: 2022-11-22 17:39:35 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:28:50 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */*,:after,:before{margin:0;padding:0;box-sizing:border-box}a{color:#515355;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover,a:active{color:inherit;outline:0;text-decoration:none}a[href]{cursor:pointer}a[href]:hover{color:#409eff}a[href].underline:hover{text-decoration:underline}div,article,aside,details,dialog,figcaption,figure,footer,header,hgroup,menu,main,nav,section,summary{display:block}b,strong{font-weight:700}audio,canvas,output,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}:focus{outline:0}[v-cloak]{display:none!important}ol,ul{list-style:none}hr{height:0;overflow:visible}i,em,dfn{font-style:normal}table{border-collapse:collapse;border-spacing:0}caption,table,tbody,td,tfoot,th,thead,tr{font-family:inherit;font-size:100%}button:after{border:none}button,input,optgroup,select,textarea{line-height:1.15;font-family:inherit;font-size:100%}button{appearance:none;border-style:none;outline:0}textarea{overflow:auto;vertical-align:top;resize:vertical}img{max-width:100%;display:block;position:relative;border-style:none;will-change:transform}svg:not(:root){overflow:hidden}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%}body{text-align:left;color:#515355;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Microsoft YaHei,\5fae\8f6f\96c5\9ed1,FreeSans,Droid Sans,wenquanyi micro hei,PingFang SC,Hiragino Sans GB,Hiragino Sans GB W3,Arial,sans-serif;font-size:.875rem;font-weight:400;line-height:1.5;background-color:#fff} 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vusui-css 样式库 2 | 3 | 免除开发者繁复的手写 CSS 样式。 4 | 5 | 【[使用文档](https://www.vusui.com/css)】 6 | 7 | ## 使用包管理器 8 | 9 | ```sh 10 | # 选择一个你喜欢的包管理器 11 | 12 | # yarn 13 | $ yarn add @vusui/css 14 | 15 | # npm 16 | $ npm install @vusui/css --save 17 | 18 | # pnpm 19 | $ pnpm install @vusui/css 20 | ``` 21 | 22 | ## 全局使用 23 | 24 | ```ts 25 | // main.ts 26 | import { createApp } from "vue"; 27 | 28 | // 全部样式 29 | import "@vusui/css/lib/style.css"; 30 | 31 | // 移动端(H5)专用样式(无自适应) 32 | import "@vusui/css/lib/mobile.css"; 33 | 34 | // 精简版样式 35 | import "@vusui/css/lib/lite.css"; 36 | 37 | // uni-app、小程序版样式 38 | import "@vusui/css/lib/uni.css"; 39 | 40 | // 指定样式 41 | import "@vusui/css/lib/margin.css"; 42 | 43 | const app = createApp({}); 44 | app.mount("#app"); 45 | ``` 46 | 47 | ## 浏览器直接引入 48 | 49 | 直接通过浏览器的 HTML 标签导入 vusui-css，然后就可以使用 Vusui-css 样式库了。 50 | 51 | 根据不同的 CDN 提供商有不同的引入方式， 我们在这里以 [unpkg](https://unpkg.com/) 和 [jsDelivr](https://www.jsdelivr.com/) 举例。 52 | 53 | ### unpkg 54 | 55 | ```html 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | ``` 67 | 68 | ### jsDelivr 69 | 70 | ```html 71 | 72 | 73 | 77 | 78 | 82 | 83 | 87 | 88 | 92 | 93 | ``` 94 | -------------------------------------------------------------------------------- /packages/README.md: -------------------------------------------------------------------------------- 1 | # Vusui-css 样式库 2 | 3 | 免除开发者繁复的手写 CSS 样式。 4 | 5 | 【[使用文档](https://www.vusui.com/css)】 6 | 7 | ## 使用包管理器 8 | 9 | ```sh 10 | # 选择一个你喜欢的包管理器 11 | 12 | # yarn 13 | $ yarn add @vusui/css 14 | 15 | # npm 16 | $ npm install @vusui/css --save 17 | 18 | # pnpm 19 | $ pnpm install @vusui/css 20 | ``` 21 | 22 | ## 全局使用 23 | 24 | ```ts 25 | // main.ts 26 | import { createApp } from "vue"; 27 | 28 | // 全部样式 29 | import "@vusui/css/lib/style.css"; 30 | 31 | // 移动端(H5)专用样式(无自适应) 32 | import "@vusui/css/lib/mobile.css"; 33 | 34 | // 精简版样式 35 | import "@vusui/css/lib/lite.css"; 36 | 37 | // uni-app、小程序版样式 38 | import "@vusui/css/lib/uni.css"; 39 | 40 | // 指定样式 41 | import "@vusui/css/lib/margin.css"; 42 | 43 | const app = createApp({}); 44 | app.mount("#app"); 45 | ``` 46 | 47 | ## 浏览器直接引入 48 | 49 | 直接通过浏览器的 HTML 标签导入 vusui-css，然后就可以使用 Vusui-css 样式库了。 50 | 51 | 根据不同的 CDN 提供商有不同的引入方式， 我们在这里以 [unpkg](https://unpkg.com/) 和 [jsDelivr](https://www.jsdelivr.com/) 举例。 52 | 53 | ### unpkg 54 | 55 | ```html 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | ``` 67 | 68 | ### jsDelivr 69 | 70 | ```html 71 | 72 | 73 | 77 | 78 | 82 | 83 | 87 | 88 | 92 | 93 | ``` 94 | -------------------------------------------------------------------------------- /src/scss/layout.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 布局样式 3 | * @Author: linpan 4 | * @Date: 2022-11-23 09:25:39 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-08-23 20:58:09 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | /*------------------------------ 12 | * 禁止页面滚动 13 | *------------------------------ 14 | */ 15 | #{$v}html-unscrollable, 16 | #{$v}html-unscrollable body { 17 | height: 100%; 18 | overflow: hidden; 19 | } 20 | 21 | /*------------------------------ 22 | * 布局包装 23 | *------------------------------ 24 | */ 25 | #{$v}wrapper { 26 | width: 100%; 27 | position: relative; 28 | overflow-x: hidden; 29 | overflow-y: auto; 30 | } 31 | 32 | /*------------------------------ 33 | * 布局容器 34 | *------------------------------ 35 | */ 36 | #{$v}container { 37 | width: 100%; 38 | margin: 0 auto; 39 | padding: 0 0.625rem; 40 | box-sizing: border-box; 41 | } 42 | 43 | /*------------------------------ 44 | * 元素水平居中 45 | *------------------------------ 46 | */ 47 | #{$v}mx-auto { 48 | margin-left: auto; 49 | margin-right: auto; 50 | } 51 | 52 | /*------------------------------ 53 | * 元素全屏 54 | *------------------------------ 55 | */ 56 | #{$v}full, 57 | #{$v}full-flex { 58 | width: 100%; 59 | display: block; 60 | } 61 | #{$v}full-flex { 62 | display: flex; 63 | } 64 | 65 | /*------------------------------ 66 | * 媒体设备 67 | *------------------------------ 68 | */ 69 | @each $device, $value in $media-min-width { 70 | @include media-min($device) { 71 | @if $device == $xs { 72 | #{$v}container { 73 | max-width: 540px; 74 | } 75 | } @else if $device == $sm { 76 | #{$v}container { 77 | max-width: 760px; 78 | } 79 | } @else if $device == $md { 80 | #{$v}container { 81 | max-width: 980px; 82 | } 83 | } @else if $device == $lg { 84 | #{$v}container { 85 | max-width: 1200px; 86 | } 87 | } @else if $device == $xl { 88 | #{$v}container { 89 | max-width: 1600px; 90 | } 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /src/scss/lite/margin.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 外补填充(margin) 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 14:55:10 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:37:17 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | $numberList: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 14 | 36 38 40 42 44 45 46 48 50 0; 15 | 16 | @for $i from 1 through length($numberList) { 17 | #{$v}ma-#{nth($numberList, $i)} { 18 | margin: #{math.div(nth($numberList, $i), 16)}rem !important; 19 | } 20 | } 21 | 22 | @for $i from 1 through length($numberList) { 23 | #{$v}ml-#{nth($numberList, $i)} { 24 | margin-left: #{math.div(nth($numberList, $i), 16)}rem !important; 25 | } 26 | #{$v}mt-#{nth($numberList, $i)} { 27 | margin-top: #{math.div(nth($numberList, $i), 16)}rem !important; 28 | } 29 | #{$v}mr-#{nth($numberList, $i)} { 30 | margin-right: #{math.div(nth($numberList, $i), 16)}rem !important; 31 | } 32 | #{$v}mb-#{nth($numberList, $i)} { 33 | margin-bottom: #{math.div(nth($numberList, $i), 16)}rem !important; 34 | } 35 | } 36 | 37 | // 媒体设备 38 | @each $device, $value in $media-min-width { 39 | @include media-min($device) { 40 | @for $i from 1 through length($numberList) { 41 | #{$v}ma-#{$device}-#{nth($numberList, $i)} { 42 | margin: #{math.div(nth($numberList, $i), 16)}rem !important; 43 | } 44 | } 45 | 46 | @for $i from 1 through length($numberList) { 47 | #{$v}ml-#{$device}-#{nth($numberList, $i)} { 48 | margin-left: #{math.div(nth($numberList, $i), 16)}rem !important; 49 | } 50 | #{$v}mt-#{$device}-#{nth($numberList, $i)} { 51 | margin-top: #{math.div(nth($numberList, $i), 16)}rem !important; 52 | } 53 | #{$v}mr-#{$device}-#{nth($numberList, $i)} { 54 | margin-right: #{math.div(nth($numberList, $i), 16)}rem !important; 55 | } 56 | #{$v}mb-#{$device}-#{nth($numberList, $i)} { 57 | margin-bottom: #{math.div(nth($numberList, $i), 16)}rem !important; 58 | } 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/scss/lite/padding.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 内补填充(padding) 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 15:02:14 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:37:22 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | $numberList: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 14 | 36 38 40 42 44 45 46 48 50 0; 15 | 16 | @for $i from 1 through length($numberList) { 17 | #{$v}pa-#{nth($numberList, $i)} { 18 | padding: #{math.div(nth($numberList, $i), 16)}rem !important; 19 | } 20 | } 21 | 22 | @for $i from 1 through length($numberList) { 23 | #{$v}pl-#{nth($numberList, $i)} { 24 | padding-left: #{math.div(nth($numberList, $i), 16)}rem !important; 25 | } 26 | #{$v}pt-#{nth($numberList, $i)} { 27 | padding-top: #{math.div(nth($numberList, $i), 16)}rem !important; 28 | } 29 | #{$v}pr-#{nth($numberList, $i)} { 30 | padding-right: #{math.div(nth($numberList, $i), 16)}rem !important; 31 | } 32 | #{$v}pb-#{nth($numberList, $i)} { 33 | padding-bottom: #{math.div(nth($numberList, $i), 16)}rem !important; 34 | } 35 | } 36 | 37 | // 媒体设备 38 | @each $device, $value in $media-min-width { 39 | @include media-min($device) { 40 | @for $i from 1 through length($numberList) { 41 | #{$v}pa-#{$device}-#{nth($numberList, $i)} { 42 | padding: #{math.div(nth($numberList, $i), 16)}rem !important; 43 | } 44 | } 45 | 46 | @for $i from 1 through length($numberList) { 47 | #{$v}pl-#{$device}-#{nth($numberList, $i)} { 48 | padding-left: #{math.div(nth($numberList, $i), 16)}rem !important; 49 | } 50 | #{$v}pt-#{$device}-#{nth($numberList, $i)} { 51 | padding-top: #{math.div(nth($numberList, $i), 16)}rem !important; 52 | } 53 | #{$v}pr-#{$device}-#{nth($numberList, $i)} { 54 | padding-right: #{math.div(nth($numberList, $i), 16)}rem !important; 55 | } 56 | #{$v}pb-#{$device}-#{nth($numberList, $i)} { 57 | padding-bottom: #{math.div(nth($numberList, $i), 16)}rem !important; 58 | } 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/scss/margin.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 外补填充(margin) 3 | * @Author: linpan 4 | * @Date: 2022-11-23 14:55:10 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:29:47 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | $numberList: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 14 | 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 15 | 80 82 84 85 86 88 90 92 94 95 96 98 100 110 120 130 140 150 160 170 180 190 16 | 200 0; 17 | 18 | @for $i from 1 through length($numberList) { 19 | #{$v}ma-#{nth($numberList, $i)} { 20 | margin: #{math.div(nth($numberList, $i), 16)}rem !important; 21 | } 22 | } 23 | 24 | @for $i from 1 through length($numberList) { 25 | #{$v}ml-#{nth($numberList, $i)} { 26 | margin-left: #{math.div(nth($numberList, $i), 16)}rem !important; 27 | } 28 | #{$v}mt-#{nth($numberList, $i)} { 29 | margin-top: #{math.div(nth($numberList, $i), 16)}rem !important; 30 | } 31 | #{$v}mr-#{nth($numberList, $i)} { 32 | margin-right: #{math.div(nth($numberList, $i), 16)}rem !important; 33 | } 34 | #{$v}mb-#{nth($numberList, $i)} { 35 | margin-bottom: #{math.div(nth($numberList, $i), 16)}rem !important; 36 | } 37 | } 38 | 39 | // 媒体设备 40 | @each $device, $value in $media-min-width { 41 | @include media-min($device) { 42 | @for $i from 1 through length($numberList) { 43 | #{$v}ma-#{$device}-#{nth($numberList, $i)} { 44 | margin: #{math.div(nth($numberList, $i), 16)}rem !important; 45 | } 46 | } 47 | 48 | @for $i from 1 through length($numberList) { 49 | #{$v}ml-#{$device}-#{nth($numberList, $i)} { 50 | margin-left: #{math.div(nth($numberList, $i), 16)}rem !important; 51 | } 52 | #{$v}mt-#{$device}-#{nth($numberList, $i)} { 53 | margin-top: #{math.div(nth($numberList, $i), 16)}rem !important; 54 | } 55 | #{$v}mr-#{$device}-#{nth($numberList, $i)} { 56 | margin-right: #{math.div(nth($numberList, $i), 16)}rem !important; 57 | } 58 | #{$v}mb-#{$device}-#{nth($numberList, $i)} { 59 | margin-bottom: #{math.div(nth($numberList, $i), 16)}rem !important; 60 | } 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/scss/padding.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 内补填充(padding) 3 | * @Author: linpan 4 | * @Date: 2022-11-23 15:02:14 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:30:23 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | $numberList: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 14 | 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 15 | 80 82 84 85 86 88 90 92 94 95 96 98 100 110 120 130 140 150 160 170 180 190 16 | 200 0; 17 | 18 | @for $i from 1 through length($numberList) { 19 | #{$v}pa-#{nth($numberList, $i)} { 20 | padding: #{math.div(nth($numberList, $i), 16)}rem !important; 21 | } 22 | } 23 | 24 | @for $i from 1 through length($numberList) { 25 | #{$v}pl-#{nth($numberList, $i)} { 26 | padding-left: #{math.div(nth($numberList, $i), 16)}rem !important; 27 | } 28 | #{$v}pt-#{nth($numberList, $i)} { 29 | padding-top: #{math.div(nth($numberList, $i), 16)}rem !important; 30 | } 31 | #{$v}pr-#{nth($numberList, $i)} { 32 | padding-right: #{math.div(nth($numberList, $i), 16)}rem !important; 33 | } 34 | #{$v}pb-#{nth($numberList, $i)} { 35 | padding-bottom: #{math.div(nth($numberList, $i), 16)}rem !important; 36 | } 37 | } 38 | 39 | // 媒体设备 40 | @each $device, $value in $media-min-width { 41 | @include media-min($device) { 42 | @for $i from 1 through length($numberList) { 43 | #{$v}pa-#{$device}-#{nth($numberList, $i)} { 44 | padding: #{math.div(nth($numberList, $i), 16)}rem !important; 45 | } 46 | } 47 | 48 | @for $i from 1 through length($numberList) { 49 | #{$v}pl-#{$device}-#{nth($numberList, $i)} { 50 | padding-left: #{math.div(nth($numberList, $i), 16)}rem !important; 51 | } 52 | #{$v}pt-#{$device}-#{nth($numberList, $i)} { 53 | padding-top: #{math.div(nth($numberList, $i), 16)}rem !important; 54 | } 55 | #{$v}pr-#{$device}-#{nth($numberList, $i)} { 56 | padding-right: #{math.div(nth($numberList, $i), 16)}rem !important; 57 | } 58 | #{$v}pb-#{$device}-#{nth($numberList, $i)} { 59 | padding-bottom: #{math.div(nth($numberList, $i), 16)}rem !important; 60 | } 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/scss/mobile/margin.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 外补填充(margin) 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 14:55:10 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2022-11-25 15:11:04 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | $numberList: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 14 | 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 15 | 80 82 84 85 86 88 90 92 94 95 96 98 100 110 120 130 140 150 160 170 180 190 16 | 200 0; 17 | 18 | @for $i from 1 through length($numberList) { 19 | #{$v}ma-#{nth($numberList, $i)} { 20 | margin: #{math.div(nth($numberList, $i), 16)}rem !important; 21 | } 22 | } 23 | 24 | @for $i from 1 through length($numberList) { 25 | #{$v}ml-#{nth($numberList, $i)} { 26 | margin-left: #{math.div(nth($numberList, $i), 16)}rem !important; 27 | } 28 | #{$v}mt-#{nth($numberList, $i)} { 29 | margin-top: #{math.div(nth($numberList, $i), 16)}rem !important; 30 | } 31 | #{$v}mr-#{nth($numberList, $i)} { 32 | margin-right: #{math.div(nth($numberList, $i), 16)}rem !important; 33 | } 34 | #{$v}mb-#{nth($numberList, $i)} { 35 | margin-bottom: #{math.div(nth($numberList, $i), 16)}rem !important; 36 | } 37 | } 38 | 39 | // // 媒体设备 40 | // @each $device, $value in $media-min-width { 41 | // @include media-min($device) { 42 | // @for $i from 1 through length($numberList) { 43 | // #{$v}ma-#{$device}-#{nth($numberList, $i)} { 44 | // margin: #{math.div(nth($numberList, $i), 16)}rem; 45 | // } 46 | // } 47 | 48 | // @for $i from 1 through length($numberList) { 49 | // #{$v}ml-#{$device}-#{nth($numberList, $i)} { 50 | // margin-left: #{math.div(nth($numberList, $i), 16)}rem; 51 | // } 52 | // #{$v}mt-#{$device}-#{nth($numberList, $i)} { 53 | // margin-top: #{math.div(nth($numberList, $i), 16)}rem; 54 | // } 55 | // #{$v}mr-#{$device}-#{nth($numberList, $i)} { 56 | // margin-right: #{math.div(nth($numberList, $i), 16)}rem; 57 | // } 58 | // #{$v}mb-#{$device}-#{nth($numberList, $i)} { 59 | // margin-bottom: #{math.div(nth($numberList, $i), 16)}rem; 60 | // } 61 | // } 62 | // } 63 | // } 64 | -------------------------------------------------------------------------------- /src/scss/mobile/padding.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 内补填充(padding) 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 15:02:14 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-04-06 10:18:23 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | $numberList: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 14 | 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 15 | 80 82 84 85 86 88 90 92 94 95 96 98 100 110 120 130 140 150 160 170 180 190 16 | 200 0; 17 | 18 | @for $i from 1 through length($numberList) { 19 | #{$v}pa-#{nth($numberList, $i)} { 20 | padding: #{math.div(nth($numberList, $i), 16)}rem !important; 21 | } 22 | } 23 | 24 | @for $i from 1 through length($numberList) { 25 | #{$v}pl-#{nth($numberList, $i)} { 26 | padding-left: #{math.div(nth($numberList, $i), 16)}rem !important; 27 | } 28 | #{$v}pt-#{nth($numberList, $i)} { 29 | padding-top: #{math.div(nth($numberList, $i), 16)}rem !important; 30 | } 31 | #{$v}pr-#{nth($numberList, $i)} { 32 | padding-right: #{math.div(nth($numberList, $i), 16)}rem !important; 33 | } 34 | #{$v}pb-#{nth($numberList, $i)} { 35 | padding-bottom: #{math.div(nth($numberList, $i), 16)}rem !important; 36 | } 37 | } 38 | 39 | // // 媒体设备 40 | // @each $device, $value in $media-min-width { 41 | // @include media-min($device) { 42 | // @for $i from 1 through length($numberList) { 43 | // #{$v}pa-#{$device}-#{nth($numberList, $i)} { 44 | // padding: #{math.div(nth($numberList, $i), 16)}rem; 45 | // } 46 | // } 47 | 48 | // @for $i from 1 through length($numberList) { 49 | // #{$v}pl-#{$device}-#{nth($numberList, $i)} { 50 | // padding-left: #{math.div(nth($numberList, $i), 16)}rem; 51 | // } 52 | // #{$v}pt-#{$device}-#{nth($numberList, $i)} { 53 | // padding-top: #{math.div(nth($numberList, $i), 16)}rem; 54 | // } 55 | // #{$v}pr-#{$device}-#{nth($numberList, $i)} { 56 | // padding-right: #{math.div(nth($numberList, $i), 16)}rem; 57 | // } 58 | // #{$v}pb-#{$device}-#{nth($numberList, $i)} { 59 | // padding-bottom: #{math.div(nth($numberList, $i), 16)}rem; 60 | // } 61 | // } 62 | // } 63 | // } 64 | -------------------------------------------------------------------------------- /src/scss/radius.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 圆角半径样式 3 | * @Author: linpan 4 | * @Date: 2022-11-23 15:08:35 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:30:56 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | @for $i from 0 through 20 { 14 | #{$v}radius-#{$i} { 15 | border-radius: #{math.div($i, 16)}rem; 16 | } 17 | } 18 | 19 | @for $i from 0 through 20 { 20 | #{$v}radius-tl-#{$i} { 21 | border-top-left-radius: #{math.div($i, 16)}rem; 22 | } 23 | #{$v}radius-tr-#{$i} { 24 | border-top-right-radius: #{math.div($i, 16)}rem; 25 | } 26 | #{$v}radius-bl-#{$i} { 27 | border-bottom-left-radius: #{math.div($i, 16)}rem; 28 | } 29 | #{$v}radius-br-#{$i} { 30 | border-bottom-right-radius: #{math.div($i, 16)}rem; 31 | } 32 | } 33 | 34 | // 媒体设备 35 | @each $device, $value in $media-min-width { 36 | @include media-min($device) { 37 | @for $i from 0 through 20 { 38 | #{$v}radius-#{$device}-#{$i} { 39 | border-radius: #{math.div($i, 16)}rem; 40 | } 41 | } 42 | 43 | @for $i from 0 through 20 { 44 | #{$v}radius-tl-#{$device}-#{$i} { 45 | border-top-left-radius: #{math.div($i, 16)}rem; 46 | } 47 | #{$v}radius-tr-#{$device}-#{$i} { 48 | border-top-right-radius: #{math.div($i, 16)}rem; 49 | } 50 | #{$v}radius-bl-#{$device}-#{$i} { 51 | border-bottom-left-radius: #{math.div($i, 16)}rem; 52 | } 53 | #{$v}radius-br-#{$device}-#{$i} { 54 | border-bottom-right-radius: #{math.div($i, 16)}rem; 55 | } 56 | } 57 | } 58 | } 59 | 60 | #{$v}radius-circle { 61 | border-radius: 50%; 62 | } 63 | #{$v}radius-large { 64 | border-radius: 125rem; 65 | } 66 | #{$v}radius-tl-circle { 67 | border-top-left-radius: 50%; 68 | } 69 | #{$v}radius-tl-large { 70 | border-top-left-radius: 125rem; 71 | } 72 | #{$v}radius-tr-circle { 73 | border-top-right-radius: 50%; 74 | } 75 | #{$v}radius-tr-large { 76 | border-top-right-radius: 125rem; 77 | } 78 | #{$v}radius-bl-circle { 79 | border-bottom-left-radius: 50%; 80 | } 81 | #{$v}radius-bl-large { 82 | border-bottom-left-radius: 125rem; 83 | } 84 | #{$v}radius-br-circle { 85 | border-bottom-right-radius: 50%; 86 | } 87 | #{$v}radius-br-large { 88 | border-bottom-right-radius: 125rem; 89 | } 90 | -------------------------------------------------------------------------------- /src/scss/lite/radius.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 圆角半径样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 15:08:35 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:37:30 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | @for $i from 0 through 10 { 14 | #{$v}radius-#{$i} { 15 | border-radius: #{math.div($i, 16)}rem; 16 | } 17 | } 18 | 19 | @for $i from 0 through 10 { 20 | #{$v}radius-tl-#{$i} { 21 | border-top-left-radius: #{math.div($i, 16)}rem; 22 | } 23 | #{$v}radius-tr-#{$i} { 24 | border-top-right-radius: #{math.div($i, 16)}rem; 25 | } 26 | #{$v}radius-bl-#{$i} { 27 | border-bottom-left-radius: #{math.div($i, 16)}rem; 28 | } 29 | #{$v}radius-br-#{$i} { 30 | border-bottom-right-radius: #{math.div($i, 16)}rem; 31 | } 32 | } 33 | 34 | // 媒体设备 35 | @each $device, $value in $media-min-width { 36 | @include media-min($device) { 37 | @for $i from 0 through 10 { 38 | #{$v}radius-#{$device}-#{$i} { 39 | border-radius: #{math.div($i, 16)}rem; 40 | } 41 | } 42 | 43 | @for $i from 0 through 10 { 44 | #{$v}radius-tl-#{$device}-#{$i} { 45 | border-top-left-radius: #{math.div($i, 16)}rem; 46 | } 47 | #{$v}radius-tr-#{$device}-#{$i} { 48 | border-top-right-radius: #{math.div($i, 16)}rem; 49 | } 50 | #{$v}radius-bl-#{$device}-#{$i} { 51 | border-bottom-left-radius: #{math.div($i, 16)}rem; 52 | } 53 | #{$v}radius-br-#{$device}-#{$i} { 54 | border-bottom-right-radius: #{math.div($i, 16)}rem; 55 | } 56 | } 57 | } 58 | } 59 | 60 | #{$v}radius-circle { 61 | border-radius: 50%; 62 | } 63 | #{$v}radius-large { 64 | border-radius: 125rem; 65 | } 66 | #{$v}radius-tl-circle { 67 | border-top-left-radius: 50%; 68 | } 69 | #{$v}radius-tl-large { 70 | border-top-left-radius: 125rem; 71 | } 72 | #{$v}radius-tr-circle { 73 | border-top-right-radius: 50%; 74 | } 75 | #{$v}radius-tr-large { 76 | border-top-right-radius: 125rem; 77 | } 78 | #{$v}radius-bl-circle { 79 | border-bottom-left-radius: 50%; 80 | } 81 | #{$v}radius-bl-large { 82 | border-bottom-left-radius: 125rem; 83 | } 84 | #{$v}radius-br-circle { 85 | border-bottom-right-radius: 50%; 86 | } 87 | #{$v}radius-br-large { 88 | border-bottom-right-radius: 125rem; 89 | } 90 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from "node:url"; 2 | 3 | import { defineConfig } from "vite"; 4 | import vue from "@vitejs/plugin-vue"; 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [vue()], 9 | resolve: { 10 | alias: { 11 | "@": fileURLToPath(new URL("./src", import.meta.url)), 12 | }, 13 | }, 14 | // 开发配置 15 | server: { 16 | //开启热更新 17 | hmr: true, 18 | // 自动打开浏览器 19 | open: true, 20 | // 服务器 IP 地址 21 | // 此处添加以下设置host: 0.0.0.0 或true 22 | // 将监听所有地址，包括局域网和公网地址 23 | host: true, 24 | // 服务器端口号 25 | port: 2017, 26 | // 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口。 27 | strictPort: false, 28 | // 代理 29 | proxy: { 30 | // 选项写法 31 | // [env.VITE_BASE_API]: { 32 | // target: env.VITE_BASE_URL, 33 | // changeOrigin: true 34 | // // rewrite: (path) => path.replace(/^\/api/, '') 35 | // } 36 | }, 37 | }, 38 | // 打包配置 39 | build: { 40 | // 浏览器兼容性 "esnext"|"modules" 41 | target: "modules", 42 | // 启用/禁用 CSS 代码拆分, 如果设置为false，整个项目中的所有 CSS 将被提取到一个 CSS 文件中 43 | cssCodeSplit: true, 44 | // 构建目录自动清除 45 | emptyOutDir: true, 46 | // 构建后是否生成 source map 文件 47 | sourcemap: false, 48 | // boolean | 'terser' | 'esbuild' 49 | // 混淆器, terser 构建后文件体积更小 50 | // vite3.x后需要自行安将插件terser, yarn add -D terser 51 | minify: "terser", 52 | // 传递给 Terser 的更多 minify 选项。 53 | terserOptions: { 54 | compress: { 55 | // 生产环境时移除console 56 | drop_console: true, 57 | drop_debugger: true, 58 | }, 59 | output: { 60 | // 去掉注释内容 61 | comments: true, 62 | }, 63 | }, 64 | rollupOptions: { 65 | output: { 66 | // 最小化拆分包 67 | manualChunks(id) { 68 | if (id.includes("node_modules")) { 69 | return id 70 | .toString() 71 | .split("node_modules/")[1] 72 | .split("/")[0] 73 | .toString(); 74 | } 75 | }, 76 | // 用于命名代码拆分时创建的共享块的输出命名 77 | chunkFileNames: "static/js/[name].[hash].js", 78 | // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值 79 | entryFileNames: "static/js/[name].[hash].js", 80 | // 用于输出静态资源的命名，[ext]表示文件扩展名 81 | // 此处会导致背景图片路径有问题 82 | assetFileNames: "static/[ext]/[name].[hash].[ext]", 83 | }, 84 | }, 85 | }, 86 | }); 87 | -------------------------------------------------------------------------------- /src/scss/mobile/radius.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 圆角半径样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 15:08:35 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2022-11-25 15:11:34 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | @for $i from 0 through 20 { 14 | #{$v}radius-#{$i} { 15 | border-radius: #{math.div($i, 16)}rem; 16 | } 17 | } 18 | 19 | @for $i from 0 through 20 { 20 | #{$v}radius-tl-#{$i} { 21 | border-top-left-radius: #{math.div($i, 16)}rem; 22 | } 23 | #{$v}radius-tr-#{$i} { 24 | border-top-right-radius: #{math.div($i, 16)}rem; 25 | } 26 | #{$v}radius-bl-#{$i} { 27 | border-bottom-left-radius: #{math.div($i, 16)}rem; 28 | } 29 | #{$v}radius-br-#{$i} { 30 | border-bottom-right-radius: #{math.div($i, 16)}rem; 31 | } 32 | } 33 | 34 | // // 媒体设备 35 | // @each $device, $value in $media-min-width { 36 | // @include media-min($device) { 37 | // @for $i from 0 through 20 { 38 | // #{$v}radius-#{$device}-#{$i} { 39 | // border-radius: #{math.div($i, 16)}rem; 40 | // } 41 | // } 42 | 43 | // @for $i from 0 through 20 { 44 | // #{$v}radius-tl-#{$device}-#{$i} { 45 | // border-top-left-radius: #{math.div($i, 16)}rem; 46 | // } 47 | // #{$v}radius-tr-#{$device}-#{$i} { 48 | // border-top-right-radius: #{math.div($i, 16)}rem; 49 | // } 50 | // #{$v}radius-bl-#{$device}-#{$i} { 51 | // border-bottom-left-radius: #{math.div($i, 16)}rem; 52 | // } 53 | // #{$v}radius-br-#{$device}-#{$i} { 54 | // border-bottom-right-radius: #{math.div($i, 16)}rem; 55 | // } 56 | // } 57 | // } 58 | // } 59 | 60 | #{$v}radius-circle { 61 | border-radius: 50%; 62 | } 63 | #{$v}radius-large { 64 | border-radius: 125rem; 65 | } 66 | #{$v}radius-tl-circle { 67 | border-top-left-radius: 50%; 68 | } 69 | #{$v}radius-tl-large { 70 | border-top-left-radius: 125rem; 71 | } 72 | #{$v}radius-tr-circle { 73 | border-top-right-radius: 50%; 74 | } 75 | #{$v}radius-tr-large { 76 | border-top-right-radius: 125rem; 77 | } 78 | #{$v}radius-bl-circle { 79 | border-bottom-left-radius: 50%; 80 | } 81 | #{$v}radius-bl-large { 82 | border-bottom-left-radius: 125rem; 83 | } 84 | #{$v}radius-br-circle { 85 | border-bottom-right-radius: 50%; 86 | } 87 | #{$v}radius-br-large { 88 | border-bottom-right-radius: 125rem; 89 | } 90 | -------------------------------------------------------------------------------- /src/scss/uni/width.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 宽度样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 14:49:20 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-08-23 20:30:41 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | // @use "sass:math"; 12 | 13 | /*------------------------------ 14 | * 百分比 & vw 15 | *------------------------------ 16 | */ 17 | $numberList: 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100; 18 | @for $i from 1 through length($numberList) { 19 | #{$v}w-#{nth($numberList, $i)} { 20 | width: #{nth($numberList, $i) * 1%} !important; 21 | } 22 | #{$v}w-min-#{nth($numberList, $i)} { 23 | min-width: #{nth($numberList, $i) * 1%} !important; 24 | } 25 | #{$v}w-max-#{nth($numberList, $i)} { 26 | max-width: #{nth($numberList, $i) * 1%} !important; 27 | } 28 | #{$v}vw-#{nth($numberList, $i)} { 29 | width: #{nth($numberList, $i)}vw !important; 30 | } 31 | } 32 | 33 | /*------------------------------ 34 | * 像素 35 | *------------------------------ 36 | */ 37 | $numberList2: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 38 | 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 39 | 80 82 84 85 86 88 90 92 94 95 96 98 100 110 120 130 140 150 160 170 180 190 40 | 200 220 240 250 260 280 300 320 340 350 360 380 400 420 440 450 460 480 500 41 | 520 540 550 560 580 600 620 640 650 660 680 700 720 740 750 0; 42 | @for $i from 1 through length($numberList2) { 43 | #{$v}w-px-#{nth($numberList2, $i)} { 44 | width: #{nth($numberList2, $i) * 2}rpx !important; 45 | } 46 | #{$v}w-min-px-#{nth($numberList2, $i)} { 47 | min-width: #{nth($numberList2, $i) * 2}rpx !important; 48 | } 49 | #{$v}w-max-px-#{nth($numberList2, $i)} { 50 | max-width: #{nth($numberList2, $i) * 2}rpx !important; 51 | } 52 | #{$v}w-calc-#{nth($numberList2, $i)} { 53 | width: calc(100% - #{nth($numberList2, $i) * 2}rpx) !important; 54 | } 55 | #{$v}vw-calc-#{nth($numberList2, $i)} { 56 | width: calc(100vw - #{nth($numberList2, $i) * 2}rpx) !important; 57 | } 58 | } 59 | 60 | /*------------------------------ 61 | * 其他 62 | *------------------------------ 63 | */ 64 | #{$v}w-0 { 65 | width: 0 !important; 66 | } 67 | #{$v}w-atuo { 68 | width: auto !important; 69 | } 70 | #{$v}w-min-auto { 71 | min-width: auto !important; 72 | } 73 | #{$v}w-max-auto { 74 | max-width: auto !important; 75 | } 76 | -------------------------------------------------------------------------------- /src/scss/uni/height.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 高度样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 14:36:17 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-08-23 20:31:35 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | // @use "sass:math"; 12 | 13 | /*------------------------------ 14 | * 百分比 & vh 15 | *------------------------------ 16 | */ 17 | $numberList: 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100; 18 | @for $i from 1 through length($numberList) { 19 | #{$v}h-#{nth($numberList, $i)} { 20 | height: #{nth($numberList, $i) * 1%} !important; 21 | } 22 | #{$v}h-min-#{nth($numberList, $i)} { 23 | min-height: #{nth($numberList, $i) * 1%} !important; 24 | } 25 | #{$v}h-max-#{nth($numberList, $i)} { 26 | max-height: #{nth($numberList, $i) * 1%} !important; 27 | } 28 | #{$v}vh-#{nth($numberList, $i)} { 29 | height: #{nth($numberList, $i)}vh !important; 30 | } 31 | } 32 | 33 | /*------------------------------ 34 | * 像素 35 | *------------------------------ 36 | */ 37 | $numberList2: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 38 | 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 39 | 80 82 84 85 86 88 90 92 94 95 96 98 100 110 120 130 140 150 160 170 180 190 40 | 200 220 240 250 260 280 300 320 340 350 360 380 400 420 440 450 460 480 500 41 | 520 540 550 560 580 600 620 640 650 660 680 700 720 740 750 0; 42 | @for $i from 1 through length($numberList2) { 43 | #{$v}h-px-#{nth($numberList2, $i)} { 44 | height: #{nth($numberList2, $i) * 2}rpx !important; 45 | } 46 | #{$v}h-min-px-#{nth($numberList2, $i)} { 47 | min-height: #{nth($numberList2, $i) * 2}rpx !important; 48 | } 49 | #{$v}h-max-px-#{nth($numberList2, $i)} { 50 | max-height: #{nth($numberList2, $i) * 2}rpx !important; 51 | } 52 | #{$v}h-calc-#{nth($numberList2, $i)} { 53 | height: calc(100% - #{nth($numberList2, $i) * 2}rpx) !important; 54 | } 55 | #{$v}vh-calc-#{nth($numberList2, $i)} { 56 | height: calc(100vh - #{nth($numberList2, $i) * 2}rpx) !important; 57 | } 58 | } 59 | 60 | /*------------------------------ 61 | * 其他 62 | *------------------------------ 63 | */ 64 | #{$v}h-0 { 65 | height: 0 !important; 66 | } 67 | #{$v}h-auto { 68 | height: auto !important; 69 | } 70 | #{$v}h-min-auto { 71 | min-height: auto !important; 72 | } 73 | #{$v}h-max-auto { 74 | max-height: auto !important; 75 | } 76 | -------------------------------------------------------------------------------- /src/scss/mixins/_rem.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: px转rem 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 10:58:51 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:35:58 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | 12 | $rem-baseline: 16px !default; 13 | $rem-fallback: false !default; 14 | $rem-px-only: false !default; 15 | 16 | @function rem-separator($list, $separator: false) { 17 | @if $separator == "comma" or $separator == "space" { 18 | @return append($list, null, $separator); 19 | } 20 | 21 | @if function-exists("list-separator") == true { 22 | @return list-separator($list); 23 | } 24 | $test-list: (); 25 | @each $item in $list { 26 | $test-list: append($test-list, $item, space); 27 | } 28 | @return if($test-list == $list, space, comma); 29 | } 30 | 31 | @mixin rem-baseline($zoom: 100%) { 32 | font-size: $zoom / 16px * $rem-baseline; 33 | } 34 | 35 | @function rem-convert($to, $values...) { 36 | $result: (); 37 | $separator: rem-separator($values); 38 | 39 | @each $value in $values { 40 | @if type-of($value) == "number" and unit($value) == "rem" and $to == "px" { 41 | $result: append($result, $value / 1rem * $rem-baseline, $separator); 42 | } @else if 43 | type-of($value) == 44 | "number" and 45 | unit($value) == 46 | "px" and 47 | $to == 48 | "rem" 49 | { 50 | $result: append($result, $value / $rem-baseline * 1rem, $separator); 51 | } @else if type-of($value) == "list" { 52 | $value-separator: rem-separator($value); 53 | $value: rem-convert($to, $value...); 54 | $value: rem-separator($value, $value-separator); 55 | $result: append($result, $value, $separator); 56 | } @else { 57 | $result: append($result, $value, $separator); 58 | } 59 | } 60 | @return if(length($result) == 1, nth($result, 1), $result); 61 | } 62 | 63 | @function rem($values...) { 64 | @if $rem-px-only { 65 | @return rem-convert(px, $values...); 66 | } @else { 67 | @return rem-convert(rem, $values...); 68 | } 69 | } 70 | 71 | @mixin rem($properties, $values...) { 72 | @if type-of($properties) == "map" { 73 | @each $property in map-keys($properties) { 74 | @include rem($property, map-get($properties, $property)); 75 | } 76 | } @else { 77 | @each $property in $properties { 78 | @if $rem-fallback or $rem-px-only { 79 | #{$property}: rem-convert(px, $values...); 80 | } 81 | @if not $rem-px-only { 82 | #{$property}: rem-convert(rem, $values...); 83 | } 84 | } 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/scss/border.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 边框样式 3 | * @Author: linpan 4 | * @Date: 2022-11-23 14:26:13 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:25:33 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | // 基础 14 | [class*=" #{$v2}border-"], 15 | [class^="#{$v2}border-"] { 16 | border-width: 0; 17 | border-style: solid; 18 | border-color: $border-color; 19 | } 20 | 21 | // 边框大小 22 | @for $i from 0 through 20 { 23 | @if $i != 0 { 24 | #{$v}border-#{$i} { 25 | border-width: #{math.div($i, 16)}rem; 26 | } 27 | #{$v}border-l-#{$i} { 28 | border-left-width: #{math.div($i, 16)}rem; 29 | } 30 | #{$v}border-t-#{$i} { 31 | border-top-width: #{math.div($i, 16)}rem; 32 | } 33 | #{$v}border-r-#{$i} { 34 | border-right-width: #{math.div($i, 16)}rem; 35 | } 36 | #{$v}border-b-#{$i} { 37 | border-bottom-width: #{math.div($i, 16)}rem; 38 | } 39 | } @else { 40 | #{$v}border-0 { 41 | border: 0; 42 | } 43 | #{$v}border-l-0 { 44 | border-left-width: 0; 45 | } 46 | #{$v}border-t-0 { 47 | border-top-width: 0; 48 | } 49 | #{$v}border-r-0 { 50 | border-right-width: 0; 51 | } 52 | #{$v}border-b-0 { 53 | border-bottom-width: 0; 54 | } 55 | } 56 | } 57 | 58 | // 媒体设备 59 | @each $device, $value in $media-min-width { 60 | @include media-min($device) { 61 | @for $i from 0 through 20 { 62 | @if $i != 0 { 63 | #{$v}border-#{$device}-#{$i} { 64 | border-width: #{math.div($i, 16)}rem; 65 | } 66 | #{$v}border-l-#{$device}-#{$i} { 67 | border-left-width: #{math.div($i, 16)}rem; 68 | } 69 | #{$v}border-t-#{$device}-#{$i} { 70 | border-top-width: #{math.div($i, 16)}rem; 71 | } 72 | #{$v}border-r-#{$device}-#{$i} { 73 | border-right-width: #{math.div($i, 16)}rem; 74 | } 75 | #{$v}border-b-#{$device}-#{$i} { 76 | border-bottom-width: #{math.div($i, 16)}rem; 77 | } 78 | } @else { 79 | #{$v}border-#{$device}-0 { 80 | border: 0; 81 | } 82 | #{$v}border-l-#{$device}-0 { 83 | border-left-width: 0; 84 | } 85 | #{$v}border-t-#{$device}-0 { 86 | border-top-width: 0; 87 | } 88 | #{$v}border-r-#{$device}-0 { 89 | border-right-width: 0; 90 | } 91 | #{$v}border-b-#{$device}-0 { 92 | border-bottom-width: 0; 93 | } 94 | } 95 | } 96 | } 97 | } 98 | 99 | #{$v}border-solid { 100 | border-style: solid; 101 | } 102 | #{$v}border-dashed { 103 | border-style: dashed; 104 | } 105 | #{$v}border-dotted { 106 | border-style: dotted; 107 | } 108 | -------------------------------------------------------------------------------- /src/scss/lite/border.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 边框样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 14:26:13 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:36:44 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | // 基础 14 | [class*=" #{$v2}border-"], 15 | [class^="#{$v2}border-"] { 16 | border-width: 0; 17 | border-style: solid; 18 | border-color: $border-color; 19 | } 20 | 21 | // 边框大小 22 | @for $i from 0 through 10 { 23 | @if $i != 0 { 24 | #{$v}border-#{$i} { 25 | border-width: #{math.div($i, 16)}rem; 26 | } 27 | #{$v}border-l-#{$i} { 28 | border-left-width: #{math.div($i, 16)}rem; 29 | } 30 | #{$v}border-t-#{$i} { 31 | border-top-width: #{math.div($i, 16)}rem; 32 | } 33 | #{$v}border-r-#{$i} { 34 | border-right-width: #{math.div($i, 16)}rem; 35 | } 36 | #{$v}border-b-#{$i} { 37 | border-bottom-width: #{math.div($i, 16)}rem; 38 | } 39 | } @else { 40 | #{$v}border-0 { 41 | border: 0; 42 | } 43 | #{$v}border-l-0 { 44 | border-left-width: 0; 45 | } 46 | #{$v}border-t-0 { 47 | border-top-width: 0; 48 | } 49 | #{$v}border-r-0 { 50 | border-right-width: 0; 51 | } 52 | #{$v}border-b-0 { 53 | border-bottom-width: 0; 54 | } 55 | } 56 | } 57 | 58 | // 媒体设备 59 | @each $device, $value in $media-min-width { 60 | @include media-min($device) { 61 | @for $i from 0 through 10 { 62 | @if $i != 0 { 63 | #{$v}border-#{$device}-#{$i} { 64 | border-width: #{math.div($i, 16)}rem; 65 | } 66 | #{$v}border-l-#{$device}-#{$i} { 67 | border-left-width: #{math.div($i, 16)}rem; 68 | } 69 | #{$v}border-t-#{$device}-#{$i} { 70 | border-top-width: #{math.div($i, 16)}rem; 71 | } 72 | #{$v}border-r-#{$device}-#{$i} { 73 | border-right-width: #{math.div($i, 16)}rem; 74 | } 75 | #{$v}border-b-#{$device}-#{$i} { 76 | border-bottom-width: #{math.div($i, 16)}rem; 77 | } 78 | } @else { 79 | #{$v}border-#{$device}-0 { 80 | border: 0; 81 | } 82 | #{$v}border-l-#{$device}-0 { 83 | border-left-width: 0; 84 | } 85 | #{$v}border-t-#{$device}-0 { 86 | border-top-width: 0; 87 | } 88 | #{$v}border-r-#{$device}-0 { 89 | border-right-width: 0; 90 | } 91 | #{$v}border-b-#{$device}-0 { 92 | border-bottom-width: 0; 93 | } 94 | } 95 | } 96 | } 97 | } 98 | 99 | #{$v}border-solid { 100 | border-style: solid; 101 | } 102 | #{$v}border-dashed { 103 | border-style: dashed; 104 | } 105 | #{$v}border-dotted { 106 | border-style: dotted; 107 | } 108 | -------------------------------------------------------------------------------- /src/scss/reboot.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 样式重置 3 | * @Author: linpan 4 | * @Date: 2022-11-22 17:56:57 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:31:12 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | *, 12 | ::after, 13 | ::before { 14 | margin: 0; 15 | padding: 0; 16 | box-sizing: border-box; 17 | } 18 | a { 19 | color: $color; 20 | text-decoration: none; 21 | background-color: transparent; 22 | -webkit-text-decoration-skip: objects; 23 | } 24 | a:hover, 25 | a:active { 26 | color: inherit; 27 | outline: 0; 28 | text-decoration: none; 29 | } 30 | a[href] { 31 | cursor: pointer; 32 | } 33 | a[href]:hover { 34 | color: $color-primary; 35 | } 36 | a[href].underline:hover { 37 | text-decoration: underline; 38 | } 39 | div, 40 | article, 41 | aside, 42 | details, 43 | dialog, 44 | figcaption, 45 | figure, 46 | footer, 47 | header, 48 | hgroup, 49 | menu, 50 | main, 51 | nav, 52 | section, 53 | summary { 54 | display: block; 55 | } 56 | b, 57 | strong { 58 | font-weight: 700; 59 | } 60 | audio, 61 | canvas, 62 | output, 63 | progress, 64 | video { 65 | display: inline-block; 66 | vertical-align: baseline; 67 | } 68 | audio:not([controls]) { 69 | display: none; 70 | height: 0; 71 | } 72 | :focus { 73 | outline: 0; 74 | } 75 | [v-cloak] { 76 | display: none !important; 77 | } 78 | ol, 79 | ul { 80 | list-style: none; 81 | } 82 | hr { 83 | height: 0; 84 | overflow: visible; 85 | } 86 | i, 87 | em, 88 | dfn { 89 | font-style: normal; 90 | } 91 | table { 92 | border-collapse: collapse; 93 | border-spacing: 0; 94 | } 95 | caption, 96 | table, 97 | tbody, 98 | td, 99 | tfoot, 100 | th, 101 | thead, 102 | tr { 103 | font-family: inherit; 104 | font-size: 100%; 105 | } 106 | button::after { 107 | border: none; 108 | } 109 | button, 110 | input, 111 | optgroup, 112 | select, 113 | textarea { 114 | line-height: 1.15; 115 | font-family: inherit; 116 | font-size: 100%; 117 | } 118 | button { 119 | appearance: none; 120 | border-style: none; 121 | outline: 0; 122 | } 123 | textarea { 124 | overflow: auto; 125 | vertical-align: top; 126 | resize: vertical; 127 | } 128 | img { 129 | max-width: 100%; 130 | display: block; 131 | position: relative; 132 | border-style: none; 133 | will-change: transform; 134 | } 135 | svg:not(:root) { 136 | overflow: hidden; 137 | } 138 | html { 139 | font-family: sans-serif; 140 | -webkit-text-size-adjust: 100%; 141 | -webkit-tap-highlight-color: transparent; 142 | } 143 | html, 144 | body { 145 | width: 100%; 146 | height: 100%; 147 | } 148 | body { 149 | text-align: left; 150 | color: $color; 151 | font-family: $font-family; 152 | font-size: $font-size; 153 | font-weight: $font-weight; 154 | line-height: $line-height; 155 | background-color: $bg-color; 156 | } 157 | -------------------------------------------------------------------------------- /src/scss/color.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 颜色样式 3 | * @Author: linpan 4 | * @Date: 2022-11-23 16:18:42 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:27:10 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | /*------------------------------ 12 | * 文本颜色 13 | *------------------------------ 14 | */ 15 | @each $key, $val in $colors { 16 | #{$v}color--#{$key} { 17 | color: $val !important; 18 | } 19 | } 20 | 21 | /*------------------------------ 22 | * 背景颜色 23 | *------------------------------ 24 | */ 25 | @each $key, $val in $colors { 26 | #{$v}bg--#{$key} { 27 | background-color: $val !important; 28 | } 29 | } 30 | 31 | /*------------------------------ 32 | * 边框颜色 33 | *------------------------------ 34 | */ 35 | @each $key, $val in $colors { 36 | #{$v}border--#{$key} { 37 | border-color: $val !important; 38 | } 39 | } 40 | 41 | /*------------------------------ 42 | * 透明背景颜色 43 | *------------------------------ 44 | */ 45 | @each $key, 46 | $val 47 | in ( 48 | "01": 0.1, 49 | "02": 0.2, 50 | "03": 0.3, 51 | "04": 0.4, 52 | "05": 0.5, 53 | "06": 0.6, 54 | "07": 0.7, 55 | "08": 0.8, 56 | "09": 0.9 57 | ) 58 | { 59 | #{$v}bg--black-#{$key} { 60 | background-color: rgba(0, 0, 0, $val) !important; 61 | } 62 | #{$v}bg--white-#{$key} { 63 | background-color: rgba(255, 255, 255, $val) !important; 64 | } 65 | } 66 | 67 | /*------------------------------ 68 | * 颜色混合模式 69 | *------------------------------ 70 | */ 71 | #{$v}mode-normal { 72 | mix-blend-mode: normal; // 正常 73 | } 74 | #{$v}mode-multiply { 75 | mix-blend-mode: multiply; // 正片叠底 76 | } 77 | #{$v}mode-screen { 78 | mix-blend-mode: screen; // 滤色 79 | } 80 | #{$v}mode-overlay { 81 | mix-blend-mode: overlay; // 叠加 82 | } 83 | #{$v}mode-darken { 84 | mix-blend-mode: darken; // 变暗 85 | } 86 | #{$v}mode-lighten { 87 | mix-blend-mode: lighten; // 变亮 88 | } 89 | #{$v}mode-color-dodge { 90 | mix-blend-mode: color-dodge; // 颜色减淡 91 | } 92 | #{$v}mode-color-burn { 93 | mix-blend-mode: color-burn; // 颜色加深 94 | } 95 | #{$v}mode-hard-light { 96 | mix-blend-mode: hard-light; // 强光 97 | } 98 | #{$v}mode-soft-light { 99 | mix-blend-mode: soft-light; // 柔光 100 | } 101 | #{$v}mode-difference { 102 | mix-blend-mode: difference; // 差值 103 | } 104 | #{$v}mode-exclusion { 105 | mix-blend-mode: exclusion; // 排除 106 | } 107 | #{$v}mode-hue { 108 | mix-blend-mode: hue; // 色相 109 | } 110 | #{$v}mode-saturation { 111 | mix-blend-mode: saturation; // 饱和度 112 | } 113 | #{$v}mode-color { 114 | mix-blend-mode: color; // 颜色 115 | } 116 | #{$v}mode-luminosity { 117 | mix-blend-mode: luminosity; // 亮度 118 | } 119 | #{$v}mode-initial { 120 | mix-blend-mode: initial; // 默认 121 | } 122 | #{$v}mode-inherit { 123 | mix-blend-mode: inherit; // 继承 124 | } 125 | #{$v}mode-unset { 126 | mix-blend-mode: unset; // 还原 127 | } 128 | -------------------------------------------------------------------------------- /src/scss/mobile/border.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 边框样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 14:26:13 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2022-12-01 15:50:38 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | // 基础 14 | [class*=" #{$v2}border-"], 15 | [class^="#{$v2}border-"] { 16 | border-width: 0; 17 | border-style: solid; 18 | border-color: $border-color; 19 | } 20 | 21 | // 边框大小 22 | @for $i from 0 through 20 { 23 | @if $i != 0 { 24 | #{$v}border-#{$i} { 25 | border-width: #{math.div($i, 16)}rem; 26 | } 27 | #{$v}border-l-#{$i} { 28 | border-left-width: #{math.div($i, 16)}rem; 29 | } 30 | #{$v}border-t-#{$i} { 31 | border-top-width: #{math.div($i, 16)}rem; 32 | } 33 | #{$v}border-r-#{$i} { 34 | border-right-width: #{math.div($i, 16)}rem; 35 | } 36 | #{$v}border-b-#{$i} { 37 | border-bottom-width: #{math.div($i, 16)}rem; 38 | } 39 | } @else { 40 | #{$v}border-0 { 41 | border: 0; 42 | } 43 | #{$v}border-l-0 { 44 | border-left-width: 0; 45 | } 46 | #{$v}border-t-0 { 47 | border-top-width: 0; 48 | } 49 | #{$v}border-r-0 { 50 | border-right-width: 0; 51 | } 52 | #{$v}border-b-0 { 53 | border-bottom-width: 0; 54 | } 55 | } 56 | } 57 | 58 | // // 媒体设备 59 | // @each $device, $value in $media-min-width { 60 | // @include media-min($device) { 61 | // @for $i from 0 through 20 { 62 | // @if $i != 0 { 63 | // #{$v}border-#{$device}-#{$i} { 64 | // border-width: #{math.div($i, 16)}rem; 65 | // } 66 | // #{$v}border-l-#{$device}-#{$i} { 67 | // border-left-width: #{math.div($i, 16)}rem; 68 | // } 69 | // #{$v}border-t-#{$device}-#{$i} { 70 | // border-top-width: #{math.div($i, 16)}rem; 71 | // } 72 | // #{$v}border-r-#{$device}-#{$i} { 73 | // border-right-width: #{math.div($i, 16)}rem; 74 | // } 75 | // #{$v}border-b-#{$device}-#{$i} { 76 | // border-bottom-width: #{math.div($i, 16)}rem; 77 | // } 78 | // } @else { 79 | // #{$v}border-#{$device}-0 { 80 | // border: 0; 81 | // } 82 | // #{$v}border-l-#{$device}-0 { 83 | // border-left-width: 0; 84 | // } 85 | // #{$v}border-t-#{$device}-0 { 86 | // border-top-width: 0; 87 | // } 88 | // #{$v}border-r-#{$device}-0 { 89 | // border-right-width: 0; 90 | // } 91 | // #{$v}border-b-#{$device}-0 { 92 | // border-bottom-width: 0; 93 | // } 94 | // } 95 | // } 96 | // } 97 | // } 98 | 99 | #{$v}border-solid { 100 | border-style: solid; 101 | } 102 | #{$v}border-dashed { 103 | border-style: dashed; 104 | } 105 | #{$v}border-dotted { 106 | border-style: dotted; 107 | } 108 | -------------------------------------------------------------------------------- /src/scss/uni/shadow.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 阴影样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 16:27:07 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-09 09:18:02 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | // @use "sass:math"; 12 | 13 | /*------------------------------ 14 | * 元素阴影 15 | *------------------------------ 16 | */ 17 | $numberList: 1 2 3 4 5 6 7 8 9 10 15 20 25 30; 18 | @for $i from 1 through length($numberList) { 19 | #{$v}bs-#{nth($numberList, $i)} { 20 | box-shadow: 0 0 #{nth($numberList, $i) * 2}rpx rgba(0, 0, 0, 0.1); 21 | } 22 | } 23 | @for $i from 1 through length($numberList) { 24 | #{$v}bs-1-#{nth($numberList, $i)} { 25 | box-shadow: 0 2rpx #{nth($numberList, $i) * 2}rpx rgba(0, 0, 0, 0.1); 26 | } 27 | #{$v}bs-2-#{nth($numberList, $i)} { 28 | box-shadow: 0 4rpx #{nth($numberList, $i) * 2}rpx rgba(0, 0, 0, 0.1); 29 | } 30 | #{$v}bs-3-#{nth($numberList, $i)} { 31 | box-shadow: 0 6rpx #{nth($numberList, $i) * 2}rpx rgba(0, 0, 0, 0.1); 32 | } 33 | #{$v}bs-4-#{nth($numberList, $i)} { 34 | box-shadow: 0 8rpx #{nth($numberList, $i) * 2}rpx rgba(0, 0, 0, 0.1); 35 | } 36 | #{$v}bs-5-#{nth($numberList, $i)} { 37 | box-shadow: 0 10rpx #{nth($numberList, $i) * 2}rpx rgba(0, 0, 0, 0.1); 38 | } 39 | #{$v}bs-6-#{nth($numberList, $i)} { 40 | box-shadow: 0 12rpx #{nth($numberList, $i) * 2}rpx rgba(0, 0, 0, 0.1); 41 | } 42 | #{$v}bs-7-#{nth($numberList, $i)} { 43 | box-shadow: 0 14rpx #{nth($numberList, $i) * 2}rpx rgba(0, 0, 0, 0.1); 44 | } 45 | #{$v}bs-8-#{nth($numberList, $i)} { 46 | box-shadow: 0 16rpx #{nth($numberList, $i) * 2}rpx rgba(0, 0, 0, 0.1); 47 | } 48 | #{$v}bs-9-#{nth($numberList, $i)} { 49 | box-shadow: 0 18rpx #{nth($numberList, $i) * 2}rpx rgba(0, 0, 0, 0.1); 50 | } 51 | #{$v}bs-10-#{nth($numberList, $i)} { 52 | box-shadow: 0 20rpx #{nth($numberList, $i) * 2}rpx rgba(0, 0, 0, 0.1); 53 | } 54 | } 55 | 56 | #{$v}bs-none { 57 | box-shadow: none !important; 58 | } 59 | 60 | /*------------------------------ 61 | * 文本阴影 62 | *------------------------------ 63 | */ 64 | $numberList2: 1 2 3 4 5; 65 | @for $i from 1 through length($numberList2) { 66 | #{$v}ts-#{nth($numberList2, $i)} { 67 | text-shadow: 0 0 #{nth($numberList2, $i) * 2}rpx rgba(0, 0, 0, 0.3); 68 | } 69 | } 70 | @for $i from 1 through length($numberList2) { 71 | #{$v}ts-1-#{nth($numberList2, $i)} { 72 | text-shadow: 0 2rpx #{nth($numberList2, $i) * 2}rpx rgba(0, 0, 0, 0.3); 73 | } 74 | #{$v}ts-2-#{nth($numberList2, $i)} { 75 | text-shadow: 0 4rpx #{nth($numberList2, $i) * 2}rpx rgba(0, 0, 0, 0.3); 76 | } 77 | #{$v}ts-3-#{nth($numberList2, $i)} { 78 | text-shadow: 0 6rpx #{nth($numberList2, $i) * 2}rpx rgba(0, 0, 0, 0.3); 79 | } 80 | #{$v}ts-4-#{nth($numberList2, $i)} { 81 | text-shadow: 0 8rpx #{nth($numberList2, $i) * 2}rpx rgba(0, 0, 0, 0.3); 82 | } 83 | #{$v}ts-5-#{nth($numberList2, $i)} { 84 | text-shadow: 0 10rpx #{nth($numberList2, $i) * 2}rpx rgba(0, 0, 0, 0.3); 85 | } 86 | } 87 | 88 | #{$v}ts-none { 89 | text-shadow: none !important; 90 | } 91 | -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 变量配置 3 | * @Author: linpan 4 | * @Date: 2022-11-22 17:45:12 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-08-23 20:47:30 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | // vus前缀 12 | $v: ".vus-"; 13 | $v2: "vus-"; 14 | 15 | $color: #515355 !default; 16 | $color-primary: #409eff !default; 17 | $bg-color: #ffffff !default; 18 | $font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 19 | "Helvetica Neue", Helvetica, "Microsoft YaHei", "微软雅黑", FreeSans, 20 | "Droid Sans", "wenquanyi micro hei", "PingFang SC", "Hiragino Sans GB", 21 | "Hiragino Sans GB W3", Arial, sans-serif !default; 22 | $font-family-number: SourceCodeProRegular, sans-serif !default; 23 | $font-family-en: "Century Gothic", sans-serif !default; 24 | $font-size: 0.875rem !default; 25 | $font-weight: 400 !default; 26 | $line-height: 1.5 !default; 27 | 28 | // 字体大小 29 | $size-xs: 0.75rem !default; 30 | $size-sm: 0.875rem !default; 31 | $size-md: 1rem !default; 32 | $size-lg: 1.125rem !default; 33 | $size-xl: 1.25rem !default; 34 | 35 | // 标题字体 36 | $h1: 2.5rem !default; 37 | $h2: 2rem !default; 38 | $h3: 1.75rem !default; 39 | $h4: 1.5rem !default; 40 | $h5: 1.25rem !default; 41 | $h6: 0.9375rem !default; 42 | 43 | // 边框 44 | $border-color: #dcdfe6 !default; 45 | $border-color-light: #e4e7ed !default; 46 | $border-color-dark: #d4d7de !default; 47 | 48 | //媒体设备定义规范 49 | $xs: "xs" !default; 50 | $sm: "sm" !default; 51 | $md: "md" !default; 52 | $lg: "lg" !default; 53 | $xl: "xl" !default; 54 | 55 | //@media 56 | $media-min-width: ( 57 | $xs: 576px, 58 | $sm: 768px, 59 | $md: 992px, 60 | $lg: 1200px, 61 | $xl: 1920px, 62 | ) !default; 63 | 64 | // 颜色 65 | $colors: () !default; 66 | $colors: map-merge( 67 | ( 68 | "primary": #409eff, 69 | "success": #67c23a, 70 | "warning": #e6a23c, 71 | "danger": #dd5544, 72 | "error": #ec0000, 73 | "info": #708090, 74 | "black": #000000, 75 | "black2": #111111, 76 | "black3": #222222, 77 | "dark": #333333, 78 | "dark2": #444444, 79 | "dark3": #555555, 80 | "gray": #888888, 81 | "gray2": #999999, 82 | "gray3": #aaaaaa, 83 | "light": #cccccc, 84 | "light2": #dddddd, 85 | "light3": #eeeeee, 86 | "light4": #f3f3f3, 87 | "light5": #f5f5f5, 88 | "light6": #f8f8f8, 89 | "white": #ffffff, 90 | "red": #ff0000, 91 | "red2": #ff6e6e, 92 | "red3": #ffc4c4, 93 | "yellow": #ffff00, 94 | "yellow2": #ffff80, 95 | "yellow3": #ffffd4, 96 | "orange": #ffa500, 97 | "orange2": #ffd17b, 98 | "orange3": #fff0d3, 99 | "brown": #a52a2a, 100 | "brown2": #ce7b7b, 101 | "brown3": #f3cccc, 102 | "green": #008000, 103 | "green2": #5ec25e, 104 | "green3": #d3fad3, 105 | "cyan": #00ffff, 106 | "cyan2": #77ffff, 107 | "cyan3": #dfffff, 108 | "blue": #0000ff, 109 | "blue2": #7b7bff, 110 | "blue3": #dbdbff, 111 | "skyblue": #87ceeb, 112 | "purple": #800080, 113 | "purple2": #b951b9, 114 | "purple3": #ffd6ff, 115 | "inherit": inherit, 116 | "transparent": transparent, 117 | ), 118 | $colors 119 | ); 120 | -------------------------------------------------------------------------------- /src/scss/mixins/_media.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 媒体识别查询 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 09:41:55 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2022-11-23 10:59:36 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | //下一个设备 12 | @function device-next( 13 | $name, 14 | $device: $media-min-width, 15 | $device-names: map-keys($device) 16 | ) { 17 | $n: index($device-names, $name); 18 | @return if($n < length($device-names), nth($device-names, $n + 1), null); 19 | } 20 | 21 | //最小设备 22 | @function device-min($name, $device: $media-min-width) { 23 | $min: map-get($device, $name); 24 | @return if($min != 0, $min, null); 25 | } 26 | 27 | //最大设备 28 | @function device-max($name, $device: $media-min-width) { 29 | $next: device-next($name, $device); 30 | @return if($next, device-min($next, $device) - 0.02px, null); 31 | } 32 | 33 | //设备中缀 34 | @function device-infix($name, $device: $media-min-width) { 35 | @return if(device-min($name, $device) == null, "", "-#{$name}"); 36 | } 37 | 38 | //设备查询(大于等于) 39 | @mixin media-min($name, $device: $media-min-width) { 40 | $min: device-min($name, $device); 41 | @if $min { 42 | @media (min-width: $min) { 43 | @content; 44 | } 45 | } @else { 46 | @content; 47 | } 48 | } 49 | 50 | //设备查询(小于等于) 51 | @mixin media-max($name, $device: $media-min-width) { 52 | $max: device-max($name, $device); 53 | @if $max { 54 | @media (max-width: $max) { 55 | @content; 56 | } 57 | } @else { 58 | @content; 59 | } 60 | } 61 | 62 | //在..之间设备查询 63 | @mixin media-between($lower, $upper, $device: $media-min-width) { 64 | $min: device-min($lower, $device); 65 | $max: device-max($upper, $device); 66 | @if $min != null and $max != null { 67 | @media (min-width: $min) and (max-width: $max) { 68 | @content; 69 | } 70 | } @else if $max == null { 71 | @include media-min($lower, $device) { 72 | @content; 73 | } 74 | } @else if $min == null { 75 | @include media-max($upper, $device) { 76 | @content; 77 | } 78 | } 79 | } 80 | 81 | //指定设备查询(唯一设备) 82 | @mixin media-only($name, $device: $media-min-width) { 83 | $min: device-min($name, $device); 84 | $max: device-max($name, $device); 85 | @if $min != null and $max != null { 86 | @media (min-width: $min) and (max-width: $max) { 87 | @content; 88 | } 89 | } @else if $max == null { 90 | @include media-min($name, $device) { 91 | @content; 92 | } 93 | } @else if $min == null { 94 | @include media-max($name, $device) { 95 | @content; 96 | } 97 | } 98 | } 99 | 100 | //自定义设备查询 101 | @mixin media-custom($min, $max: null, $reverse: false) { 102 | @if $min != null and $max != null { 103 | @if $reverse { 104 | @media (max-width: $max) and (min-width: $min) { 105 | @content; 106 | } 107 | } @else { 108 | @media (min-width: $min) and (max-width: $max) { 109 | @content; 110 | } 111 | } 112 | } @else if $max == null { 113 | @media (min-width: $min) { 114 | @content; 115 | } 116 | } @else if $min == null { 117 | @media (max-width: $max) { 118 | @content; 119 | } 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /src/scss/uni/border.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 边框样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 14:26:13 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-07-18 09:59:43 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | // @use "sass:math"; 12 | 13 | // 基础 14 | [class*=" #{$v2}border-"], 15 | [class^="#{$v2}border-"] { 16 | border-width: 0; 17 | border-style: solid; 18 | border-color: $border-color; 19 | } 20 | 21 | // 边框大小 22 | @for $i from 0 through 20 { 23 | @if $i != 0 { 24 | #{$v}border-#{$i} { 25 | border-width: #{$i * 2}rpx; 26 | } 27 | #{$v}border-l-#{$i} { 28 | border-left-width: #{$i * 2}rpx; 29 | } 30 | #{$v}border-t-#{$i} { 31 | border-top-width: #{$i * 2}rpx; 32 | } 33 | #{$v}border-r-#{$i} { 34 | border-right-width: #{$i * 2}rpx; 35 | } 36 | #{$v}border-b-#{$i} { 37 | border-bottom-width: #{$i * 2}rpx; 38 | } 39 | } @else { 40 | #{$v}border-0 { 41 | border: 0; 42 | } 43 | #{$v}border-l-0 { 44 | border-left-width: 0; 45 | } 46 | #{$v}border-t-0 { 47 | border-top-width: 0; 48 | } 49 | #{$v}border-r-0 { 50 | border-right-width: 0; 51 | } 52 | #{$v}border-b-0 { 53 | border-bottom-width: 0; 54 | } 55 | } 56 | } 57 | 58 | #{$v}border-solid { 59 | border-style: solid; 60 | } 61 | #{$v}border-dashed { 62 | border-style: dashed; 63 | } 64 | #{$v}border-dotted { 65 | border-style: dotted; 66 | } 67 | 68 | // 细边框 69 | .vus-border-s-1::after, 70 | .vus-border-s-2::after, 71 | .vus-border-s-0::after { 72 | width: 200%; 73 | height: 200%; 74 | -webkit-transform: scale(0.5, 0.5); 75 | transform: scale(0.5, 0.5); 76 | } 77 | 78 | [class*="vus-border-s-b-"]::after, 79 | [class*="vus-border-s-t-"]::after { 80 | height: 200%; 81 | -webkit-transform: scaleY(0.5); 82 | transform: scaleY(0.5); 83 | } 84 | 85 | [class*="vus-border-s-l-"]::after, 86 | [class*="vus-border-s-r-"]::after { 87 | width: 200%; 88 | -webkit-transform: scaleX(0.5); 89 | transform: scaleX(0.5); 90 | } 91 | 92 | [class*="vus-border-s-"] { 93 | position: relative; 94 | } 95 | 96 | [class*="vus-border-s-"]::after { 97 | content: ""; 98 | position: absolute; 99 | top: 0; 100 | left: 0; 101 | right: 0; 102 | bottom: 0; 103 | z-index: 0; 104 | border-width: 0; 105 | border-style: solid; 106 | border-color: #e6e6e6; 107 | -webkit-transform-origin: 0 0; 108 | transform-origin: 0 0; 109 | pointer-events: none; 110 | } 111 | // 四边 112 | .vus-border-s-1::after { 113 | border-width: 1rpx; 114 | } 115 | .vus-border-s-0::after { 116 | border-width: 0rpx; 117 | } 118 | 119 | // 左边 120 | .vus-border-s-l-1::after { 121 | border-left-width: 1rpx; 122 | } 123 | .vus-border-s-l-0::after { 124 | border-left-width: 0rpx; 125 | } 126 | 127 | // 顶部 128 | .vus-border-s-t-1::after { 129 | border-top-width: 1rpx; 130 | } 131 | .vus-border-s-t-0::after { 132 | border-top-width: 0rpx; 133 | } 134 | 135 | // 右边 136 | .vus-border-s-r-1::after { 137 | border-right-width: 1rpx; 138 | } 139 | .vus-border-s-r-0::after { 140 | border-right-width: 0rpx; 141 | } 142 | 143 | // 底部 144 | .vus-border-s-b-1::after { 145 | border-bottom-width: 1rpx; 146 | } 147 | .vus-border-s-b-0::after { 148 | border-bottom-width: 0rpx; 149 | } 150 | -------------------------------------------------------------------------------- /src/scss/uni/position.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 位置定位样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 15:22:53 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-06-01 10:25:16 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | // @use "sass:math"; 12 | 13 | #{$v}fixed { 14 | position: fixed !important; 15 | } 16 | #{$v}absolute { 17 | position: absolute !important; 18 | } 19 | #{$v}relative { 20 | position: relative !important; 21 | } 22 | 23 | /*------------------------------ 24 | * 位置距离 25 | *------------------------------ 26 | */ 27 | $numberList: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 28 | 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 29 | 80 82 84 85 86 88 90 92 94 95 96 98 100 110 120 130 140 150 160 170 180 190 30 | 200 250 300 350 400 450 500 550 600 650 700 750 0; 31 | 32 | @for $i from 1 through length($numberList) { 33 | #{$v}left-#{nth($numberList, $i)} { 34 | left: #{nth($numberList, $i) * 2}rpx !important; 35 | } 36 | #{$v}left--#{nth($numberList, $i)} { 37 | left: -#{nth($numberList, $i) * 2}rpx !important; 38 | } 39 | #{$v}top-#{nth($numberList, $i)} { 40 | top: #{nth($numberList, $i) * 2}rpx !important; 41 | } 42 | #{$v}top--#{nth($numberList, $i)} { 43 | top: -#{nth($numberList, $i) * 2}rpx !important; 44 | } 45 | #{$v}right-#{nth($numberList, $i)} { 46 | right: #{nth($numberList, $i) * 2}rpx !important; 47 | } 48 | #{$v}right--#{nth($numberList, $i)} { 49 | right: -#{nth($numberList, $i) * 2}rpx !important; 50 | } 51 | #{$v}bottom-#{nth($numberList, $i)} { 52 | bottom: #{nth($numberList, $i) * 2}rpx !important; 53 | } 54 | #{$v}bottom--#{nth($numberList, $i)} { 55 | bottom: -#{nth($numberList, $i) * 2}rpx !important; 56 | } 57 | } 58 | 59 | #{$v}left-0 { 60 | left: 0 !important; 61 | } 62 | #{$v}top-0 { 63 | top: 0 !important; 64 | } 65 | #{$v}right-0 { 66 | right: 0 !important; 67 | } 68 | #{$v}bottom-0 { 69 | bottom: 0 !important; 70 | } 71 | 72 | /*------------------------------ 73 | * 百分比(percent) 74 | *------------------------------ 75 | */ 76 | $numberList2: 10 20 30 40 50 60 70 80 90 100; 77 | @for $i from 1 through length($numberList2) { 78 | #{$v}left-p-#{nth($numberList2, $i)} { 79 | left: #{nth($numberList2, $i) * 1%} !important; 80 | } 81 | #{$v}left-p--#{nth($numberList2, $i)} { 82 | left: -#{nth($numberList2, $i) * 1%} !important; 83 | } 84 | #{$v}top-p-#{nth($numberList2, $i)} { 85 | top: #{nth($numberList2, $i) * 1%} !important; 86 | } 87 | #{$v}top-p--#{nth($numberList2, $i)} { 88 | top: -#{nth($numberList2, $i) * 1%} !important; 89 | } 90 | #{$v}right-p-#{nth($numberList2, $i)} { 91 | right: #{nth($numberList2, $i) * 1%} !important; 92 | } 93 | #{$v}right-p--#{nth($numberList2, $i)} { 94 | right: -#{nth($numberList2, $i) * 1%} !important; 95 | } 96 | #{$v}bottom-p-#{nth($numberList2, $i)} { 97 | bottom: #{nth($numberList2, $i) * 1%} !important; 98 | } 99 | #{$v}bottom-p--#{nth($numberList2, $i)} { 100 | bottom: -#{nth($numberList2, $i) * 1%} !important; 101 | } 102 | } 103 | 104 | /*------------------------------ 105 | * 位置索引层 106 | *------------------------------ 107 | */ 108 | $numberList3: -1 0 1 2 3 4 5 6 7 8 9 10 100 101 102 103 104 105 106 107 108 109 109 | 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 99999; 110 | @for $i from 1 through length($numberList3) { 111 | #{$v}index-#{nth($numberList3, $i)} { 112 | z-index: #{nth($numberList3, $i)} !important; 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /src/scss/mobile/position.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 位置定位样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 15:22:53 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-06-01 10:25:48 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | #{$v}fixed { 14 | position: fixed !important; 15 | } 16 | #{$v}absolute { 17 | position: absolute !important; 18 | } 19 | #{$v}relative { 20 | position: relative !important; 21 | } 22 | 23 | /*------------------------------ 24 | * 位置距离 25 | *------------------------------ 26 | */ 27 | $numberList: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 28 | 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 29 | 80 82 84 85 86 88 90 92 94 95 96 98 100 110 120 130 140 150 160 170 180 190 30 | 200 250 300 350 400 450 500 550 600 650 700 750 0; 31 | 32 | @for $i from 1 through length($numberList) { 33 | #{$v}left-#{nth($numberList, $i)} { 34 | left: #{math.div(nth($numberList, $i), 16)}rem !important; 35 | } 36 | #{$v}left--#{nth($numberList, $i)} { 37 | left: -#{math.div(nth($numberList, $i), 16)}rem !important; 38 | } 39 | #{$v}top-#{nth($numberList, $i)} { 40 | top: #{math.div(nth($numberList, $i), 16)}rem !important; 41 | } 42 | #{$v}top--#{nth($numberList, $i)} { 43 | top: -#{math.div(nth($numberList, $i), 16)}rem !important; 44 | } 45 | #{$v}right-#{nth($numberList, $i)} { 46 | right: #{math.div(nth($numberList, $i), 16)}rem !important; 47 | } 48 | #{$v}right--#{nth($numberList, $i)} { 49 | right: -#{math.div(nth($numberList, $i), 16)}rem !important; 50 | } 51 | #{$v}bottom-#{nth($numberList, $i)} { 52 | bottom: #{math.div(nth($numberList, $i), 16)}rem !important; 53 | } 54 | #{$v}bottom--#{nth($numberList, $i)} { 55 | bottom: -#{math.div(nth($numberList, $i), 16)}rem !important; 56 | } 57 | } 58 | 59 | #{$v}left-0 { 60 | left: 0 !important; 61 | } 62 | #{$v}top-0 { 63 | top: 0 !important; 64 | } 65 | #{$v}right-0 { 66 | right: 0 !important; 67 | } 68 | #{$v}bottom-0 { 69 | bottom: 0 !important; 70 | } 71 | 72 | /*------------------------------ 73 | * 百分比(percent) 74 | *------------------------------ 75 | */ 76 | $numberList2: 10 20 30 40 50 60 70 80 90 100; 77 | @for $i from 1 through length($numberList2) { 78 | #{$v}left-p-#{nth($numberList2, $i)} { 79 | left: #{nth($numberList2, $i) * 1%} !important; 80 | } 81 | #{$v}left-p--#{nth($numberList2, $i)} { 82 | left: -#{nth($numberList2, $i) * 1%} !important; 83 | } 84 | #{$v}top-p-#{nth($numberList2, $i)} { 85 | top: #{nth($numberList2, $i) * 1%} !important; 86 | } 87 | #{$v}top-p--#{nth($numberList2, $i)} { 88 | top: -#{nth($numberList2, $i) * 1%} !important; 89 | } 90 | #{$v}right-p-#{nth($numberList2, $i)} { 91 | right: #{nth($numberList2, $i) * 1%} !important; 92 | } 93 | #{$v}right-p--#{nth($numberList2, $i)} { 94 | right: -#{nth($numberList2, $i) * 1%} !important; 95 | } 96 | #{$v}bottom-p-#{nth($numberList2, $i)} { 97 | bottom: #{nth($numberList2, $i) * 1%} !important; 98 | } 99 | #{$v}bottom-p--#{nth($numberList2, $i)} { 100 | bottom: -#{nth($numberList2, $i) * 1%} !important; 101 | } 102 | } 103 | 104 | /*------------------------------ 105 | * 位置索引层 106 | *------------------------------ 107 | */ 108 | $numberList3: -1 0 1 2 3 4 5 6 7 8 9 10 100 101 102 103 104 105 106 107 108 109 109 | 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 99999; 110 | @for $i from 1 through length($numberList3) { 111 | #{$v}index-#{nth($numberList3, $i)} { 112 | z-index: #{nth($numberList3, $i)} !important; 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /src/scss/uni/reboot.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 样式重置 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-22 17:56:57 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-08-07 11:24:15 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @charset "UTF-8"; 12 | 13 | ::after, 14 | ::before, 15 | audio, 16 | button, 17 | camera, 18 | checkbox, 19 | cover-image, 20 | cover-view, 21 | form, 22 | icon, 23 | image, 24 | input, 25 | label, 26 | live-player, 27 | live-pusher, 28 | movable-area, 29 | movable-view, 30 | navigator, 31 | picker, 32 | radio, 33 | rich-text, 34 | scroll-view, 35 | swiper, 36 | swiper-item, 37 | text, 38 | textarea, 39 | uni-app, 40 | uni-button, 41 | uni-image, 42 | uni-page, 43 | uni-page-body, 44 | uni-page-wrapper, 45 | uni-view, 46 | video, 47 | view { 48 | margin: 0; 49 | padding: 0; 50 | box-sizing: border-box; 51 | } 52 | 53 | ._optgroup, 54 | ._select, 55 | button, 56 | input, 57 | textarea { 58 | line-height: 1.15; 59 | font-family: inherit; 60 | font-size: 100%; 61 | } 62 | 63 | button { 64 | -webkit-appearance: none; 65 | appearance: none; 66 | border-style: none; 67 | outline: 0; 68 | } 69 | 70 | textarea { 71 | overflow: auto; 72 | vertical-align: top; 73 | resize: vertical; 74 | } 75 | 76 | ._img, 77 | image { 78 | max-width: 100%; 79 | display: block; 80 | position: relative; 81 | border-style: none; 82 | will-change: transform; 83 | } 84 | 85 | div, 86 | article, 87 | aside, 88 | details, 89 | dialog, 90 | figcaption, 91 | figure, 92 | footer, 93 | header, 94 | hgroup, 95 | menu, 96 | main, 97 | nav, 98 | section, 99 | summary { 100 | display: block; 101 | } 102 | b, 103 | strong { 104 | font-weight: 700; 105 | } 106 | audio, 107 | canvas, 108 | output, 109 | progress, 110 | video { 111 | display: inline-block; 112 | vertical-align: baseline; 113 | } 114 | audio:not([controls]) { 115 | display: none; 116 | height: 0; 117 | } 118 | :focus { 119 | outline: 0; 120 | } 121 | [v-cloak] { 122 | display: none !important; 123 | } 124 | ol, 125 | ul { 126 | list-style: none; 127 | } 128 | hr { 129 | height: 0; 130 | overflow: visible; 131 | } 132 | i, 133 | em, 134 | dfn { 135 | font-style: normal; 136 | } 137 | table { 138 | border-collapse: collapse; 139 | border-spacing: 0; 140 | } 141 | caption, 142 | table, 143 | tbody, 144 | td, 145 | tfoot, 146 | th, 147 | thead, 148 | tr { 149 | font-family: inherit; 150 | font-size: 100%; 151 | } 152 | button::after { 153 | border: none; 154 | } 155 | button, 156 | input, 157 | optgroup, 158 | select, 159 | textarea { 160 | line-height: 1.15; 161 | font-family: inherit; 162 | font-size: 100%; 163 | } 164 | button { 165 | appearance: none; 166 | border-style: none; 167 | outline: 0; 168 | } 169 | textarea { 170 | overflow: auto; 171 | vertical-align: top; 172 | resize: vertical; 173 | } 174 | img { 175 | max-width: 100%; 176 | display: block; 177 | position: relative; 178 | border-style: none; 179 | will-change: transform; 180 | } 181 | svg:not(:root) { 182 | overflow: hidden; 183 | } 184 | html { 185 | font-family: sans-serif; 186 | -webkit-text-size-adjust: 100%; 187 | -webkit-tap-highlight-color: transparent; 188 | } 189 | body, 190 | page { 191 | width: 100%; 192 | height: 100%; 193 | font-family: sans-serif; 194 | -webkit-text-size-adjust: 100%; 195 | -webkit-tap-highlight-color: transparent; 196 | } 197 | body, 198 | page { 199 | text-align: left; 200 | color: $color; 201 | font-family: $font-family; 202 | font-size: 28rpx; 203 | font-weight: $font-weight; 204 | line-height: $line-height; 205 | background-color: $bg-color; 206 | } 207 | -------------------------------------------------------------------------------- /src/scss/lite/width.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 宽度样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 14:49:20 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-08-23 20:33:08 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | /*------------------------------ 14 | * 百分比 & vw 15 | *------------------------------ 16 | */ 17 | $numberList: 50 100; 18 | @for $i from 1 through length($numberList) { 19 | #{$v}w-#{nth($numberList, $i)} { 20 | width: #{nth($numberList, $i) * 1%} !important; 21 | } 22 | #{$v}w-min-#{nth($numberList, $i)} { 23 | min-width: #{nth($numberList, $i) * 1%} !important; 24 | } 25 | #{$v}w-max-#{nth($numberList, $i)} { 26 | max-width: #{nth($numberList, $i) * 1%} !important; 27 | } 28 | #{$v}vw-#{nth($numberList, $i)} { 29 | width: #{nth($numberList, $i)}vw !important; 30 | } 31 | } 32 | 33 | /*------------------------------ 34 | * 像素 35 | *------------------------------ 36 | */ 37 | $numberList2: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 38 | 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 39 | 80 82 84 85 86 88 90 92 94 95 96 98 100 0; 40 | @for $i from 1 through length($numberList2) { 41 | #{$v}w-px-#{nth($numberList2, $i)} { 42 | width: #{math.div(nth($numberList2, $i), 16)}rem !important; 43 | } 44 | #{$v}w-min-px-#{nth($numberList2, $i)} { 45 | min-width: #{math.div(nth($numberList2, $i), 16)}rem !important; 46 | } 47 | #{$v}w-max-px-#{nth($numberList2, $i)} { 48 | max-width: #{math.div(nth($numberList2, $i), 16)}rem !important; 49 | } 50 | #{$v}w-calc-#{nth($numberList2, $i)} { 51 | width: calc(100% - #{math.div(nth($numberList2, $i), 16)}rem) !important; 52 | } 53 | #{$v}vw-calc-#{nth($numberList2, $i)} { 54 | width: calc(100vw - #{math.div(nth($numberList2, $i), 16)}rem) !important; 55 | } 56 | } 57 | 58 | // 媒体设备 59 | @each $device, $value in $media-min-width { 60 | @include media-min($device) { 61 | @for $i from 1 through length($numberList) { 62 | #{$v}w-#{$device}-#{nth($numberList, $i)} { 63 | width: #{nth($numberList, $i) * 1%} !important; 64 | } 65 | #{$v}w-min-#{$device}-#{nth($numberList, $i)} { 66 | min-width: #{nth($numberList, $i) * 1%} !important; 67 | } 68 | #{$v}w-max-#{$device}-#{nth($numberList, $i)} { 69 | max-width: #{nth($numberList, $i) * 1%} !important; 70 | } 71 | #{$v}vw-#{$device}-#{nth($numberList, $i)} { 72 | width: #{nth($numberList, $i)}vw !important; 73 | } 74 | } 75 | @for $i from 1 through length($numberList2) { 76 | #{$v}w-px-#{$device}-#{nth($numberList2, $i)} { 77 | width: #{math.div(nth($numberList2, $i), 16)}rem !important; 78 | } 79 | #{$v}w-min-px-#{$device}-#{nth($numberList2, $i)} { 80 | min-width: #{math.div(nth($numberList2, $i), 16)}rem !important; 81 | } 82 | #{$v}w-max-px-#{$device}-#{nth($numberList2, $i)} { 83 | max-width: #{math.div(nth($numberList2, $i), 16)}rem !important; 84 | } 85 | #{$v}w-calc-#{$device}-#{nth($numberList2, $i)} { 86 | width: calc( 87 | 100% - #{math.div(nth($numberList2, $i), 16)}rem 88 | ) !important; 89 | } 90 | #{$v}vw-calc-#{$device}-#{nth($numberList2, $i)} { 91 | width: calc( 92 | 100vw - #{math.div(nth($numberList2, $i), 16)}rem 93 | ) !important; 94 | } 95 | } 96 | } 97 | } 98 | 99 | /*------------------------------ 100 | * 其他 101 | *------------------------------ 102 | */ 103 | #{$v}w-0 { 104 | width: 0 !important; 105 | } 106 | #{$v}w-atuo { 107 | width: auto !important; 108 | } 109 | #{$v}w-min-auto { 110 | min-width: auto !important; 111 | } 112 | #{$v}w-max-auto { 113 | max-width: auto !important; 114 | } 115 | -------------------------------------------------------------------------------- /src/scss/lite/height.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 高度样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 14:36:17 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-08-23 20:33:15 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | /*------------------------------ 14 | * 百分比 & vh 15 | *------------------------------ 16 | */ 17 | $numberList: 50 100; 18 | @for $i from 1 through length($numberList) { 19 | #{$v}h-#{nth($numberList, $i)} { 20 | height: #{nth($numberList, $i) * 1%} !important; 21 | } 22 | #{$v}h-min-#{nth($numberList, $i)} { 23 | min-height: #{nth($numberList, $i) * 1%} !important; 24 | } 25 | #{$v}h-max-#{nth($numberList, $i)} { 26 | max-height: #{nth($numberList, $i) * 1%} !important; 27 | } 28 | #{$v}vh-#{nth($numberList, $i)} { 29 | height: #{nth($numberList, $i)}vh !important; 30 | } 31 | } 32 | 33 | /*------------------------------ 34 | * 像素 35 | *------------------------------ 36 | */ 37 | $numberList2: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 38 | 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 39 | 80 82 84 85 86 88 90 92 94 95 96 98 100 0; 40 | @for $i from 1 through length($numberList2) { 41 | #{$v}h-px-#{nth($numberList2, $i)} { 42 | height: #{math.div(nth($numberList2, $i), 16)}rem !important; 43 | } 44 | #{$v}h-min-px-#{nth($numberList2, $i)} { 45 | min-height: #{math.div(nth($numberList2, $i), 16)}rem !important; 46 | } 47 | #{$v}h-max-px-#{nth($numberList2, $i)} { 48 | max-height: #{math.div(nth($numberList2, $i), 16)}rem !important; 49 | } 50 | #{$v}h-calc-#{nth($numberList2, $i)} { 51 | height: calc(100% - #{math.div(nth($numberList2, $i), 16)}rem) !important; 52 | } 53 | #{$v}vh-calc-#{nth($numberList2, $i)} { 54 | height: calc(100vh - #{math.div(nth($numberList2, $i), 16)}rem) !important; 55 | } 56 | } 57 | 58 | // 媒体设备 59 | @each $device, $value in $media-min-width { 60 | @include media-min($device) { 61 | @for $i from 1 through length($numberList) { 62 | #{$v}h-#{$device}-#{nth($numberList, $i)} { 63 | height: #{nth($numberList, $i) * 1%} !important; 64 | } 65 | #{$v}h-min-#{$device}-#{nth($numberList, $i)} { 66 | min-height: #{nth($numberList, $i) * 1%} !important; 67 | } 68 | #{$v}h-max-#{$device}-#{nth($numberList, $i)} { 69 | max-height: #{nth($numberList, $i) * 1%} !important; 70 | } 71 | #{$v}vh-#{$device}-#{nth($numberList, $i)} { 72 | height: #{nth($numberList, $i)}vh !important; 73 | } 74 | } 75 | @for $i from 1 through length($numberList2) { 76 | #{$v}h-px-#{$device}-#{nth($numberList2, $i)} { 77 | height: #{math.div(nth($numberList2, $i), 16)}rem !important; 78 | } 79 | #{$v}h-min-px-#{$device}-#{nth($numberList2, $i)} { 80 | min-height: #{math.div(nth($numberList2, $i), 16)}rem !important; 81 | } 82 | #{$v}h-max-px-#{$device}-#{nth($numberList2, $i)} { 83 | max-height: #{math.div(nth($numberList2, $i), 16)}rem !important; 84 | } 85 | #{$v}h-calc-#{$device}-#{nth($numberList2, $i)} { 86 | height: calc( 87 | 100% - #{math.div(nth($numberList2, $i), 16)}rem 88 | ) !important; 89 | } 90 | #{$v}vh-calc-#{$device}-#{nth($numberList2, $i)} { 91 | height: calc( 92 | 100vh - #{math.div(nth($numberList2, $i), 16)}rem 93 | ) !important; 94 | } 95 | } 96 | } 97 | } 98 | 99 | /*------------------------------ 100 | * 其他 101 | *------------------------------ 102 | */ 103 | #{$v}h-0 { 104 | height: 0 !important; 105 | } 106 | #{$v}h-auto { 107 | height: auto !important; 108 | } 109 | #{$v}h-min-auto { 110 | min-height: auto !important; 111 | } 112 | #{$v}h-max-auto { 113 | max-height: auto !important; 114 | } 115 | -------------------------------------------------------------------------------- /src/scss/shadow.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 阴影样式 3 | * @Author: linpan 4 | * @Date: 2022-11-23 16:27:07 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:31:53 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | /*------------------------------ 14 | * 元素阴影 15 | *------------------------------ 16 | */ 17 | $numberList: 1 2 3 4 5 6 7 8 9 10 15 20 25 30; 18 | @for $i from 1 through length($numberList) { 19 | #{$v}bs-#{nth($numberList, $i)} { 20 | box-shadow: 0 0 #{math.div(nth($numberList, $i), 16)}rem rgba(0, 0, 0, 0.1); 21 | } 22 | } 23 | @for $i from 1 through length($numberList) { 24 | #{$v}bs-1-#{nth($numberList, $i)} { 25 | box-shadow: 0 26 | 0.0625rem 27 | #{math.div(nth($numberList, $i), 16)}rem 28 | rgba(0, 0, 0, 0.1); 29 | } 30 | #{$v}bs-2-#{nth($numberList, $i)} { 31 | box-shadow: 0 32 | 0.125rem 33 | #{math.div(nth($numberList, $i), 16)}rem 34 | rgba(0, 0, 0, 0.1); 35 | } 36 | #{$v}bs-3-#{nth($numberList, $i)} { 37 | box-shadow: 0 38 | 0.1875rem 39 | #{math.div(nth($numberList, $i), 16)}rem 40 | rgba(0, 0, 0, 0.1); 41 | } 42 | #{$v}bs-4-#{nth($numberList, $i)} { 43 | box-shadow: 0 44 | 0.25rem 45 | #{math.div(nth($numberList, $i), 16)}rem 46 | rgba(0, 0, 0, 0.1); 47 | } 48 | #{$v}bs-5-#{nth($numberList, $i)} { 49 | box-shadow: 0 50 | 0.3125rem 51 | #{math.div(nth($numberList, $i), 16)}rem 52 | rgba(0, 0, 0, 0.1); 53 | } 54 | #{$v}bs-6-#{nth($numberList, $i)} { 55 | box-shadow: 0 56 | 0.375rem 57 | #{math.div(nth($numberList, $i), 16)}rem 58 | rgba(0, 0, 0, 0.1); 59 | } 60 | #{$v}bs-7-#{nth($numberList, $i)} { 61 | box-shadow: 0 62 | 0.4375rem 63 | #{math.div(nth($numberList, $i), 16)}rem 64 | rgba(0, 0, 0, 0.1); 65 | } 66 | #{$v}bs-8-#{nth($numberList, $i)} { 67 | box-shadow: 0 68 | 0.5rem 69 | #{math.div(nth($numberList, $i), 16)}rem 70 | rgba(0, 0, 0, 0.1); 71 | } 72 | #{$v}bs-9-#{nth($numberList, $i)} { 73 | box-shadow: 0 74 | 0.5625rem 75 | #{math.div(nth($numberList, $i), 16)}rem 76 | rgba(0, 0, 0, 0.1); 77 | } 78 | #{$v}bs-10-#{nth($numberList, $i)} { 79 | box-shadow: 0 80 | 0.625rem 81 | #{math.div(nth($numberList, $i), 16)}rem 82 | rgba(0, 0, 0, 0.1); 83 | } 84 | } 85 | 86 | #{$v}bs-none { 87 | box-shadow: none !important; 88 | } 89 | 90 | /*------------------------------ 91 | * 文本阴影 92 | *------------------------------ 93 | */ 94 | $numberList2: 1 2 3 4 5; 95 | @for $i from 1 through length($numberList2) { 96 | #{$v}ts-#{nth($numberList2, $i)} { 97 | text-shadow: 0 98 | 0 99 | #{math.div(nth($numberList2, $i), 16)}rem 100 | rgba(0, 0, 0, 0.3); 101 | } 102 | } 103 | @for $i from 1 through length($numberList2) { 104 | #{$v}ts-1-#{nth($numberList2, $i)} { 105 | text-shadow: 0 106 | 0.0625rem 107 | #{math.div(nth($numberList2, $i), 16)}rem 108 | rgba(0, 0, 0, 0.3); 109 | } 110 | #{$v}ts-2-#{nth($numberList2, $i)} { 111 | text-shadow: 0 112 | 0.125rem 113 | #{math.div(nth($numberList2, $i), 16)}rem 114 | rgba(0, 0, 0, 0.3); 115 | } 116 | #{$v}ts-3-#{nth($numberList2, $i)} { 117 | text-shadow: 0 118 | 0.1875rem 119 | #{math.div(nth($numberList2, $i), 16)}rem 120 | rgba(0, 0, 0, 0.3); 121 | } 122 | #{$v}ts-4-#{nth($numberList2, $i)} { 123 | text-shadow: 0 124 | 0.25rem 125 | #{math.div(nth($numberList2, $i), 16)}rem 126 | rgba(0, 0, 0, 0.3); 127 | } 128 | #{$v}ts-5-#{nth($numberList2, $i)} { 129 | text-shadow: 0 130 | 0.3125rem 131 | #{math.div(nth($numberList2, $i), 16)}rem 132 | rgba(0, 0, 0, 0.3); 133 | } 134 | } 135 | 136 | #{$v}ts-none { 137 | text-shadow: none !important; 138 | } 139 | -------------------------------------------------------------------------------- /src/scss/uni/flex.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: flex盒子样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 11:08:26 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-09-22 16:03:17 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | #{$v}box { 14 | display: flex; 15 | flex-wrap: wrap; 16 | flex-direction: row; 17 | box-sizing: border-box; 18 | 19 | &.inline { 20 | display: inline-flex; 21 | } 22 | &.nowrap { 23 | flex-wrap: nowrap; 24 | } 25 | &.wrap-reverse { 26 | flex-wrap: wrap-reverse; 27 | } 28 | &.row-reverse { 29 | flex-direction: row-reverse; 30 | } 31 | &.column { 32 | flex-direction: column; 33 | } 34 | &.column-reverse { 35 | flex-direction: column-reverse; 36 | } 37 | &.justify-start { 38 | justify-content: flex-start; 39 | } 40 | &.justify-end { 41 | justify-content: flex-end; 42 | } 43 | &.justify-center { 44 | justify-content: center; 45 | } 46 | &.justify-between { 47 | justify-content: space-between; 48 | } 49 | &.justify-around { 50 | justify-content: space-around; 51 | } 52 | &.items-start { 53 | align-items: flex-start; 54 | } 55 | &.items-end { 56 | align-items: flex-end; 57 | } 58 | &.items-center { 59 | align-items: center; 60 | } 61 | } 62 | 63 | // 不缩小适应 64 | #{$v}flex-shrink { 65 | flex-shrink: 0; 66 | } 67 | 68 | #{$v}col, 69 | #{$v}flex, 70 | [class*=" #{$v2}col-"], 71 | [class^="#{$v2}col-"], 72 | [class*=" #{$v2}flex-"], 73 | [class^="#{$v2}flex-"] { 74 | width: 100%; 75 | min-height: 2rpx; 76 | position: relative; 77 | box-sizing: border-box; 78 | } 79 | 80 | #{$v}col, 81 | #{$v}flex { 82 | max-width: 100%; 83 | flex-basis: 0; 84 | flex-grow: 1; 85 | 86 | &-auto { 87 | width: auto; 88 | max-width: none; 89 | flex: 0 0 auto; 90 | } 91 | } 92 | 93 | // flex 94 | @for $i from 1 through 24 { 95 | #{$v}col-#{$i} { 96 | max-width: math.div(100%, 24) * $i; 97 | flex: 0 0 math.div(100%, 24) * $i; 98 | } 99 | #{$v}flex-#{$i} { 100 | max-width: math.div(100%, $i); 101 | flex: 0 0 math.div(100%, $i); 102 | } 103 | } 104 | 105 | // 列偏移 106 | @for $i from 1 through 23 { 107 | #{$v}offset-#{$i} { 108 | margin-left: math.div(100%, 24) * $i; 109 | } 110 | } 111 | 112 | // 间隔 113 | #{$v}box { 114 | @for $i from 1 through 20 { 115 | // 左右间隔 116 | &.lr-#{$i} { 117 | margin-left: -#{$i * 2}rpx; 118 | margin-right: -#{$i * 2}rpx; 119 | #{$v}col, 120 | #{$v}flex, 121 | [class*=" #{$v2}col-"], 122 | [class^="#{$v2}col-"], 123 | [class*=" #{$v2}flex-"], 124 | [class^="#{$v2}flex-"] { 125 | padding-left: #{$i * 2}rpx; 126 | padding-right: #{$i * 2}rpx; 127 | } 128 | } 129 | // 上下间隔 130 | &.tb-#{$i} { 131 | margin-top: -#{$i * 2}rpx; 132 | margin-bottom: -#{$i * 2}rpx; 133 | #{$v}col, 134 | #{$v}flex, 135 | [class*=" #{$v2}col-"], 136 | [class^="#{$v2}col-"], 137 | [class*=" #{$v2}flex-"], 138 | [class^="#{$v2}flex-"] { 139 | padding-top: #{$i * 2}rpx; 140 | padding-bottom: #{$i * 2}rpx; 141 | } 142 | } 143 | } 144 | 145 | &.lr-0 { 146 | margin-left: 0; 147 | margin-right: 0; 148 | #{$v}col, 149 | #{$v}flex, 150 | [class*=" #{$v2}col-"], 151 | [class^="#{$v2}col-"], 152 | [class*=" #{$v2}flex-"], 153 | [class^="#{$v2}flex-"] { 154 | padding-left: 0; 155 | padding-right: 0; 156 | } 157 | } 158 | 159 | &.tb-0 { 160 | margin-top: 0; 161 | margin-bottom: 0; 162 | #{$v}col, 163 | #{$v}flex, 164 | [class*=" #{$v2}col-"], 165 | [class^="#{$v2}col-"], 166 | [class*=" #{$v2}flex-"], 167 | [class^="#{$v2}flex-"] { 168 | padding-top: 0; 169 | padding-bottom: 0; 170 | } 171 | } 172 | } 173 | -------------------------------------------------------------------------------- /src/scss/mobile/width.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 宽度样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 14:49:20 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-08-23 20:32:28 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | /*------------------------------ 14 | * 百分比 & vw 15 | *------------------------------ 16 | */ 17 | $numberList: 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100; 18 | @for $i from 1 through length($numberList) { 19 | #{$v}w-#{nth($numberList, $i)} { 20 | width: #{nth($numberList, $i) * 1%} !important; 21 | } 22 | #{$v}w-min-#{nth($numberList, $i)} { 23 | min-width: #{nth($numberList, $i) * 1%} !important; 24 | } 25 | #{$v}w-max-#{nth($numberList, $i)} { 26 | max-width: #{nth($numberList, $i) * 1%} !important; 27 | } 28 | #{$v}vw-#{nth($numberList, $i)} { 29 | width: #{nth($numberList, $i)}vw !important; 30 | } 31 | } 32 | 33 | /*------------------------------ 34 | * 像素 35 | *------------------------------ 36 | */ 37 | $numberList2: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 38 | 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 39 | 80 82 84 85 86 88 90 92 94 95 96 98 100 110 120 130 140 150 160 170 180 190 40 | 200 220 240 250 260 280 300 320 340 350 360 380 400 420 440 450 460 480 500 41 | 520 540 550 560 580 600 620 640 650 660 680 700 720 740 750 0; 42 | @for $i from 1 through length($numberList2) { 43 | #{$v}w-px-#{nth($numberList2, $i)} { 44 | width: #{math.div(nth($numberList2, $i), 16)}rem !important; 45 | } 46 | #{$v}w-min-px-#{nth($numberList2, $i)} { 47 | min-width: #{math.div(nth($numberList2, $i), 16)}rem !important; 48 | } 49 | #{$v}w-max-px-#{nth($numberList2, $i)} { 50 | max-width: #{math.div(nth($numberList2, $i), 16)}rem !important; 51 | } 52 | #{$v}w-calc-#{nth($numberList2, $i)} { 53 | width: calc(100% - #{math.div(nth($numberList2, $i), 16)}rem) !important; 54 | } 55 | #{$v}vw-calc-#{nth($numberList2, $i)} { 56 | width: calc(100vw - #{math.div(nth($numberList2, $i), 16)}rem) !important; 57 | } 58 | } 59 | 60 | // // 媒体设备 61 | // @each $device, $value in $media-min-width { 62 | // @include media-min($device) { 63 | // @for $i from 1 through length($numberList) { 64 | // #{$v}w-#{$device}-#{nth($numberList, $i)} { 65 | // width: #{nth($numberList, $i) * 1%}; 66 | // } 67 | // #{$v}w-min-#{$device}-#{nth($numberList, $i)} { 68 | // min-width: #{nth($numberList, $i) * 1%}; 69 | // } 70 | // #{$v}w-max-#{$device}-#{nth($numberList, $i)} { 71 | // max-width: #{nth($numberList, $i) * 1%}; 72 | // } 73 | // #{$v}vw-#{$device}-#{nth($numberList, $i)} { 74 | // width: #{nth($numberList, $i)}vw; 75 | // } 76 | // } 77 | // @for $i from 1 through length($numberList2) { 78 | // #{$v}w-px-#{$device}-#{nth($numberList2, $i)} { 79 | // width: #{math.div(nth($numberList2, $i), 16)}rem; 80 | // } 81 | // #{$v}w-min-px-#{$device}-#{nth($numberList2, $i)} { 82 | // min-width: #{math.div(nth($numberList2, $i), 16)}rem; 83 | // } 84 | // #{$v}w-max-px-#{$device}-#{nth($numberList2, $i)} { 85 | // max-width: #{math.div(nth($numberList2, $i), 16)}rem; 86 | // } 87 | // #{$v}w-calc-#{$device}-#{nth($numberList2, $i)} { 88 | // width: calc(100% - #{math.div(nth($numberList2, $i), 16)}rem); 89 | // } 90 | // #{$v}vw-calc-#{$device}-#{nth($numberList2, $i)} { 91 | // width: calc(100vw - #{math.div(nth($numberList2, $i), 16)}rem); 92 | // } 93 | // } 94 | // } 95 | // } 96 | 97 | /*------------------------------ 98 | * 其他 99 | *------------------------------ 100 | */ 101 | #{$v}w-0 { 102 | width: 0 !important; 103 | } 104 | #{$v}w-atuo { 105 | width: auto !important; 106 | } 107 | #{$v}w-min-auto { 108 | min-width: auto !important; 109 | } 110 | #{$v}w-max-auto { 111 | max-width: auto !important; 112 | } 113 | -------------------------------------------------------------------------------- /src/scss/mobile/height.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 高度样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 14:36:17 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:34:56 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | /*------------------------------ 14 | * 百分比 & vh 15 | *------------------------------ 16 | */ 17 | $numberList: 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100; 18 | @for $i from 1 through length($numberList) { 19 | #{$v}h-#{nth($numberList, $i)} { 20 | height: #{nth($numberList, $i) * 1%} !important; 21 | } 22 | #{$v}h-min-#{nth($numberList, $i)} { 23 | min-height: #{nth($numberList, $i) * 1%} !important; 24 | } 25 | #{$v}h-max-#{nth($numberList, $i)} { 26 | max-height: #{nth($numberList, $i) * 1%} !important; 27 | } 28 | #{$v}vh-#{nth($numberList, $i)} { 29 | height: #{nth($numberList, $i)}vh !important; 30 | } 31 | } 32 | 33 | /*------------------------------ 34 | * 像素 35 | *------------------------------ 36 | */ 37 | $numberList2: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 38 | 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 39 | 80 82 84 85 86 88 90 92 94 95 96 98 100 110 120 130 140 150 160 170 180 190 40 | 200 220 240 250 260 280 300 320 340 350 360 380 400 420 440 450 460 480 500 41 | 520 540 550 560 580 600 620 640 650 660 680 700 720 740 750 0; 42 | @for $i from 1 through length($numberList2) { 43 | #{$v}h-px-#{nth($numberList2, $i)} { 44 | height: #{math.div(nth($numberList2, $i), 16)}rem !important; 45 | } 46 | #{$v}h-min-px-#{nth($numberList2, $i)} { 47 | min-height: #{math.div(nth($numberList2, $i), 16)}rem !important; 48 | } 49 | #{$v}h-max-px-#{nth($numberList2, $i)} { 50 | max-height: #{math.div(nth($numberList2, $i), 16)}rem !important; 51 | } 52 | #{$v}h-calc-#{nth($numberList2, $i)} { 53 | height: calc(100% - #{math.div(nth($numberList2, $i), 16)}rem) !important; 54 | } 55 | #{$v}vh-calc-#{nth($numberList2, $i)} { 56 | height: calc(100vh - #{math.div(nth($numberList2, $i), 16)}rem) !important; 57 | } 58 | } 59 | 60 | // // 媒体设备 61 | // @each $device, $value in $media-min-width { 62 | // @include media-min($device) { 63 | // @for $i from 1 through length($numberList) { 64 | // #{$v}h-#{$device}-#{nth($numberList, $i)} { 65 | // height: #{nth($numberList, $i) * 1%}; 66 | // } 67 | // #{$v}h-min-#{$device}-#{nth($numberList, $i)} { 68 | // min-height: #{nth($numberList, $i) * 1%}; 69 | // } 70 | // #{$v}h-max-#{$device}-#{nth($numberList, $i)} { 71 | // max-height: #{nth($numberList, $i) * 1%}; 72 | // } 73 | // #{$v}vh-#{$device}-#{nth($numberList, $i)} { 74 | // height: #{nth($numberList, $i)}vh; 75 | // } 76 | // } 77 | // @for $i from 1 through length($numberList2) { 78 | // #{$v}h-px-#{$device}-#{nth($numberList2, $i)} { 79 | // height: #{math.div(nth($numberList2, $i), 16)}rem; 80 | // } 81 | // #{$v}h-min-px-#{$device}-#{nth($numberList2, $i)} { 82 | // min-height: #{math.div(nth($numberList2, $i), 16)}rem; 83 | // } 84 | // #{$v}h-max-px-#{$device}-#{nth($numberList2, $i)} { 85 | // max-height: #{math.div(nth($numberList2, $i), 16)}rem; 86 | // } 87 | // #{$v}h-calc-#{$device}-#{nth($numberList2, $i)} { 88 | // height: calc(100% - #{math.div(nth($numberList2, $i), 16)}rem); 89 | // } 90 | // #{$v}vh-calc-#{$device}-#{nth($numberList2, $i)} { 91 | // height: calc(100vh - #{math.div(nth($numberList2, $i), 16)}rem); 92 | // } 93 | // } 94 | // } 95 | // } 96 | 97 | /*------------------------------ 98 | * 其他 99 | *------------------------------ 100 | */ 101 | #{$v}h-0 { 102 | height: 0 !important; 103 | } 104 | #{$v}h-auto { 105 | height: auto !important; 106 | } 107 | #{$v}h-min-auto { 108 | min-height: auto !important; 109 | } 110 | #{$v}h-max-auto { 111 | max-height: auto !important; 112 | } 113 | -------------------------------------------------------------------------------- /src/scss/width.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 宽度样式 3 | * @Author: linpan 4 | * @Date: 2022-11-23 14:49:20 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-08-23 20:31:58 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | /*------------------------------ 14 | * 百分比 & vw 15 | *------------------------------ 16 | */ 17 | $numberList: 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100; 18 | @for $i from 1 through length($numberList) { 19 | #{$v}w-#{nth($numberList, $i)} { 20 | width: #{nth($numberList, $i) * 1%} !important; 21 | } 22 | #{$v}w-min-#{nth($numberList, $i)} { 23 | min-width: #{nth($numberList, $i) * 1%} !important; 24 | } 25 | #{$v}w-max-#{nth($numberList, $i)} { 26 | max-width: #{nth($numberList, $i) * 1%} !important; 27 | } 28 | #{$v}vw-#{nth($numberList, $i)} { 29 | width: #{nth($numberList, $i)}vw !important; 30 | } 31 | } 32 | 33 | /*------------------------------ 34 | * 像素 35 | *------------------------------ 36 | */ 37 | $numberList2: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 38 | 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 39 | 80 82 84 85 86 88 90 92 94 95 96 98 100 110 120 130 140 150 160 170 180 190 40 | 200 220 240 250 260 280 300 320 340 350 360 380 400 420 440 450 460 480 500 41 | 520 540 550 560 580 600 620 640 650 660 680 700 720 740 750 0; 42 | @for $i from 1 through length($numberList2) { 43 | #{$v}w-px-#{nth($numberList2, $i)} { 44 | width: #{math.div(nth($numberList2, $i), 16)}rem !important; 45 | } 46 | #{$v}w-min-px-#{nth($numberList2, $i)} { 47 | min-width: #{math.div(nth($numberList2, $i), 16)}rem !important; 48 | } 49 | #{$v}w-max-px-#{nth($numberList2, $i)} { 50 | max-width: #{math.div(nth($numberList2, $i), 16)}rem !important; 51 | } 52 | #{$v}w-calc-#{nth($numberList2, $i)} { 53 | width: calc(100% - #{math.div(nth($numberList2, $i), 16)}rem) !important; 54 | } 55 | #{$v}vw-calc-#{nth($numberList2, $i)} { 56 | width: calc(100vw - #{math.div(nth($numberList2, $i), 16)}rem) !important; 57 | } 58 | } 59 | 60 | // 媒体设备 61 | @each $device, $value in $media-min-width { 62 | @include media-min($device) { 63 | @for $i from 1 through length($numberList) { 64 | #{$v}w-#{$device}-#{nth($numberList, $i)} { 65 | width: #{nth($numberList, $i) * 1%} !important; 66 | } 67 | #{$v}w-min-#{$device}-#{nth($numberList, $i)} { 68 | min-width: #{nth($numberList, $i) * 1%} !important; 69 | } 70 | #{$v}w-max-#{$device}-#{nth($numberList, $i)} { 71 | max-width: #{nth($numberList, $i) * 1%} !important; 72 | } 73 | #{$v}vw-#{$device}-#{nth($numberList, $i)} { 74 | width: #{nth($numberList, $i)}vw !important; 75 | } 76 | } 77 | @for $i from 1 through length($numberList2) { 78 | #{$v}w-px-#{$device}-#{nth($numberList2, $i)} { 79 | width: #{math.div(nth($numberList2, $i), 16)}rem !important; 80 | } 81 | #{$v}w-min-px-#{$device}-#{nth($numberList2, $i)} { 82 | min-width: #{math.div(nth($numberList2, $i), 16)}rem !important; 83 | } 84 | #{$v}w-max-px-#{$device}-#{nth($numberList2, $i)} { 85 | max-width: #{math.div(nth($numberList2, $i), 16)}rem !important; 86 | } 87 | #{$v}w-calc-#{$device}-#{nth($numberList2, $i)} { 88 | width: calc( 89 | 100% - #{math.div(nth($numberList2, $i), 16)}rem 90 | ) !important; 91 | } 92 | #{$v}vw-calc-#{$device}-#{nth($numberList2, $i)} { 93 | width: calc( 94 | 100vw - #{math.div(nth($numberList2, $i), 16)}rem 95 | ) !important; 96 | } 97 | } 98 | } 99 | } 100 | 101 | /*------------------------------ 102 | * 其他 103 | *------------------------------ 104 | */ 105 | #{$v}w-0 { 106 | width: 0 !important; 107 | } 108 | #{$v}w-atuo { 109 | width: auto !important; 110 | } 111 | #{$v}w-min-auto { 112 | min-width: auto !important; 113 | } 114 | #{$v}w-max-auto { 115 | max-width: auto !important; 116 | } 117 | -------------------------------------------------------------------------------- /src/scss/height.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 高度样式 3 | * @Author: linpan 4 | * @Date: 2022-11-23 14:36:17 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-08-23 20:31:53 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | /*------------------------------ 14 | * 百分比 & vh 15 | *------------------------------ 16 | */ 17 | $numberList: 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100; 18 | @for $i from 1 through length($numberList) { 19 | #{$v}h-#{nth($numberList, $i)} { 20 | height: #{nth($numberList, $i) * 1%} !important; 21 | } 22 | #{$v}h-min-#{nth($numberList, $i)} { 23 | min-height: #{nth($numberList, $i) * 1%} !important; 24 | } 25 | #{$v}h-max-#{nth($numberList, $i)} { 26 | max-height: #{nth($numberList, $i) * 1%} !important; 27 | } 28 | #{$v}vh-#{nth($numberList, $i)} { 29 | height: #{nth($numberList, $i)}vh !important; 30 | } 31 | } 32 | 33 | /*------------------------------ 34 | * 像素 35 | *------------------------------ 36 | */ 37 | $numberList2: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 38 | 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 39 | 80 82 84 85 86 88 90 92 94 95 96 98 100 110 120 130 140 150 160 170 180 190 40 | 200 220 240 250 260 280 300 320 340 350 360 380 400 420 440 450 460 480 500 41 | 520 540 550 560 580 600 620 640 650 660 680 700 720 740 750 0; 42 | @for $i from 1 through length($numberList2) { 43 | #{$v}h-px-#{nth($numberList2, $i)} { 44 | height: #{math.div(nth($numberList2, $i), 16)}rem !important; 45 | } 46 | #{$v}h-min-px-#{nth($numberList2, $i)} { 47 | min-height: #{math.div(nth($numberList2, $i), 16)}rem !important; 48 | } 49 | #{$v}h-max-px-#{nth($numberList2, $i)} { 50 | max-height: #{math.div(nth($numberList2, $i), 16)}rem !important; 51 | } 52 | #{$v}h-calc-#{nth($numberList2, $i)} { 53 | height: calc(100% - #{math.div(nth($numberList2, $i), 16)}rem) !important; 54 | } 55 | #{$v}vh-calc-#{nth($numberList2, $i)} { 56 | height: calc(100vh - #{math.div(nth($numberList2, $i), 16)}rem) !important; 57 | } 58 | } 59 | 60 | // 媒体设备 61 | @each $device, $value in $media-min-width { 62 | @include media-min($device) { 63 | @for $i from 1 through length($numberList) { 64 | #{$v}h-#{$device}-#{nth($numberList, $i)} { 65 | height: #{nth($numberList, $i) * 1%} !important; 66 | } 67 | #{$v}h-min-#{$device}-#{nth($numberList, $i)} { 68 | min-height: #{nth($numberList, $i) * 1%} !important; 69 | } 70 | #{$v}h-max-#{$device}-#{nth($numberList, $i)} { 71 | max-height: #{nth($numberList, $i) * 1%} !important; 72 | } 73 | #{$v}vh-#{$device}-#{nth($numberList, $i)} { 74 | height: #{nth($numberList, $i)}vh !important; 75 | } 76 | } 77 | @for $i from 1 through length($numberList2) { 78 | #{$v}h-px-#{$device}-#{nth($numberList2, $i)} { 79 | height: #{math.div(nth($numberList2, $i), 16)}rem !important; 80 | } 81 | #{$v}h-min-px-#{$device}-#{nth($numberList2, $i)} { 82 | min-height: #{math.div(nth($numberList2, $i), 16)}rem !important; 83 | } 84 | #{$v}h-max-px-#{$device}-#{nth($numberList2, $i)} { 85 | max-height: #{math.div(nth($numberList2, $i), 16)}rem !important; 86 | } 87 | #{$v}h-calc-#{$device}-#{nth($numberList2, $i)} { 88 | height: calc( 89 | 100% - #{math.div(nth($numberList2, $i), 16)}rem 90 | ) !important; 91 | } 92 | #{$v}vh-calc-#{$device}-#{nth($numberList2, $i)} { 93 | height: calc( 94 | 100vh - #{math.div(nth($numberList2, $i), 16)}rem 95 | ) !important; 96 | } 97 | } 98 | } 99 | } 100 | 101 | /*------------------------------ 102 | * 其他 103 | *------------------------------ 104 | */ 105 | #{$v}h-0 { 106 | height: 0 !important; 107 | } 108 | #{$v}h-auto { 109 | height: auto !important; 110 | } 111 | #{$v}h-min-auto { 112 | min-height: auto !important; 113 | } 114 | #{$v}h-max-auto { 115 | max-height: auto !important; 116 | } 117 | -------------------------------------------------------------------------------- /packages/lib/rotate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";/*! 2 | * @Description: Vusui-css CSS样式库 3 | * @Author: linpan 4 | * @Date: 2022-11-22 17:39:35 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:28:50 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */.vus-rotate-45{transform:rotate(45deg)}.vus-rotate--45{transform:rotate(-45deg)}.vus-rotate-90{transform:rotate(90deg)}.vus-rotate--90{transform:rotate(-90deg)}.vus-rotate-135{transform:rotate(135deg)}.vus-rotate--135{transform:rotate(-135deg)}.vus-rotate-180{transform:rotate(180deg)}.vus-rotate--180{transform:rotate(-180deg)}.vus-rotate-225{transform:rotate(225deg)}.vus-rotate--225{transform:rotate(-225deg)}.vus-rotate-270{transform:rotate(270deg)}.vus-rotate--270{transform:rotate(-270deg)}.vus-rotate-315{transform:rotate(315deg)}.vus-rotate--315{transform:rotate(-315deg)}.vus-rotate-360{transform:rotate(360deg)}.vus-rotate--360{transform:rotate(-360deg)}@media (min-width: 576px){.vus-rotate-xs-45{transform:rotate(45deg)}.vus-rotate-xs--45{transform:rotate(-45deg)}.vus-rotate-xs-90{transform:rotate(90deg)}.vus-rotate-xs--90{transform:rotate(-90deg)}.vus-rotate-xs-135{transform:rotate(135deg)}.vus-rotate-xs--135{transform:rotate(-135deg)}.vus-rotate-xs-180{transform:rotate(180deg)}.vus-rotate-xs--180{transform:rotate(-180deg)}.vus-rotate-xs-225{transform:rotate(225deg)}.vus-rotate-xs--225{transform:rotate(-225deg)}.vus-rotate-xs-270{transform:rotate(270deg)}.vus-rotate-xs--270{transform:rotate(-270deg)}.vus-rotate-xs-315{transform:rotate(315deg)}.vus-rotate-xs--315{transform:rotate(-315deg)}.vus-rotate-xs-360{transform:rotate(360deg)}.vus-rotate-xs--360{transform:rotate(-360deg)}}@media (min-width: 768px){.vus-rotate-sm-45{transform:rotate(45deg)}.vus-rotate-sm--45{transform:rotate(-45deg)}.vus-rotate-sm-90{transform:rotate(90deg)}.vus-rotate-sm--90{transform:rotate(-90deg)}.vus-rotate-sm-135{transform:rotate(135deg)}.vus-rotate-sm--135{transform:rotate(-135deg)}.vus-rotate-sm-180{transform:rotate(180deg)}.vus-rotate-sm--180{transform:rotate(-180deg)}.vus-rotate-sm-225{transform:rotate(225deg)}.vus-rotate-sm--225{transform:rotate(-225deg)}.vus-rotate-sm-270{transform:rotate(270deg)}.vus-rotate-sm--270{transform:rotate(-270deg)}.vus-rotate-sm-315{transform:rotate(315deg)}.vus-rotate-sm--315{transform:rotate(-315deg)}.vus-rotate-sm-360{transform:rotate(360deg)}.vus-rotate-sm--360{transform:rotate(-360deg)}}@media (min-width: 992px){.vus-rotate-md-45{transform:rotate(45deg)}.vus-rotate-md--45{transform:rotate(-45deg)}.vus-rotate-md-90{transform:rotate(90deg)}.vus-rotate-md--90{transform:rotate(-90deg)}.vus-rotate-md-135{transform:rotate(135deg)}.vus-rotate-md--135{transform:rotate(-135deg)}.vus-rotate-md-180{transform:rotate(180deg)}.vus-rotate-md--180{transform:rotate(-180deg)}.vus-rotate-md-225{transform:rotate(225deg)}.vus-rotate-md--225{transform:rotate(-225deg)}.vus-rotate-md-270{transform:rotate(270deg)}.vus-rotate-md--270{transform:rotate(-270deg)}.vus-rotate-md-315{transform:rotate(315deg)}.vus-rotate-md--315{transform:rotate(-315deg)}.vus-rotate-md-360{transform:rotate(360deg)}.vus-rotate-md--360{transform:rotate(-360deg)}}@media (min-width: 1200px){.vus-rotate-lg-45{transform:rotate(45deg)}.vus-rotate-lg--45{transform:rotate(-45deg)}.vus-rotate-lg-90{transform:rotate(90deg)}.vus-rotate-lg--90{transform:rotate(-90deg)}.vus-rotate-lg-135{transform:rotate(135deg)}.vus-rotate-lg--135{transform:rotate(-135deg)}.vus-rotate-lg-180{transform:rotate(180deg)}.vus-rotate-lg--180{transform:rotate(-180deg)}.vus-rotate-lg-225{transform:rotate(225deg)}.vus-rotate-lg--225{transform:rotate(-225deg)}.vus-rotate-lg-270{transform:rotate(270deg)}.vus-rotate-lg--270{transform:rotate(-270deg)}.vus-rotate-lg-315{transform:rotate(315deg)}.vus-rotate-lg--315{transform:rotate(-315deg)}.vus-rotate-lg-360{transform:rotate(360deg)}.vus-rotate-lg--360{transform:rotate(-360deg)}}@media (min-width: 1920px){.vus-rotate-xl-45{transform:rotate(45deg)}.vus-rotate-xl--45{transform:rotate(-45deg)}.vus-rotate-xl-90{transform:rotate(90deg)}.vus-rotate-xl--90{transform:rotate(-90deg)}.vus-rotate-xl-135{transform:rotate(135deg)}.vus-rotate-xl--135{transform:rotate(-135deg)}.vus-rotate-xl-180{transform:rotate(180deg)}.vus-rotate-xl--180{transform:rotate(-180deg)}.vus-rotate-xl-225{transform:rotate(225deg)}.vus-rotate-xl--225{transform:rotate(-225deg)}.vus-rotate-xl-270{transform:rotate(270deg)}.vus-rotate-xl--270{transform:rotate(-270deg)}.vus-rotate-xl-315{transform:rotate(315deg)}.vus-rotate-xl--315{transform:rotate(-315deg)}.vus-rotate-xl-360{transform:rotate(360deg)}.vus-rotate-xl--360{transform:rotate(-360deg)}}.vus-rotate-0{transform:rotate(0)}.vus-rotate-x-0{transform:rotateX(0)}.vus-rotate-x-180{transform:rotateX(180deg)}.vus-rotate-y-0{transform:rotateY(0)}.vus-rotate-y-180{transform:rotateY(180deg)} 11 | -------------------------------------------------------------------------------- /src/scss/lite/position.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 位置定位样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 15:22:53 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-06-01 10:26:29 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | #{$v}fixed { 14 | position: fixed !important; 15 | } 16 | #{$v}absolute { 17 | position: absolute !important; 18 | } 19 | #{$v}relative { 20 | position: relative !important; 21 | } 22 | 23 | /*------------------------------ 24 | * 位置距离 25 | *------------------------------ 26 | */ 27 | $numberList: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 28 | 36 38 40 42 44 45 46 48 50 0; 29 | 30 | @for $i from 1 through length($numberList) { 31 | #{$v}left-#{nth($numberList, $i)} { 32 | left: #{math.div(nth($numberList, $i), 16)}rem !important; 33 | } 34 | #{$v}left--#{nth($numberList, $i)} { 35 | left: -#{math.div(nth($numberList, $i), 16)}rem !important; 36 | } 37 | #{$v}top-#{nth($numberList, $i)} { 38 | top: #{math.div(nth($numberList, $i), 16)}rem !important; 39 | } 40 | #{$v}top--#{nth($numberList, $i)} { 41 | top: -#{math.div(nth($numberList, $i), 16)}rem !important; 42 | } 43 | #{$v}right-#{nth($numberList, $i)} { 44 | right: #{math.div(nth($numberList, $i), 16)}rem !important; 45 | } 46 | #{$v}right--#{nth($numberList, $i)} { 47 | right: -#{math.div(nth($numberList, $i), 16)}rem !important; 48 | } 49 | #{$v}bottom-#{nth($numberList, $i)} { 50 | bottom: #{math.div(nth($numberList, $i), 16)}rem !important; 51 | } 52 | #{$v}bottom--#{nth($numberList, $i)} { 53 | bottom: -#{math.div(nth($numberList, $i), 16)}rem !important; 54 | } 55 | } 56 | 57 | #{$v}left-0 { 58 | left: 0 !important; 59 | } 60 | #{$v}top-0 { 61 | top: 0 !important; 62 | } 63 | #{$v}right-0 { 64 | right: 0 !important; 65 | } 66 | #{$v}bottom-0 { 67 | bottom: 0 !important; 68 | } 69 | 70 | /*------------------------------ 71 | * 百分比(percent) 72 | *------------------------------ 73 | */ 74 | $numberList2: 50 100; 75 | @for $i from 1 through length($numberList2) { 76 | #{$v}left-p-#{nth($numberList2, $i)} { 77 | left: #{nth($numberList2, $i) * 1%} !important; 78 | } 79 | #{$v}left-p--#{nth($numberList2, $i)} { 80 | left: -#{nth($numberList2, $i) * 1%} !important; 81 | } 82 | #{$v}top-p-#{nth($numberList2, $i)} { 83 | top: #{nth($numberList2, $i) * 1%} !important; 84 | } 85 | #{$v}top-p--#{nth($numberList2, $i)} { 86 | top: -#{nth($numberList2, $i) * 1%} !important; 87 | } 88 | #{$v}right-p-#{nth($numberList2, $i)} { 89 | right: #{nth($numberList2, $i) * 1%} !important; 90 | } 91 | #{$v}right-p--#{nth($numberList2, $i)} { 92 | right: -#{nth($numberList2, $i) * 1%} !important; 93 | } 94 | #{$v}bottom-p-#{nth($numberList2, $i)} { 95 | bottom: #{nth($numberList2, $i) * 1%} !important; 96 | } 97 | #{$v}bottom-p--#{nth($numberList2, $i)} { 98 | bottom: -#{nth($numberList2, $i) * 1%} !important; 99 | } 100 | } 101 | 102 | /*------------------------------ 103 | * 位置索引层 104 | *------------------------------ 105 | */ 106 | $numberList3: -1 0 1 2 3 4 5 6 7 8 9 10; 107 | @for $i from 1 through length($numberList3) { 108 | #{$v}index-#{nth($numberList3, $i)} { 109 | z-index: #{nth($numberList3, $i)} !important; 110 | } 111 | } 112 | 113 | // 媒体设备 114 | @each $device, $value in $media-min-width { 115 | @include media-min($device) { 116 | @for $i from 1 through length($numberList) { 117 | #{$v}left-#{$device}-#{nth($numberList, $i)} { 118 | left: #{math.div(nth($numberList, $i), 16)}rem !important; 119 | } 120 | #{$v}left-#{$device}--#{nth($numberList, $i)} { 121 | left: -#{math.div(nth($numberList, $i), 16)}rem !important; 122 | } 123 | #{$v}top-#{$device}-#{nth($numberList, $i)} { 124 | top: #{math.div(nth($numberList, $i), 16)}rem !important; 125 | } 126 | #{$v}top-#{$device}--#{nth($numberList, $i)} { 127 | top: -#{math.div(nth($numberList, $i), 16)}rem !important; 128 | } 129 | #{$v}right-#{$device}-#{nth($numberList, $i)} { 130 | right: #{math.div(nth($numberList, $i), 16)}rem !important; 131 | } 132 | #{$v}right-#{$device}--#{nth($numberList, $i)} { 133 | right: -#{math.div(nth($numberList, $i), 16)}rem !important; 134 | } 135 | #{$v}bottom-#{$device}-#{nth($numberList, $i)} { 136 | bottom: #{math.div(nth($numberList, $i), 16)}rem !important; 137 | } 138 | #{$v}bottom-#{$device}--#{nth($numberList, $i)} { 139 | bottom: -#{math.div(nth($numberList, $i), 16)}rem !important; 140 | } 141 | } 142 | 143 | #{$v}left-#{$device}-0 { 144 | left: 0 !important; 145 | } 146 | #{$v}top-#{$device}-0 { 147 | top: 0 !important; 148 | } 149 | #{$v}right-#{$device}-0 { 150 | right: 0 !important; 151 | } 152 | #{$v}bottom-#{$device}-0 { 153 | bottom: 0 !important; 154 | } 155 | 156 | @for $i from 1 through length($numberList3) { 157 | #{$v}index-#{$device}-#{nth($numberList3, $i)} { 158 | z-index: #{nth($numberList3, $i)} !important; 159 | } 160 | } 161 | } 162 | } 163 | -------------------------------------------------------------------------------- /src/scss/position.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 位置定位样式 3 | * @Author: linpan 4 | * @Date: 2022-11-23 15:22:53 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-06-01 10:20:55 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | #{$v}fixed { 14 | position: fixed; 15 | } 16 | #{$v}absolute { 17 | position: absolute; 18 | } 19 | #{$v}relative { 20 | position: relative; 21 | } 22 | 23 | /*------------------------------ 24 | * 位置距离 25 | *------------------------------ 26 | */ 27 | $numberList: 1 2 3 4 5 6 7 8 9 10 12 14 15 16 18 20 22 24 25 26 28 30 32 34 35 28 | 36 38 40 42 44 45 46 48 50 52 54 55 56 58 60 62 64 65 66 68 70 72 74 75 76 78 29 | 80 82 84 85 86 88 90 92 94 95 96 98 100 110 120 130 140 150 160 170 180 190 30 | 200 250 300 350 400 450 500 550 600 650 700 750 0; 31 | 32 | @for $i from 1 through length($numberList) { 33 | #{$v}left-#{nth($numberList, $i)} { 34 | left: #{math.div(nth($numberList, $i), 16)}rem !important; 35 | } 36 | #{$v}left--#{nth($numberList, $i)} { 37 | left: -#{math.div(nth($numberList, $i), 16)}rem !important; 38 | } 39 | #{$v}top-#{nth($numberList, $i)} { 40 | top: #{math.div(nth($numberList, $i), 16)}rem !important; 41 | } 42 | #{$v}top--#{nth($numberList, $i)} { 43 | top: -#{math.div(nth($numberList, $i), 16)}rem !important; 44 | } 45 | #{$v}right-#{nth($numberList, $i)} { 46 | right: #{math.div(nth($numberList, $i), 16)}rem !important; 47 | } 48 | #{$v}right--#{nth($numberList, $i)} { 49 | right: -#{math.div(nth($numberList, $i), 16)}rem !important; 50 | } 51 | #{$v}bottom-#{nth($numberList, $i)} { 52 | bottom: #{math.div(nth($numberList, $i), 16)}rem !important; 53 | } 54 | #{$v}bottom--#{nth($numberList, $i)} { 55 | bottom: -#{math.div(nth($numberList, $i), 16)}rem !important; 56 | } 57 | } 58 | 59 | #{$v}left-0 { 60 | left: 0 !important; 61 | } 62 | #{$v}top-0 { 63 | top: 0 !important; 64 | } 65 | #{$v}right-0 { 66 | right: 0 !important; 67 | } 68 | #{$v}bottom-0 { 69 | bottom: 0 !important; 70 | } 71 | 72 | /*------------------------------ 73 | * 百分比(percent) 74 | *------------------------------ 75 | */ 76 | $numberList2: 10 20 30 40 50 60 70 80 90 100; 77 | @for $i from 1 through length($numberList2) { 78 | #{$v}left-p-#{nth($numberList2, $i)} { 79 | left: #{nth($numberList2, $i) * 1%} !important; 80 | } 81 | #{$v}left-p--#{nth($numberList2, $i)} { 82 | left: -#{nth($numberList2, $i) * 1%} !important; 83 | } 84 | #{$v}top-p-#{nth($numberList2, $i)} { 85 | top: #{nth($numberList2, $i) * 1%} !important; 86 | } 87 | #{$v}top-p--#{nth($numberList2, $i)} { 88 | top: -#{nth($numberList2, $i) * 1%} !important; 89 | } 90 | #{$v}right-p-#{nth($numberList2, $i)} { 91 | right: #{nth($numberList2, $i) * 1%} !important; 92 | } 93 | #{$v}right-p--#{nth($numberList2, $i)} { 94 | right: -#{nth($numberList2, $i) * 1%} !important; 95 | } 96 | #{$v}bottom-p-#{nth($numberList2, $i)} { 97 | bottom: #{nth($numberList2, $i) * 1%} !important; 98 | } 99 | #{$v}bottom-p--#{nth($numberList2, $i)} { 100 | bottom: -#{nth($numberList2, $i) * 1%} !important; 101 | } 102 | } 103 | 104 | /*------------------------------ 105 | * 位置索引层 106 | *------------------------------ 107 | */ 108 | $numberList3: -1 0 1 2 3 4 5 6 7 8 9 10 100 101 102 103 104 105 106 107 108 109 109 | 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 99999; 110 | @for $i from 1 through length($numberList3) { 111 | #{$v}index-#{nth($numberList3, $i)} { 112 | z-index: #{nth($numberList3, $i)} !important; 113 | } 114 | } 115 | 116 | // 媒体设备 117 | @each $device, $value in $media-min-width { 118 | @include media-min($device) { 119 | @for $i from 1 through length($numberList) { 120 | #{$v}left-#{$device}-#{nth($numberList, $i)} { 121 | left: #{math.div(nth($numberList, $i), 16)}rem !important; 122 | } 123 | #{$v}left-#{$device}--#{nth($numberList, $i)} { 124 | left: -#{math.div(nth($numberList, $i), 16)}rem !important; 125 | } 126 | #{$v}top-#{$device}-#{nth($numberList, $i)} { 127 | top: #{math.div(nth($numberList, $i), 16)}rem !important; 128 | } 129 | #{$v}top-#{$device}--#{nth($numberList, $i)} { 130 | top: -#{math.div(nth($numberList, $i), 16)}rem !important; 131 | } 132 | #{$v}right-#{$device}-#{nth($numberList, $i)} { 133 | right: #{math.div(nth($numberList, $i), 16)}rem !important; 134 | } 135 | #{$v}right-#{$device}--#{nth($numberList, $i)} { 136 | right: -#{math.div(nth($numberList, $i), 16)}rem !important; 137 | } 138 | #{$v}bottom-#{$device}-#{nth($numberList, $i)} { 139 | bottom: #{math.div(nth($numberList, $i), 16)}rem !important; 140 | } 141 | #{$v}bottom-#{$device}--#{nth($numberList, $i)} { 142 | bottom: -#{math.div(nth($numberList, $i), 16)}rem !important; 143 | } 144 | } 145 | 146 | #{$v}left-#{$device}-0 { 147 | left: 0 !important; 148 | } 149 | #{$v}top-#{$device}-0 { 150 | top: 0 !important; 151 | } 152 | #{$v}right-#{$device}-0 { 153 | right: 0 !important; 154 | } 155 | #{$v}bottom-#{$device}-0 { 156 | bottom: 0 !important; 157 | } 158 | 159 | @for $i from 1 through length($numberList3) { 160 | #{$v}index-#{$device}-#{nth($numberList3, $i)} { 161 | z-index: #{nth($numberList3, $i)} !important; 162 | } 163 | } 164 | } 165 | } 166 | -------------------------------------------------------------------------------- /src/scss/typography.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 文本排版 3 | * @Author: linpan 4 | * @Date: 2022-11-23 09:34:44 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:32:08 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | /*------------------------------ 12 | * 标题h1,h2,h3,h4,h5,h6 13 | *------------------------------ 14 | */ 15 | #{$v}h1, 16 | #{$v}h2, 17 | #{$v}h3, 18 | #{$v}h4, 19 | #{$v}h5, 20 | #{$v}h6 { 21 | line-height: 1.3; 22 | color: inherit; 23 | font-family: inherit; 24 | font-weight: 700; 25 | } 26 | @each $key, $val in (h1: $h1, h2: $h2, h3: $h3, h4: $h4, h5: $h5, h6: $h6) { 27 | #{$v}#{$key} { 28 | font-size: $val; 29 | } 30 | } 31 | 32 | // 上下标 33 | #{$v}sub, 34 | #{$v}sup { 35 | font-size: 75%; 36 | line-height: 1; 37 | position: relative; 38 | vertical-align: baseline; 39 | display: inline-flex; 40 | } 41 | #{$v}sub { 42 | bottom: -0.3125rem; 43 | } 44 | #{$v}sup { 45 | top: -0.5625rem; 46 | } 47 | 48 | /*------------------------------ 49 | * 文本对齐 50 | *------------------------------ 51 | */ 52 | $textList: left right center justify; 53 | @for $i from 1 through length($textList) { 54 | #{$v}text-#{nth($textList, $i)} { 55 | text-align: #{nth($textList, $i)}; 56 | } 57 | } 58 | // 缩进与间距 59 | #{$v}text-indent { 60 | text-indent: 2em; 61 | } 62 | #{$v}text-spacing { 63 | letter-spacing: 0.125rem; 64 | } 65 | 66 | /*------------------------------ 67 | * 字母大小写转换 68 | *------------------------------ 69 | */ 70 | $textList2: lowercase uppercase capitalize; 71 | @for $i from 1 through length($textList2) { 72 | #{$v}text-#{nth($textList2, $i)} { 73 | text-transform: #{nth($textList2, $i)}; 74 | } 75 | } 76 | 77 | /*------------------------------ 78 | * 文本修饰线 79 | *------------------------------ 80 | */ 81 | #{$v}text-through { 82 | text-decoration: line-through; 83 | } 84 | #{$v}text-overline { 85 | text-decoration: overline; 86 | } 87 | #{$v}text-underline { 88 | text-decoration: underline; 89 | } 90 | 91 | /*------------------------------ 92 | * 文本换行 93 | *------------------------------ 94 | */ 95 | // 不换行 96 | #{$v}text-nowrap { 97 | white-space: nowrap; 98 | } 99 | // 以字母作为换行依据 100 | #{$v}text-letter { 101 | word-break: break-all; 102 | } 103 | // 以单词作为换行依据 104 | #{$v}text-word { 105 | word-wrap: break-word; 106 | } 107 | // 文本截断 108 | #{$v}text-ellipsis { 109 | @include ellipsis(); 110 | } 111 | 112 | /*------------------------------ 113 | * 文本换行截断 114 | *------------------------------ 115 | */ 116 | #{$v}text-ellipsis { 117 | &.line-2, 118 | &.line-3 { 119 | display: -webkit-box; 120 | white-space: normal; 121 | word-break: break-all; 122 | -webkit-box-orient: vertical; 123 | } 124 | &.line-2 { 125 | -webkit-line-clamp: 2; 126 | } 127 | &.line-3 { 128 | -webkit-line-clamp: 3; 129 | } 130 | } 131 | 132 | /*------------------------------ 133 | * 文本着重 134 | *------------------------------ 135 | */ 136 | $textList3: 100 200 300 400 500 600 700 normal; 137 | @for $i from 1 through length($textList3) { 138 | #{$v}fw-#{nth($textList3, $i)} { 139 | font-weight: #{nth($textList3, $i)}; 140 | } 141 | } 142 | 143 | /*------------------------------ 144 | * 文本斜体 145 | *------------------------------ 146 | */ 147 | #{$v}fs-italic { 148 | font-style: italic; 149 | } 150 | // 重置字体 151 | #{$v}fs-normal { 152 | font-style: normal; 153 | } 154 | 155 | /*------------------------------ 156 | * 文本行高 157 | *------------------------------ 158 | */ 159 | $textLH: ( 160 | "inherit": inherit, 161 | "1": 1, 162 | "1-1": 1.1, 163 | "1-2": 1.2, 164 | "1-3": 1.3, 165 | "1-4": 1.4, 166 | "1-5": 1.5, 167 | "1-6": 1.6, 168 | "1-7": 1.7, 169 | "1-8": 1.8, 170 | "1-9": 1.9, 171 | "2": 2, 172 | ); 173 | @each $key, $val in $textLH { 174 | #{$v}lh-#{$key} { 175 | line-height: #{$val}; 176 | } 177 | } 178 | 179 | /*------------------------------ 180 | * overflow display 181 | *------------------------------ 182 | */ 183 | #{$v}hidden { 184 | overflow: hidden; 185 | } 186 | #{$v}hidden-y { 187 | overflow-y: hidden; 188 | } 189 | #{$v}hidden-y-auto { 190 | overflow-y: auto; 191 | } 192 | #{$v}hidden-x { 193 | overflow-x: hidden; 194 | } 195 | #{$v}hidden-x-auto { 196 | overflow-x: auto; 197 | } 198 | #{$v}hidden-auto { 199 | overflow: auto; 200 | } 201 | #{$v}hidden-auto, 202 | #{$v}hidden-x-auto, 203 | #{$v}hidden-y-auto { 204 | -webkit-overflow-scrolling: touch; 205 | } 206 | #{$v}visible { 207 | overflow: visible; 208 | } 209 | #{$v}inline { 210 | display: inline; 211 | } 212 | #{$v}inline-block { 213 | display: inline-block; 214 | } 215 | #{$v}align-top { 216 | vertical-align: top; 217 | } 218 | #{$v}align-middle { 219 | vertical-align: middle; 220 | } 221 | #{$v}align-bottom { 222 | vertical-align: bottom; 223 | } 224 | #{$v}align-baseline { 225 | vertical-align: baseline; 226 | } 227 | #{$v}block, 228 | #{$v}show { 229 | display: block; 230 | } 231 | #{$v}hide { 232 | display: none; 233 | } 234 | #{$v}pe-auto { 235 | pointer-events: auto; 236 | } 237 | #{$v}pe-none { 238 | pointer-events: none; 239 | } 240 | #{$v}pe-all { 241 | pointer-events: all; 242 | } 243 | #{$v}border-box { 244 | box-sizing: border-box; 245 | } 246 | #{$v}content-box { 247 | box-sizing: content-box; 248 | } 249 | 250 | /*------------------------------ 251 | * 浮动 252 | *------------------------------ 253 | */ 254 | #{$v}fl { 255 | float: left; 256 | } 257 | #{$v}fr { 258 | float: right; 259 | } 260 | #{$v}fn { 261 | float: none; 262 | } 263 | 264 | /*------------------------------ 265 | * 鼠标状态 266 | *------------------------------ 267 | */ 268 | #{$v}cursor { 269 | // 默认 270 | &-default { 271 | cursor: default; 272 | } 273 | // 点击 274 | &-pointer { 275 | cursor: pointer; 276 | } 277 | // 禁用 278 | &-disabled { 279 | cursor: not-allowed; 280 | } 281 | // 帮助 282 | &-help { 283 | cursor: help; 284 | } 285 | } 286 | 287 | /*------------------------------ 288 | * 清除浮动 289 | *------------------------------ 290 | */ 291 | #{$v}clearfix { 292 | @include clearfix(); 293 | } 294 | 295 | /*------------------------------ 296 | * 媒体设备 297 | *------------------------------ 298 | */ 299 | @each $device, $value in $media-min-width { 300 | @include media-min($device) { 301 | @for $i from 1 through length($textList) { 302 | #{$v}text-#{$device}-#{nth($textList, $i)} { 303 | text-align: #{nth($textList, $i)}; 304 | } 305 | } 306 | @for $i from 1 through length($textList3) { 307 | #{$v}fw-#{$device}-#{nth($textList3, $i)} { 308 | font-weight: #{nth($textList3, $i)}; 309 | } 310 | } 311 | @each $key, $val in $textLH { 312 | #{$v}lh-#{$device}-#{$key} { 313 | line-height: #{$val}; 314 | } 315 | } 316 | #{$v}show-#{$device} { 317 | display: block; 318 | } 319 | #{$v}hide-#{$device} { 320 | display: none; 321 | } 322 | #{$v}fl-#{$device} { 323 | float: left; 324 | } 325 | #{$v}fr-#{$device} { 326 | float: right; 327 | } 328 | #{$v}fn-#{$device} { 329 | float: none; 330 | } 331 | } 332 | } 333 | -------------------------------------------------------------------------------- /src/scss/uni/typography.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 文本排版 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 09:34:44 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-09-25 15:28:16 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | /*------------------------------ 12 | * 标题h1,h2,h3,h4,h5,h6 13 | *------------------------------ 14 | */ 15 | #{$v}h1, 16 | #{$v}h2, 17 | #{$v}h3, 18 | #{$v}h4, 19 | #{$v}h5, 20 | #{$v}h6 { 21 | line-height: 1.3; 22 | color: inherit; 23 | font-family: inherit; 24 | font-weight: 700; 25 | } 26 | @each $key, 27 | $val in (h1: 80rpx, h2: 64rpx, h3: 56rpx, h4: 48rpx, h5: 40rpx, h6: 32rpx) 28 | { 29 | #{$v}#{$key} { 30 | font-size: $val; 31 | } 32 | } 33 | 34 | // 上下标 35 | #{$v}sub, 36 | #{$v}sup { 37 | font-size: 75%; 38 | line-height: 1; 39 | position: relative; 40 | vertical-align: baseline; 41 | display: inline-flex; 42 | } 43 | #{$v}sub { 44 | bottom: -10rpx; 45 | } 46 | #{$v}sup { 47 | top: -18rpx; 48 | } 49 | 50 | /*------------------------------ 51 | * 文本对齐 52 | *------------------------------ 53 | */ 54 | $textList: left right center justify; 55 | @for $i from 1 through length($textList) { 56 | #{$v}text-#{nth($textList, $i)} { 57 | text-align: #{nth($textList, $i)}; 58 | } 59 | } 60 | // 缩进与间距 61 | #{$v}text-indent { 62 | text-indent: 2em; 63 | } 64 | #{$v}text-spacing { 65 | letter-spacing: 4rpx; 66 | } 67 | 68 | /*------------------------------ 69 | * 字母大小写转换 70 | *------------------------------ 71 | */ 72 | $textList2: lowercase uppercase capitalize; 73 | @for $i from 1 through length($textList2) { 74 | #{$v}text-#{nth($textList2, $i)} { 75 | text-transform: #{nth($textList2, $i)}; 76 | } 77 | } 78 | 79 | /*------------------------------ 80 | * 文本修饰线 81 | *------------------------------ 82 | */ 83 | #{$v}text-through { 84 | text-decoration: line-through; 85 | } 86 | #{$v}text-overline { 87 | text-decoration: overline; 88 | } 89 | #{$v}text-underline { 90 | text-decoration: underline; 91 | } 92 | 93 | /*------------------------------ 94 | * 文本换行 95 | *------------------------------ 96 | */ 97 | // 不换行 98 | #{$v}text-nowrap { 99 | white-space: nowrap; 100 | } 101 | // 以字母作为换行依据 102 | #{$v}text-letter { 103 | word-break: break-all; 104 | } 105 | // 以单词作为换行依据 106 | #{$v}text-word { 107 | word-wrap: break-word; 108 | } 109 | // 文本截断 110 | #{$v}text-ellipsis { 111 | @include ellipsis(); 112 | } 113 | 114 | /*------------------------------ 115 | * 文本换行截断 116 | *------------------------------ 117 | */ 118 | #{$v}text-ellipsis { 119 | &.line-2, 120 | &.line-3 { 121 | display: -webkit-box; 122 | white-space: normal; 123 | word-break: break-all; 124 | -webkit-box-orient: vertical; 125 | } 126 | &.line-2 { 127 | -webkit-line-clamp: 2; 128 | } 129 | &.line-3 { 130 | -webkit-line-clamp: 3; 131 | } 132 | } 133 | 134 | /*------------------------------ 135 | * 文本着重 136 | *------------------------------ 137 | */ 138 | $textList3: 100 200 300 400 500 600 700 normal; 139 | @for $i from 1 through length($textList3) { 140 | #{$v}fw-#{nth($textList3, $i)} { 141 | font-weight: #{nth($textList3, $i)}; 142 | } 143 | } 144 | 145 | /*------------------------------ 146 | * 文本斜体 147 | *------------------------------ 148 | */ 149 | #{$v}fs-italic { 150 | font-style: italic; 151 | } 152 | // 重置字体 153 | #{$v}fs-normal { 154 | font-style: normal; 155 | } 156 | 157 | /*------------------------------ 158 | * 文本行高 159 | *------------------------------ 160 | */ 161 | $textLH: ( 162 | "inherit": inherit, 163 | "1": 1, 164 | "1-1": 1.1, 165 | "1-2": 1.2, 166 | "1-3": 1.3, 167 | "1-4": 1.4, 168 | "1-5": 1.5, 169 | "1-6": 1.6, 170 | "1-7": 1.7, 171 | "1-8": 1.8, 172 | "1-9": 1.9, 173 | "2": 2, 174 | ); 175 | @each $key, $val in $textLH { 176 | #{$v}lh-#{$key} { 177 | line-height: #{$val}; 178 | } 179 | } 180 | 181 | /*------------------------------ 182 | * overflow display 183 | *------------------------------ 184 | */ 185 | #{$v}hidden { 186 | overflow: hidden; 187 | } 188 | #{$v}hidden-y { 189 | overflow-y: hidden; 190 | } 191 | #{$v}hidden-y-auto { 192 | overflow-y: auto; 193 | } 194 | #{$v}hidden-x { 195 | overflow-x: hidden; 196 | } 197 | #{$v}hidden-x-auto { 198 | overflow-x: auto; 199 | } 200 | #{$v}hidden-auto { 201 | overflow: auto; 202 | } 203 | #{$v}hidden-auto, 204 | #{$v}hidden-x-auto, 205 | #{$v}hidden-y-auto { 206 | -webkit-overflow-scrolling: touch; 207 | } 208 | #{$v}visible { 209 | overflow: visible; 210 | } 211 | #{$v}inline { 212 | display: inline; 213 | } 214 | #{$v}inline-block { 215 | display: inline-block; 216 | } 217 | #{$v}align-top { 218 | vertical-align: top; 219 | } 220 | #{$v}align-middle { 221 | vertical-align: middle; 222 | } 223 | #{$v}align-bottom { 224 | vertical-align: bottom; 225 | } 226 | #{$v}align-baseline { 227 | vertical-align: baseline; 228 | } 229 | #{$v}block, 230 | #{$v}show { 231 | display: block; 232 | } 233 | #{$v}hide { 234 | display: none; 235 | } 236 | #{$v}pe-auto { 237 | pointer-events: auto; 238 | } 239 | #{$v}pe-none { 240 | pointer-events: none; 241 | } 242 | #{$v}pe-all { 243 | pointer-events: all; 244 | } 245 | #{$v}border-box { 246 | box-sizing: border-box; 247 | } 248 | #{$v}content-box { 249 | box-sizing: content-box; 250 | } 251 | 252 | /*------------------------------ 253 | * 浮动 254 | *------------------------------ 255 | */ 256 | #{$v}fl { 257 | float: left; 258 | } 259 | #{$v}fr { 260 | float: right; 261 | } 262 | #{$v}fn { 263 | float: none; 264 | } 265 | 266 | /*------------------------------ 267 | * 鼠标状态 268 | *------------------------------ 269 | */ 270 | #{$v}cursor { 271 | // 默认 272 | &-default { 273 | cursor: default; 274 | } 275 | // 点击 276 | &-pointer { 277 | cursor: pointer; 278 | } 279 | // 禁用 280 | &-disabled { 281 | cursor: not-allowed; 282 | } 283 | // 帮助 284 | &-help { 285 | cursor: help; 286 | } 287 | } 288 | 289 | /*------------------------------ 290 | * hover 事件 291 | *------------------------------ 292 | */ 293 | .vus-hover, 294 | .vus-move, 295 | [hover-class*="vus-"] { 296 | position: relative; 297 | transition: all 0.3s ease-in-out; 298 | } 299 | // 水波效果 300 | .vus-hover:not([disabled]):not(.disabled), 301 | [hover-class*="vus-hover"]:not([disabled]):not(.disabled) { 302 | &::after { 303 | content: ""; 304 | background: rgba(50, 50, 50, 0.1); 305 | position: absolute; 306 | width: 600rpx; 307 | height: 600rpx; 308 | left: calc(50% - 300rpx); 309 | top: calc(50% - 300rpx); 310 | opacity: 0; 311 | margin: auto; 312 | border-radius: 50%; 313 | transform: scale(1); 314 | transition: all 0.4s ease-in-out; 315 | } 316 | 317 | &:active::after { 318 | transform: scale(0); 319 | opacity: 1; 320 | transition: 0s; 321 | } 322 | } 323 | 324 | // 移动效果(右下移动2rpx) 325 | .vus-move:not([disabled]):not(.disabled):active, 326 | [hover-class="vus-move"]:not([disabled]):not(.disabled):active { 327 | transform: translate(2rpx, 2rpx); 328 | } 329 | 330 | /*------------------------------ 331 | * 清除浮动 332 | *------------------------------ 333 | */ 334 | #{$v}clearfix { 335 | @include clearfix(); 336 | } 337 | -------------------------------------------------------------------------------- /src/scss/mobile/typography.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: 文本排版 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 09:34:44 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-08 17:45:25 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | /*------------------------------ 12 | * 标题h1,h2,h3,h4,h5,h6 13 | *------------------------------ 14 | */ 15 | #{$v}h1, 16 | #{$v}h2, 17 | #{$v}h3, 18 | #{$v}h4, 19 | #{$v}h5, 20 | #{$v}h6 { 21 | line-height: 1.3; 22 | color: inherit; 23 | font-family: inherit; 24 | font-weight: 700; 25 | } 26 | @each $key, $val in (h1: $h1, h2: $h2, h3: $h3, h4: $h4, h5: $h5, h6: $h6) { 27 | #{$v}#{$key} { 28 | font-size: $val; 29 | } 30 | } 31 | 32 | // 上下标 33 | #{$v}sub, 34 | #{$v}sup { 35 | font-size: 75%; 36 | line-height: 1; 37 | position: relative; 38 | vertical-align: baseline; 39 | display: inline-flex; 40 | } 41 | #{$v}sub { 42 | bottom: -0.3125rem; 43 | } 44 | #{$v}sup { 45 | top: -0.5625rem; 46 | } 47 | 48 | /*------------------------------ 49 | * 文本对齐 50 | *------------------------------ 51 | */ 52 | $textList: left right center justify; 53 | @for $i from 1 through length($textList) { 54 | #{$v}text-#{nth($textList, $i)} { 55 | text-align: #{nth($textList, $i)}; 56 | } 57 | } 58 | // 缩进与间距 59 | #{$v}text-indent { 60 | text-indent: 2em; 61 | } 62 | #{$v}text-spacing { 63 | letter-spacing: 0.125rem; 64 | } 65 | 66 | /*------------------------------ 67 | * 字母大小写转换 68 | *------------------------------ 69 | */ 70 | $textList2: lowercase uppercase capitalize; 71 | @for $i from 1 through length($textList2) { 72 | #{$v}text-#{nth($textList2, $i)} { 73 | text-transform: #{nth($textList2, $i)}; 74 | } 75 | } 76 | 77 | /*------------------------------ 78 | * 文本修饰线 79 | *------------------------------ 80 | */ 81 | #{$v}text-through { 82 | text-decoration: line-through; 83 | } 84 | #{$v}text-overline { 85 | text-decoration: overline; 86 | } 87 | #{$v}text-underline { 88 | text-decoration: underline; 89 | } 90 | 91 | /*------------------------------ 92 | * 文本换行 93 | *------------------------------ 94 | */ 95 | // 不换行 96 | #{$v}text-nowrap { 97 | white-space: nowrap; 98 | } 99 | // 以字母作为换行依据 100 | #{$v}text-letter { 101 | word-break: break-all; 102 | } 103 | // 以单词作为换行依据 104 | #{$v}text-word { 105 | word-wrap: break-word; 106 | } 107 | // 文本截断 108 | #{$v}text-ellipsis { 109 | @include ellipsis(); 110 | } 111 | 112 | /*------------------------------ 113 | * 文本换行截断 114 | *------------------------------ 115 | */ 116 | #{$v}text-ellipsis { 117 | &.line-2, 118 | &.line-3 { 119 | display: -webkit-box; 120 | white-space: normal; 121 | word-break: break-all; 122 | -webkit-box-orient: vertical; 123 | } 124 | &.line-2 { 125 | -webkit-line-clamp: 2; 126 | } 127 | &.line-3 { 128 | -webkit-line-clamp: 3; 129 | } 130 | } 131 | 132 | /*------------------------------ 133 | * 文本着重 134 | *------------------------------ 135 | */ 136 | $textList3: 100 200 300 400 500 600 700 normal; 137 | @for $i from 1 through length($textList3) { 138 | #{$v}fw-#{nth($textList3, $i)} { 139 | font-weight: #{nth($textList3, $i)}; 140 | } 141 | } 142 | 143 | /*------------------------------ 144 | * 文本斜体 145 | *------------------------------ 146 | */ 147 | #{$v}fs-italic { 148 | font-style: italic; 149 | } 150 | // 重置字体 151 | #{$v}fs-normal { 152 | font-style: normal; 153 | } 154 | 155 | /*------------------------------ 156 | * 文本行高 157 | *------------------------------ 158 | */ 159 | $textLH: ( 160 | "inherit": inherit, 161 | "1": 1, 162 | "1-1": 1.1, 163 | "1-2": 1.2, 164 | "1-3": 1.3, 165 | "1-4": 1.4, 166 | "1-5": 1.5, 167 | "1-6": 1.6, 168 | "1-7": 1.7, 169 | "1-8": 1.8, 170 | "1-9": 1.9, 171 | "2": 2, 172 | ); 173 | @each $key, $val in $textLH { 174 | #{$v}lh-#{$key} { 175 | line-height: #{$val}; 176 | } 177 | } 178 | 179 | /*------------------------------ 180 | * overflow display 181 | *------------------------------ 182 | */ 183 | #{$v}hidden { 184 | overflow: hidden; 185 | } 186 | #{$v}hidden-y { 187 | overflow-y: hidden; 188 | } 189 | #{$v}hidden-y-auto { 190 | overflow-y: auto; 191 | } 192 | #{$v}hidden-x { 193 | overflow-x: hidden; 194 | } 195 | #{$v}hidden-x-auto { 196 | overflow-x: auto; 197 | } 198 | #{$v}hidden-auto { 199 | overflow: auto; 200 | } 201 | #{$v}hidden-auto, 202 | #{$v}hidden-x-auto, 203 | #{$v}hidden-y-auto { 204 | -webkit-overflow-scrolling: touch; 205 | } 206 | #{$v}visible { 207 | overflow: visible; 208 | } 209 | #{$v}inline { 210 | display: inline; 211 | } 212 | #{$v}inline-block { 213 | display: inline-block; 214 | } 215 | #{$v}align-top { 216 | vertical-align: top; 217 | } 218 | #{$v}align-middle { 219 | vertical-align: middle; 220 | } 221 | #{$v}align-bottom { 222 | vertical-align: bottom; 223 | } 224 | #{$v}align-baseline { 225 | vertical-align: baseline; 226 | } 227 | #{$v}block, 228 | #{$v}show { 229 | display: block; 230 | } 231 | #{$v}hide { 232 | display: none; 233 | } 234 | #{$v}pe-auto { 235 | pointer-events: auto; 236 | } 237 | #{$v}pe-none { 238 | pointer-events: none; 239 | } 240 | #{$v}pe-all { 241 | pointer-events: all; 242 | } 243 | #{$v}border-box { 244 | box-sizing: border-box; 245 | } 246 | #{$v}content-box { 247 | box-sizing: content-box; 248 | } 249 | 250 | /*------------------------------ 251 | * 浮动 252 | *------------------------------ 253 | */ 254 | #{$v}fl { 255 | float: left; 256 | } 257 | #{$v}fr { 258 | float: right; 259 | } 260 | #{$v}fn { 261 | float: none; 262 | } 263 | 264 | /*------------------------------ 265 | * 鼠标状态 266 | *------------------------------ 267 | */ 268 | #{$v}cursor { 269 | // 默认 270 | &-default { 271 | cursor: default; 272 | } 273 | // 点击 274 | &-pointer { 275 | cursor: pointer; 276 | } 277 | // 禁用 278 | &-disabled { 279 | cursor: not-allowed; 280 | } 281 | // 帮助 282 | &-help { 283 | cursor: help; 284 | } 285 | } 286 | 287 | /*------------------------------ 288 | * 清除浮动 289 | *------------------------------ 290 | */ 291 | #{$v}clearfix { 292 | @include clearfix(); 293 | } 294 | 295 | // /*------------------------------ 296 | // * 媒体设备 297 | // *------------------------------ 298 | // */ 299 | // @each $device, $value in $media-min-width { 300 | // @include media-min($device) { 301 | // @for $i from 1 through length($textList) { 302 | // #{$v}text-#{$device}-#{nth($textList, $i)} { 303 | // text-align: #{nth($textList, $i)}; 304 | // } 305 | // } 306 | // @for $i from 1 through length($textList3) { 307 | // #{$v}fw-#{$device}-#{nth($textList3, $i)} { 308 | // font-weight: #{nth($textList3, $i)}; 309 | // } 310 | // } 311 | // @each $key, $val in $textLH { 312 | // #{$v}lh-#{$device}-#{$key} { 313 | // line-height: #{$val}; 314 | // } 315 | // } 316 | // #{$v}show-#{$device} { 317 | // display: block; 318 | // } 319 | // #{$v}hide-#{$device} { 320 | // display: none; 321 | // } 322 | // #{$v}fl-#{$device} { 323 | // float: left; 324 | // } 325 | // #{$v}fr-#{$device} { 326 | // float: right; 327 | // } 328 | // #{$v}fn-#{$device} { 329 | // float: none; 330 | // } 331 | // } 332 | // } 333 | -------------------------------------------------------------------------------- /src/scss/flex.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: flex盒子样式 3 | * @Author: linpan 4 | * @Date: 2022-11-23 11:08:26 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:26:39 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | #{$v}box { 14 | display: flex; 15 | flex-wrap: wrap; 16 | flex-direction: row; 17 | box-sizing: border-box; 18 | 19 | &.inline { 20 | display: inline-flex; 21 | } 22 | &.nowrap { 23 | flex-wrap: nowrap; 24 | } 25 | &.wrap-reverse { 26 | flex-wrap: wrap-reverse; 27 | } 28 | &.row-reverse { 29 | flex-direction: row-reverse; 30 | } 31 | &.column { 32 | flex-direction: column; 33 | } 34 | &.column-reverse { 35 | flex-direction: column-reverse; 36 | } 37 | &.justify-start { 38 | justify-content: flex-start; 39 | } 40 | &.justify-end { 41 | justify-content: flex-end; 42 | } 43 | &.justify-center { 44 | justify-content: center; 45 | } 46 | &.justify-between { 47 | justify-content: space-between; 48 | } 49 | &.justify-around { 50 | justify-content: space-around; 51 | } 52 | &.items-start { 53 | align-items: flex-start; 54 | } 55 | &.items-end { 56 | align-items: flex-end; 57 | } 58 | &.items-center { 59 | align-items: center; 60 | } 61 | } 62 | 63 | // 不缩小适应 64 | #{$v}flex-shrink { 65 | flex-shrink: 0; 66 | } 67 | 68 | #{$v}col, 69 | #{$v}flex, 70 | [class*=" #{$v2}col-"], 71 | [class^="#{$v2}col-"], 72 | [class*=" #{$v2}flex-"], 73 | [class^="#{$v2}flex-"] { 74 | width: 100%; 75 | min-height: 1px; 76 | position: relative; 77 | box-sizing: border-box; 78 | } 79 | 80 | #{$v}col, 81 | #{$v}flex { 82 | max-width: 100%; 83 | flex-basis: 0; 84 | flex-grow: 1; 85 | 86 | &-auto { 87 | width: auto; 88 | max-width: none; 89 | flex: 0 0 auto; 90 | } 91 | } 92 | 93 | // flex 94 | @for $i from 1 through 24 { 95 | #{$v}col-#{$i} { 96 | max-width: math.div(100%, 24) * $i; 97 | flex: 0 0 math.div(100%, 24) * $i; 98 | } 99 | #{$v}flex-#{$i} { 100 | max-width: math.div(100%, $i); 101 | flex: 0 0 math.div(100%, $i); 102 | } 103 | } 104 | 105 | // 列偏移 106 | @for $i from 1 through 23 { 107 | #{$v}offset-#{$i} { 108 | margin-left: math.div(100%, 24) * $i; 109 | } 110 | } 111 | 112 | // 间隔 113 | #{$v}box { 114 | @for $i from 1 through 20 { 115 | // 左右间隔 116 | &.lr-#{$i} { 117 | margin-left: -#{math.div($i, 16)}rem; 118 | margin-right: -#{math.div($i, 16)}rem; 119 | > #{$v}col, 120 | > #{$v}flex, 121 | > [class*=" #{$v2}col-"], 122 | > [class^="#{$v2}col-"], 123 | > [class*=" #{$v2}flex-"], 124 | > [class^="#{$v2}flex-"] { 125 | padding-left: #{math.div($i, 16)}rem; 126 | padding-right: #{math.div($i, 16)}rem; 127 | } 128 | } 129 | // 上下间隔 130 | &.tb-#{$i} { 131 | margin-top: -#{math.div($i, 16)}rem; 132 | margin-bottom: -#{math.div($i, 16)}rem; 133 | > #{$v}col, 134 | > #{$v}flex, 135 | > [class*=" #{$v2}col-"], 136 | > [class^="#{$v2}col-"], 137 | > [class*=" #{$v2}flex-"], 138 | > [class^="#{$v2}flex-"] { 139 | padding-top: #{math.div($i, 16)}rem; 140 | padding-bottom: #{math.div($i, 16)}rem; 141 | } 142 | } 143 | } 144 | 145 | &.lr-0 { 146 | margin-left: 0; 147 | margin-right: 0; 148 | > #{$v}col, 149 | > #{$v}flex, 150 | > [class*=" #{$v2}col-"], 151 | > [class^="#{$v2}col-"], 152 | > [class*=" #{$v2}flex-"], 153 | > [class^="#{$v2}flex-"] { 154 | padding-left: 0; 155 | padding-right: 0; 156 | } 157 | } 158 | 159 | &.tb-0 { 160 | margin-top: 0; 161 | margin-bottom: 0; 162 | > #{$v}col, 163 | > #{$v}flex, 164 | > [class*=" #{$v2}col-"], 165 | > [class^="#{$v2}col-"], 166 | > [class*=" #{$v2}flex-"], 167 | > [class^="#{$v2}flex-"] { 168 | padding-top: 0; 169 | padding-bottom: 0; 170 | } 171 | } 172 | } 173 | 174 | // 媒体查询 175 | @each $device, $value in $media-min-width { 176 | @include media-min($device) { 177 | #{$v}col-#{$device}, 178 | #{$v}flex-#{$device}, 179 | [class*=" #{$v2}col-#{$device}-"], 180 | [class^="#{$v2}col-#{$device}-"], 181 | [class*=" #{$v2}flex-#{$device}-"], 182 | [class^="#{$v2}flex-#{$device}-"] { 183 | width: 100%; 184 | min-height: 1px; 185 | position: relative; 186 | } 187 | 188 | #{$v}col-#{$device}, 189 | #{$v}flex-#{$device} { 190 | max-width: 100%; 191 | flex-basis: 0; 192 | flex-grow: 1; 193 | 194 | &-auto { 195 | width: auto; 196 | max-width: none; 197 | flex: 0 0 auto; 198 | } 199 | } 200 | 201 | // col & flex 202 | @for $i from 1 through 24 { 203 | #{$v}col-#{$device}-#{$i} { 204 | max-width: math.div(100%, 24) * $i; 205 | flex: 0 0 math.div(100%, 24) * $i; 206 | } 207 | #{$v}flex-#{$device}-#{$i} { 208 | max-width: math.div(100%, $i); 209 | flex: 0 0 math.div(100%, $i); 210 | } 211 | } 212 | 213 | // 列偏移 214 | @for $i from 1 through 23 { 215 | #{$v}offset-#{$device}-#{$i} { 216 | margin-left: math.div(100%, 24) * $i; 217 | } 218 | } 219 | 220 | // 网格边距间隔 221 | #{$v}box { 222 | @for $i from 1 through 20 { 223 | // 左右间隔 224 | &.lr-#{$device}-#{$i} { 225 | margin-left: -#{math.div($i, 16)}rem; 226 | margin-right: -#{math.div($i, 16)}rem; 227 | > #{$v}col-#{$device}, 228 | > #{$v}flex-#{$device}, 229 | > [class*=" #{$v2}col-#{$device}-"], 230 | > [class^="#{$v2}col-#{$device}-"], 231 | > [class*=" #{$v2}flex-#{$device}-"], 232 | > [class^="#{$v2}flex-#{$device}-"] { 233 | padding-left: #{math.div($i, 16)}rem; 234 | padding-right: #{math.div($i, 16)}rem; 235 | } 236 | } 237 | // 上下间隔 238 | &.tb-#{$device}-#{$i} { 239 | margin-top: -#{math.div($i, 16)}rem; 240 | margin-bottom: -#{math.div($i, 16)}rem; 241 | > #{$v}col-#{$device}, 242 | > #{$v}flex-#{$device}, 243 | > [class*=" #{$v2}col-#{$device}-"], 244 | > [class^="#{$v2}col-#{$device}-"], 245 | > [class*=" #{$v2}flex-#{$device}-"], 246 | > [class^="#{$v2}flex-#{$device}-"] { 247 | padding-top: #{math.div($i, 16)}rem; 248 | padding-bottom: #{math.div($i, 16)}rem; 249 | } 250 | } 251 | } 252 | 253 | &.lr-#{$device}-0 { 254 | margin-left: 0; 255 | margin-right: 0; 256 | > #{$v}col-#{$device}, 257 | > #{$v}flex-#{$device}, 258 | > [class*=" #{$v2}col-#{$device}-"], 259 | > [class^="#{$v2}col-#{$device}-"], 260 | > [class*=" #{$v2}flex-#{$device}-"], 261 | > [class^="#{$v2}flex-#{$device}-"] { 262 | padding-left: 0; 263 | padding-right: 0; 264 | } 265 | } 266 | 267 | &.tb-#{$device}-0 { 268 | margin-top: 0; 269 | margin-bottom: 0; 270 | > #{$v}col-#{$device}, 271 | > #{$v}flex-#{$device}, 272 | > [class*=" #{$v2}col-#{$device}-"], 273 | > [class^="#{$v2}col-#{$device}-"], 274 | > [class*=" #{$v2}flex-#{$device}-"], 275 | > [class^="#{$v2}flex-#{$device}-"] { 276 | padding-top: 0; 277 | padding-bottom: 0; 278 | } 279 | } 280 | } 281 | } 282 | } 283 | -------------------------------------------------------------------------------- /src/scss/lite/flex.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: flex盒子样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-11 11:08:26 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:36:52 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | #{$v}box { 14 | display: flex; 15 | flex-wrap: wrap; 16 | flex-direction: row; 17 | box-sizing: border-box; 18 | 19 | &.inline { 20 | display: inline-flex; 21 | } 22 | &.nowrap { 23 | flex-wrap: nowrap; 24 | } 25 | &.wrap-reverse { 26 | flex-wrap: wrap-reverse; 27 | } 28 | &.row-reverse { 29 | flex-direction: row-reverse; 30 | } 31 | &.column { 32 | flex-direction: column; 33 | } 34 | &.column-reverse { 35 | flex-direction: column-reverse; 36 | } 37 | &.justify-start { 38 | justify-content: flex-start; 39 | } 40 | &.justify-end { 41 | justify-content: flex-end; 42 | } 43 | &.justify-center { 44 | justify-content: center; 45 | } 46 | &.justify-between { 47 | justify-content: space-between; 48 | } 49 | &.justify-around { 50 | justify-content: space-around; 51 | } 52 | &.items-start { 53 | align-items: flex-start; 54 | } 55 | &.items-end { 56 | align-items: flex-end; 57 | } 58 | &.items-center { 59 | align-items: center; 60 | } 61 | } 62 | 63 | // 不缩小适应 64 | #{$v}flex-shrink { 65 | flex-shrink: 0; 66 | } 67 | 68 | #{$v}col, 69 | #{$v}flex, 70 | [class*=" #{$v2}col-"], 71 | [class^="#{$v2}col-"], 72 | [class*=" #{$v2}flex-"], 73 | [class^="#{$v2}flex-"] { 74 | width: 100%; 75 | min-height: 1px; 76 | position: relative; 77 | box-sizing: border-box; 78 | } 79 | 80 | #{$v}col, 81 | #{$v}flex { 82 | max-width: 100%; 83 | flex-basis: 0; 84 | flex-grow: 1; 85 | 86 | &-auto { 87 | width: auto; 88 | max-width: none; 89 | flex: 0 0 auto; 90 | } 91 | } 92 | 93 | // flex 94 | @for $i from 1 through 12 { 95 | #{$v}col-#{$i} { 96 | max-width: math.div(100%, 12) * $i; 97 | flex: 0 0 math.div(100%, 12) * $i; 98 | } 99 | #{$v}flex-#{$i} { 100 | max-width: math.div(100%, $i); 101 | flex: 0 0 math.div(100%, $i); 102 | } 103 | } 104 | 105 | // 列偏移 106 | @for $i from 1 through 11 { 107 | #{$v}offset-#{$i} { 108 | margin-left: math.div(100%, 12) * $i; 109 | } 110 | } 111 | 112 | // 间隔 113 | #{$v}box { 114 | @for $i from 1 through 10 { 115 | // 左右间隔 116 | &.lr-#{$i} { 117 | margin-left: -#{math.div($i, 16)}rem; 118 | margin-right: -#{math.div($i, 16)}rem; 119 | > #{$v}col, 120 | > #{$v}flex, 121 | > [class*=" #{$v2}col-"], 122 | > [class^="#{$v2}col-"], 123 | > [class*=" #{$v2}flex-"], 124 | > [class^="#{$v2}flex-"] { 125 | padding-left: #{math.div($i, 16)}rem; 126 | padding-right: #{math.div($i, 16)}rem; 127 | } 128 | } 129 | // 上下间隔 130 | &.tb-#{$i} { 131 | margin-top: -#{math.div($i, 16)}rem; 132 | margin-bottom: -#{math.div($i, 16)}rem; 133 | > #{$v}col, 134 | > #{$v}flex, 135 | > [class*=" #{$v2}col-"], 136 | > [class^="#{$v2}col-"], 137 | > [class*=" #{$v2}flex-"], 138 | > [class^="#{$v2}flex-"] { 139 | padding-top: #{math.div($i, 16)}rem; 140 | padding-bottom: #{math.div($i, 16)}rem; 141 | } 142 | } 143 | } 144 | 145 | &.lr-0 { 146 | margin-left: 0; 147 | margin-right: 0; 148 | > #{$v}col, 149 | > #{$v}flex, 150 | > [class*=" #{$v2}col-"], 151 | > [class^="#{$v2}col-"], 152 | > [class*=" #{$v2}flex-"], 153 | > [class^="#{$v2}flex-"] { 154 | padding-left: 0; 155 | padding-right: 0; 156 | } 157 | } 158 | 159 | &.tb-0 { 160 | margin-top: 0; 161 | margin-bottom: 0; 162 | > #{$v}col, 163 | > #{$v}flex, 164 | > [class*=" #{$v2}col-"], 165 | > [class^="#{$v2}col-"], 166 | > [class*=" #{$v2}flex-"], 167 | > [class^="#{$v2}flex-"] { 168 | padding-top: 0; 169 | padding-bottom: 0; 170 | } 171 | } 172 | } 173 | 174 | // 媒体查询 175 | @each $device, $value in $media-min-width { 176 | @include media-min($device) { 177 | #{$v}col-#{$device}, 178 | #{$v}flex-#{$device}, 179 | [class*=" #{$v2}col-#{$device}-"], 180 | [class^="#{$v2}col-#{$device}-"], 181 | [class*=" #{$v2}flex-#{$device}-"], 182 | [class^="#{$v2}flex-#{$device}-"] { 183 | width: 100%; 184 | min-height: 1px; 185 | position: relative; 186 | } 187 | 188 | #{$v}col-#{$device}, 189 | #{$v}flex-#{$device} { 190 | max-width: 100%; 191 | flex-basis: 0; 192 | flex-grow: 1; 193 | 194 | &-auto { 195 | width: auto; 196 | max-width: none; 197 | flex: 0 0 auto; 198 | } 199 | } 200 | 201 | // col & flex 202 | @for $i from 1 through 12 { 203 | #{$v}col-#{$device}-#{$i} { 204 | max-width: math.div(100%, 12) * $i; 205 | flex: 0 0 math.div(100%, 12) * $i; 206 | } 207 | #{$v}flex-#{$device}-#{$i} { 208 | max-width: math.div(100%, $i); 209 | flex: 0 0 math.div(100%, $i); 210 | } 211 | } 212 | 213 | // 列偏移 214 | @for $i from 1 through 11 { 215 | #{$v}offset-#{$device}-#{$i} { 216 | margin-left: math.div(100%, 12) * $i; 217 | } 218 | } 219 | 220 | // 网格边距间隔 221 | #{$v}box { 222 | @for $i from 1 through 10 { 223 | // 左右间隔 224 | &.lr-#{$device}-#{$i} { 225 | margin-left: -#{math.div($i, 16)}rem; 226 | margin-right: -#{math.div($i, 16)}rem; 227 | > #{$v}col-#{$device}, 228 | > #{$v}flex-#{$device}, 229 | > [class*=" #{$v2}col-#{$device}-"], 230 | > [class^="#{$v2}col-#{$device}-"], 231 | > [class*=" #{$v2}flex-#{$device}-"], 232 | > [class^="#{$v2}flex-#{$device}-"] { 233 | padding-left: #{math.div($i, 16)}rem; 234 | padding-right: #{math.div($i, 16)}rem; 235 | } 236 | } 237 | // 上下间隔 238 | &.tb-#{$device}-#{$i} { 239 | margin-top: -#{math.div($i, 16)}rem; 240 | margin-bottom: -#{math.div($i, 16)}rem; 241 | > #{$v}col-#{$device}, 242 | > #{$v}flex-#{$device}, 243 | > [class*=" #{$v2}col-#{$device}-"], 244 | > [class^="#{$v2}col-#{$device}-"], 245 | > [class*=" #{$v2}flex-#{$device}-"], 246 | > [class^="#{$v2}flex-#{$device}-"] { 247 | padding-top: #{math.div($i, 16)}rem; 248 | padding-bottom: #{math.div($i, 16)}rem; 249 | } 250 | } 251 | } 252 | 253 | &.lr-#{$device}-0 { 254 | margin-left: 0; 255 | margin-right: 0; 256 | > #{$v}col-#{$device}, 257 | > #{$v}flex-#{$device}, 258 | > [class*=" #{$v2}col-#{$device}-"], 259 | > [class^="#{$v2}col-#{$device}-"], 260 | > [class*=" #{$v2}flex-#{$device}-"], 261 | > [class^="#{$v2}flex-#{$device}-"] { 262 | padding-left: 0; 263 | padding-right: 0; 264 | } 265 | } 266 | 267 | &.tb-#{$device}-0 { 268 | margin-top: 0; 269 | margin-bottom: 0; 270 | > #{$v}col-#{$device}, 271 | > #{$v}flex-#{$device}, 272 | > [class*=" #{$v2}col-#{$device}-"], 273 | > [class^="#{$v2}col-#{$device}-"], 274 | > [class*=" #{$v2}flex-#{$device}-"], 275 | > [class^="#{$v2}flex-#{$device}-"] { 276 | padding-top: 0; 277 | padding-bottom: 0; 278 | } 279 | } 280 | } 281 | } 282 | } 283 | -------------------------------------------------------------------------------- /packages/lib/animation.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";/*! 2 | * @Description: Vusui-css CSS样式库 3 | * @Author: linpan 4 | * @Date: 2022-11-22 17:39:35 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:28:50 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */.vus-trans{transition-property:all;transition-duration:.3s;transition-timing-function:ease}.vus-trans.fast{transition-duration:.25s}.vus-trans.slow{transition-duration:1s}.vus-trans.linear{transition-timing-function:linear}.vus-trans.ease-in{transition-timing-function:ease-in}.vus-trans.ease-out{transition-timing-function:ease-out}.vus-trans.ease-in-out{transition-timing-function:ease-in-out}.vus-anim{animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}.vus-anim.fast{animation-duration:.15s}.vus-anim.slow{animation-duration:1.2s}.vus-anim.linear{animation-timing-function:linear}.vus-anim.ease{animation-timing-function:ease}.vus-anim.ease-in{animation-timing-function:ease-in}.vus-anim.ease-in-out{animation-timing-function:ease-in-out}.vus-anim.infinite{animation-iteration-count:infinite}.vus-anim.spin{animation:VusSpin 1.5s infinite linear}.vus-anim.spin-pulse{animation:VusSpin 1.5s infinite steps(16)}.vus-anim.flash{animation-name:vusFlash}.vus-anim.fade-in{animation-name:VusFadeIn}.vus-anim.fade-out{animation-name:VusFadeOut}.vus-anim.up-slide-in{animation-name:VusUpSlideIn}.vus-anim.up-slide-out{animation-name:VusUpSlideOut}.vus-anim.up-min-slide-in{animation-name:VusUpMinSlideIn}.vus-anim.up-min-slide-out{animation-name:VusUpMinSlideOut}.vus-anim.down-slide-in{animation-name:VusDownSlideIn}.vus-anim.down-slide-out{animation-name:VusDownSlideOut}.vus-anim.down-min-slide-in{animation-name:VusDownMinSlideIn}.vus-anim.down-min-slide-out{animation-name:VusDownMinSlideOut}.vus-anim.left-slide-in{animation-name:VusLeftSlideIn}.vus-anim.left-slide-out{animation-name:VusLeftSlideOut}.vus-anim.right-slide-in{animation-name:VusRightSlideIn}.vus-anim.right-slide-out{animation-name:VusRightSlideOut}.vus-anim.min-zoom-in{animation-name:VusMinZoomIn}.vus-anim.min-zoom-out{animation-name:VusMinZoomOut}.vus-anim.max-zoom-in{animation-name:VusMaxZoomIn}.vus-anim.max-zoom-out{animation-name:VusMaxZoomOut}.vus-anim.up-zoom-in{animation-name:VusUpZoomIn}.vus-anim.down-zoom-in{animation-name:VusDownZoomIn}.vus-anim.left-zoom-in{animation-name:VusLeftZoomIn}.vus-anim.right-zoom-in{animation-name:VusRightZoomIn}.vus-anim.flip{animation-name:VusFlip;backface-visibility:visible}.vus-anim.shake{animation-name:VusShake}.vus-anim.bounce{animation-name:VusBounce;transform-origin:center bottom}.vus-anim.left-bounce-in{animation-name:VusLeftBounceIn}.vus-anim.left-bounce-out{animation-name:VusBounceOutLeft}.vus-anim.right-bounce-in{animation-name:VusRightBounceIn}.vus-anim.right-bounce-out{animation-name:VusRightBounceOut}.vus-anim.rubber-band{animation-name:VusRubberBand}@keyframes VusSpin{0%{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes vusFlash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes VusFadeIn{0%{opacity:0}to{opacity:1}}@keyframes VusFadeOut{0%{opacity:1}to{opacity:0}}@keyframes VusUpSlideIn{0%{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}@keyframes VusUpSlideOut{0%{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}@keyframes VusUpMinSlideIn{0%{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}}@keyframes VusUpMinSlideOut{0%{opacity:1}to{opacity:0;transform:translate3d(0,20px,0)}}@keyframes VusDownSlideIn{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}@keyframes VusDownSlideOut{0%{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,-100%,0)}}@keyframes VusDownMinSlideIn{0%{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:none}}@keyframes VusDownMinSlideOut{0%{opacity:1}to{opacity:0;transform:translate3d(0,-20px,0)}}@keyframes VusLeftSlideIn{0%{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}@keyframes VusLeftSlideOut{0%{opacity:1;transform:none}to{opacity:0;transform:translate3d(100%,0,0)}}@keyframes VusRightSlideIn{0%{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}@keyframes VusRightSlideOut{0%{opacity:1;transform:none}to{opacity:0;transform:translate3d(-100%,0,0)}}@keyframes VusMinZoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:1}}@keyframes VusMinZoomOut{0%{opacity:1}to{opacity:0;transform:scale3d(.3,.3,.3)}}@keyframes VusMaxZoomIn{0%{opacity:0;transform:scale3d(1.2,1.2,1.2)}to{opacity:1;transform:none}}@keyframes VusMaxZoomOut{0%{opacity:1}to{opacity:0;transform:scale3d(1.2,1.2,1.2)}}@keyframes VusUpZoomIn{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}to{transform:none}}@keyframes VusDownZoomIn{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}to{transform:none}}@keyframes VusLeftZoomIn{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}to{transform:none}}@keyframes VusRightZoomIn{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}to{transform:none}}@keyframes VusFlip{0%{transform:perspective(600px) rotateY(-360deg);animation-timing-function:ease-out}40%{transform:perspective(600px) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out}50%{transform:perspective(600px) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in}80%{transform:perspective(600px) scale3d(.95,.95,.95);animation-timing-function:ease-in}to{transform:perspective(600px);animation-timing-function:ease-in}}@keyframes VusShake{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}@keyframes VusBounce{0%,20%,53%,80%,to{transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{transition-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{transition-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}@keyframes VusLeftBounceIn{0%,60%,75%,90%,to{transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-100%,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}@keyframes VusBounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-100%,0,0)}}@keyframes VusRightBounceIn{0%,60%,75%,90%,to{transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(100%,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}@keyframes VusRightBounceOut{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(100%,0,0)}}@keyframes VusRubberBand{0%{transform:scaleZ(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleZ(1)}} 11 | -------------------------------------------------------------------------------- /packages/lib/typography.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";/*! 2 | * @Description: Vusui-css CSS样式库 3 | * @Author: linpan 4 | * @Date: 2022-11-22 17:39:35 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2023-05-12 10:28:50 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */.vus-h1,.vus-h2,.vus-h3,.vus-h4,.vus-h5,.vus-h6{line-height:1.3;color:inherit;font-family:inherit;font-weight:700}.vus-h1{font-size:2.5rem}.vus-h2{font-size:2rem}.vus-h3{font-size:1.75rem}.vus-h4{font-size:1.5rem}.vus-h5{font-size:1.25rem}.vus-h6{font-size:.9375rem}.vus-sub,.vus-sup{font-size:75%;line-height:1;position:relative;vertical-align:baseline;display:inline-flex}.vus-sub{bottom:-.3125rem}.vus-sup{top:-.5625rem}.vus-text-left{text-align:left}.vus-text-right{text-align:right}.vus-text-center{text-align:center}.vus-text-justify{text-align:justify}.vus-text-indent{text-indent:2em}.vus-text-spacing{letter-spacing:.125rem}.vus-text-lowercase{text-transform:lowercase}.vus-text-uppercase{text-transform:uppercase}.vus-text-capitalize{text-transform:capitalize}.vus-text-through{text-decoration:line-through}.vus-text-overline{text-decoration:overline}.vus-text-underline{text-decoration:underline}.vus-text-nowrap{white-space:nowrap}.vus-text-letter{word-break:break-all}.vus-text-word{word-wrap:break-word}.vus-text-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.vus-text-ellipsis.line-2,.vus-text-ellipsis.line-3{display:-webkit-box;white-space:normal;word-break:break-all;-webkit-box-orient:vertical}.vus-text-ellipsis.line-2{-webkit-line-clamp:2}.vus-text-ellipsis.line-3{-webkit-line-clamp:3}.vus-fw-100{font-weight:100}.vus-fw-200{font-weight:200}.vus-fw-300{font-weight:300}.vus-fw-400{font-weight:400}.vus-fw-500{font-weight:500}.vus-fw-600{font-weight:600}.vus-fw-700{font-weight:700}.vus-fw-normal{font-weight:400}.vus-fs-italic{font-style:italic}.vus-fs-normal{font-style:normal}.vus-lh-inherit{line-height:inherit}.vus-lh-1{line-height:1}.vus-lh-1-1{line-height:1.1}.vus-lh-1-2{line-height:1.2}.vus-lh-1-3{line-height:1.3}.vus-lh-1-4{line-height:1.4}.vus-lh-1-5{line-height:1.5}.vus-lh-1-6{line-height:1.6}.vus-lh-1-7{line-height:1.7}.vus-lh-1-8{line-height:1.8}.vus-lh-1-9{line-height:1.9}.vus-lh-2{line-height:2}.vus-hidden{overflow:hidden}.vus-hidden-y{overflow-y:hidden}.vus-hidden-y-auto{overflow-y:auto}.vus-hidden-x{overflow-x:hidden}.vus-hidden-x-auto{overflow-x:auto}.vus-hidden-auto{overflow:auto}.vus-hidden-auto,.vus-hidden-x-auto,.vus-hidden-y-auto{-webkit-overflow-scrolling:touch}.vus-visible{overflow:visible}.vus-inline{display:inline}.vus-inline-block{display:inline-block}.vus-align-top{vertical-align:top}.vus-align-middle{vertical-align:middle}.vus-align-bottom{vertical-align:bottom}.vus-align-baseline{vertical-align:baseline}.vus-block,.vus-show{display:block}.vus-hide{display:none}.vus-pe-auto{pointer-events:auto}.vus-pe-none{pointer-events:none}.vus-pe-all{pointer-events:all}.vus-border-box{box-sizing:border-box}.vus-content-box{box-sizing:content-box}.vus-fl{float:left}.vus-fr{float:right}.vus-fn{float:none}.vus-cursor-default{cursor:default}.vus-cursor-pointer{cursor:pointer}.vus-cursor-disabled{cursor:not-allowed}.vus-cursor-help{cursor:help}.vus-clearfix:before,.vus-clearfix:after{display:table;content:" "}.vus-clearfix:after{clear:both}@media (min-width: 576px){.vus-text-xs-left{text-align:left}.vus-text-xs-right{text-align:right}.vus-text-xs-center{text-align:center}.vus-text-xs-justify{text-align:justify}.vus-fw-xs-100{font-weight:100}.vus-fw-xs-200{font-weight:200}.vus-fw-xs-300{font-weight:300}.vus-fw-xs-400{font-weight:400}.vus-fw-xs-500{font-weight:500}.vus-fw-xs-600{font-weight:600}.vus-fw-xs-700{font-weight:700}.vus-fw-xs-normal{font-weight:400}.vus-lh-xs-inherit{line-height:inherit}.vus-lh-xs-1{line-height:1}.vus-lh-xs-1-1{line-height:1.1}.vus-lh-xs-1-2{line-height:1.2}.vus-lh-xs-1-3{line-height:1.3}.vus-lh-xs-1-4{line-height:1.4}.vus-lh-xs-1-5{line-height:1.5}.vus-lh-xs-1-6{line-height:1.6}.vus-lh-xs-1-7{line-height:1.7}.vus-lh-xs-1-8{line-height:1.8}.vus-lh-xs-1-9{line-height:1.9}.vus-lh-xs-2{line-height:2}.vus-show-xs{display:block}.vus-hide-xs{display:none}.vus-fl-xs{float:left}.vus-fr-xs{float:right}.vus-fn-xs{float:none}}@media (min-width: 768px){.vus-text-sm-left{text-align:left}.vus-text-sm-right{text-align:right}.vus-text-sm-center{text-align:center}.vus-text-sm-justify{text-align:justify}.vus-fw-sm-100{font-weight:100}.vus-fw-sm-200{font-weight:200}.vus-fw-sm-300{font-weight:300}.vus-fw-sm-400{font-weight:400}.vus-fw-sm-500{font-weight:500}.vus-fw-sm-600{font-weight:600}.vus-fw-sm-700{font-weight:700}.vus-fw-sm-normal{font-weight:400}.vus-lh-sm-inherit{line-height:inherit}.vus-lh-sm-1{line-height:1}.vus-lh-sm-1-1{line-height:1.1}.vus-lh-sm-1-2{line-height:1.2}.vus-lh-sm-1-3{line-height:1.3}.vus-lh-sm-1-4{line-height:1.4}.vus-lh-sm-1-5{line-height:1.5}.vus-lh-sm-1-6{line-height:1.6}.vus-lh-sm-1-7{line-height:1.7}.vus-lh-sm-1-8{line-height:1.8}.vus-lh-sm-1-9{line-height:1.9}.vus-lh-sm-2{line-height:2}.vus-show-sm{display:block}.vus-hide-sm{display:none}.vus-fl-sm{float:left}.vus-fr-sm{float:right}.vus-fn-sm{float:none}}@media (min-width: 992px){.vus-text-md-left{text-align:left}.vus-text-md-right{text-align:right}.vus-text-md-center{text-align:center}.vus-text-md-justify{text-align:justify}.vus-fw-md-100{font-weight:100}.vus-fw-md-200{font-weight:200}.vus-fw-md-300{font-weight:300}.vus-fw-md-400{font-weight:400}.vus-fw-md-500{font-weight:500}.vus-fw-md-600{font-weight:600}.vus-fw-md-700{font-weight:700}.vus-fw-md-normal{font-weight:400}.vus-lh-md-inherit{line-height:inherit}.vus-lh-md-1{line-height:1}.vus-lh-md-1-1{line-height:1.1}.vus-lh-md-1-2{line-height:1.2}.vus-lh-md-1-3{line-height:1.3}.vus-lh-md-1-4{line-height:1.4}.vus-lh-md-1-5{line-height:1.5}.vus-lh-md-1-6{line-height:1.6}.vus-lh-md-1-7{line-height:1.7}.vus-lh-md-1-8{line-height:1.8}.vus-lh-md-1-9{line-height:1.9}.vus-lh-md-2{line-height:2}.vus-show-md{display:block}.vus-hide-md{display:none}.vus-fl-md{float:left}.vus-fr-md{float:right}.vus-fn-md{float:none}}@media (min-width: 1200px){.vus-text-lg-left{text-align:left}.vus-text-lg-right{text-align:right}.vus-text-lg-center{text-align:center}.vus-text-lg-justify{text-align:justify}.vus-fw-lg-100{font-weight:100}.vus-fw-lg-200{font-weight:200}.vus-fw-lg-300{font-weight:300}.vus-fw-lg-400{font-weight:400}.vus-fw-lg-500{font-weight:500}.vus-fw-lg-600{font-weight:600}.vus-fw-lg-700{font-weight:700}.vus-fw-lg-normal{font-weight:400}.vus-lh-lg-inherit{line-height:inherit}.vus-lh-lg-1{line-height:1}.vus-lh-lg-1-1{line-height:1.1}.vus-lh-lg-1-2{line-height:1.2}.vus-lh-lg-1-3{line-height:1.3}.vus-lh-lg-1-4{line-height:1.4}.vus-lh-lg-1-5{line-height:1.5}.vus-lh-lg-1-6{line-height:1.6}.vus-lh-lg-1-7{line-height:1.7}.vus-lh-lg-1-8{line-height:1.8}.vus-lh-lg-1-9{line-height:1.9}.vus-lh-lg-2{line-height:2}.vus-show-lg{display:block}.vus-hide-lg{display:none}.vus-fl-lg{float:left}.vus-fr-lg{float:right}.vus-fn-lg{float:none}}@media (min-width: 1920px){.vus-text-xl-left{text-align:left}.vus-text-xl-right{text-align:right}.vus-text-xl-center{text-align:center}.vus-text-xl-justify{text-align:justify}.vus-fw-xl-100{font-weight:100}.vus-fw-xl-200{font-weight:200}.vus-fw-xl-300{font-weight:300}.vus-fw-xl-400{font-weight:400}.vus-fw-xl-500{font-weight:500}.vus-fw-xl-600{font-weight:600}.vus-fw-xl-700{font-weight:700}.vus-fw-xl-normal{font-weight:400}.vus-lh-xl-inherit{line-height:inherit}.vus-lh-xl-1{line-height:1}.vus-lh-xl-1-1{line-height:1.1}.vus-lh-xl-1-2{line-height:1.2}.vus-lh-xl-1-3{line-height:1.3}.vus-lh-xl-1-4{line-height:1.4}.vus-lh-xl-1-5{line-height:1.5}.vus-lh-xl-1-6{line-height:1.6}.vus-lh-xl-1-7{line-height:1.7}.vus-lh-xl-1-8{line-height:1.8}.vus-lh-xl-1-9{line-height:1.9}.vus-lh-xl-2{line-height:2}.vus-show-xl{display:block}.vus-hide-xl{display:none}.vus-fl-xl{float:left}.vus-fr-xl{float:right}.vus-fn-xl{float:none}} 11 | -------------------------------------------------------------------------------- /src/scss/mobile/flex.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @Description: flex盒子样式 3 | * @Author: linpan(45650368@qq.com) 4 | * @Date: 2022-11-23 11:08:26 5 | * @LastEditors: vusui 45650368@qq.com 6 | * @LastEditTime: 2022-12-02 09:19:42 7 | * @WebSite: https://vusui.com 8 | * @Copyright: 2017-present The Vusui Authors 9 | * @Readme: 开源不易，且用且珍惜！ 10 | */ 11 | @use "sass:math"; 12 | 13 | #{$v}box { 14 | display: flex; 15 | flex-wrap: wrap; 16 | flex-direction: row; 17 | box-sizing: border-box; 18 | 19 | &.inline { 20 | display: inline-flex; 21 | } 22 | &.nowrap { 23 | flex-wrap: nowrap; 24 | } 25 | &.wrap-reverse { 26 | flex-wrap: wrap-reverse; 27 | } 28 | &.row-reverse { 29 | flex-direction: row-reverse; 30 | } 31 | &.column { 32 | flex-direction: column; 33 | } 34 | &.column-reverse { 35 | flex-direction: column-reverse; 36 | } 37 | &.justify-start { 38 | justify-content: flex-start; 39 | } 40 | &.justify-end { 41 | justify-content: flex-end; 42 | } 43 | &.justify-center { 44 | justify-content: center; 45 | } 46 | &.justify-between { 47 | justify-content: space-between; 48 | } 49 | &.justify-around { 50 | justify-content: space-around; 51 | } 52 | &.items-start { 53 | align-items: flex-start; 54 | } 55 | &.items-end { 56 | align-items: flex-end; 57 | } 58 | &.items-center { 59 | align-items: center; 60 | } 61 | } 62 | 63 | // 不缩小适应 64 | #{$v}flex-shrink { 65 | flex-shrink: 0; 66 | } 67 | 68 | #{$v}col, 69 | #{$v}flex, 70 | [class*=" #{$v2}col-"], 71 | [class^="#{$v2}col-"], 72 | [class*=" #{$v2}flex-"], 73 | [class^="#{$v2}flex-"] { 74 | width: 100%; 75 | min-height: 1px; 76 | position: relative; 77 | box-sizing: border-box; 78 | } 79 | 80 | #{$v}col, 81 | #{$v}flex { 82 | max-width: 100%; 83 | flex-basis: 0; 84 | flex-grow: 1; 85 | 86 | &-auto { 87 | width: auto; 88 | max-width: none; 89 | flex: 0 0 auto; 90 | } 91 | } 92 | 93 | // flex 94 | @for $i from 1 through 24 { 95 | #{$v}col-#{$i} { 96 | max-width: math.div(100%, 24) * $i; 97 | flex: 0 0 math.div(100%, 24) * $i; 98 | } 99 | #{$v}flex-#{$i} { 100 | max-width: math.div(100%, $i); 101 | flex: 0 0 math.div(100%, $i); 102 | } 103 | } 104 | 105 | // 列偏移 106 | @for $i from 1 through 23 { 107 | #{$v}offset-#{$i} { 108 | margin-left: math.div(100%, 24) * $i; 109 | } 110 | } 111 | 112 | // 间隔 113 | #{$v}box { 114 | @for $i from 1 through 20 { 115 | // 左右间隔 116 | &.lr-#{$i} { 117 | margin-left: -#{math.div($i, 16)}rem; 118 | margin-right: -#{math.div($i, 16)}rem; 119 | > #{$v}col, 120 | > #{$v}flex, 121 | > [class*=" #{$v2}col-"], 122 | > [class^="#{$v2}col-"], 123 | > [class*=" #{$v2}flex-"], 124 | > [class^="#{$v2}flex-"] { 125 | padding-left: #{math.div($i, 16)}rem; 126 | padding-right: #{math.div($i, 16)}rem; 127 | } 128 | } 129 | // 上下间隔 130 | &.tb-#{$i} { 131 | margin-top: -#{math.div($i, 16)}rem; 132 | margin-bottom: -#{math.div($i, 16)}rem; 133 | > #{$v}col, 134 | > #{$v}flex, 135 | > [class*=" #{$v2}col-"], 136 | > [class^="#{$v2}col-"], 137 | > [class*=" #{$v2}flex-"], 138 | > [class^="#{$v2}flex-"] { 139 | padding-top: #{math.div($i, 16)}rem; 140 | padding-bottom: #{math.div($i, 16)}rem; 141 | } 142 | } 143 | } 144 | 145 | &.lr-0 { 146 | margin-left: 0; 147 | margin-right: 0; 148 | > #{$v}col, 149 | > #{$v}flex, 150 | > [class*=" #{$v2}col-"], 151 | > [class^="#{$v2}col-"], 152 | > [class*=" #{$v2}flex-"], 153 | > [class^="#{$v2}flex-"] { 154 | padding-left: 0; 155 | padding-right: 0; 156 | } 157 | } 158 | 159 | &.tb-0 { 160 | margin-top: 0; 161 | margin-bottom: 0; 162 | > #{$v}col, 163 | > #{$v}flex, 164 | > [class*=" #{$v2}col-"], 165 | > [class^="#{$v2}col-"], 166 | > [class*=" #{$v2}flex-"], 167 | > [class^="#{$v2}flex-"] { 168 | padding-top: 0; 169 | padding-bottom: 0; 170 | } 171 | } 172 | } 173 | 174 | // // 媒体查询 175 | // @each $device, $value in $media-min-width { 176 | // @include media-min($device) { 177 | // #{$v}col-#{$device}, 178 | // #{$v}flex-#{$device}, 179 | // [class*=" #{$v2}col-#{$device}-"], 180 | // [class^="#{$v2}col-#{$device}-"], 181 | // [class*=" #{$v2}flex-#{$device}-"], 182 | // [class^="#{$v2}flex-#{$device}-"] { 183 | // width: 100%; 184 | // min-height: 1px; 185 | // position: relative; 186 | // } 187 | 188 | // #{$v}col-#{$device}, 189 | // #{$v}flex-#{$device} { 190 | // max-width: 100%; 191 | // flex-basis: 0; 192 | // flex-grow: 1; 193 | 194 | // &-auto { 195 | // width: auto; 196 | // max-width: none; 197 | // flex: 0 0 auto; 198 | // } 199 | // } 200 | 201 | // // col & flex 202 | // @for $i from 1 through 24 { 203 | // #{$v}col-#{$device}-#{$i} { 204 | // max-width: math.div(100%, 24) * $i; 205 | // flex: 0 0 math.div(100%, 24) * $i; 206 | // } 207 | // #{$v}flex-#{$device}-#{$i} { 208 | // max-width: math.div(100%, $i); 209 | // flex: 0 0 math.div(100%, $i); 210 | // } 211 | // } 212 | 213 | // // 列偏移 214 | // @for $i from 1 through 23 { 215 | // #{$v}offset-#{$device}-#{$i} { 216 | // margin-left: math.div(100%, 24) * $i; 217 | // } 218 | // } 219 | 220 | // // 网格边距间隔 221 | // #{$v}box { 222 | // @for $i from 1 through 20 { 223 | // // 左右间隔 224 | // &.lr-#{$device}-#{$i} { 225 | // margin-left: -#{math.div($i, 16)}rem; 226 | // margin-right: -#{math.div($i, 16)}rem; 227 | // > #{$v}col-#{$device}, 228 | // > #{$v}flex-#{$device}, 229 | // > [class*=" #{$v2}col-#{$device}-"], 230 | // > [class^="#{$v2}col-#{$device}-"], 231 | // > [class*=" #{$v2}flex-#{$device}-"], 232 | // > [class^="#{$v2}flex-#{$device}-"] { 233 | // padding-left: #{math.div($i, 16)}rem; 234 | // padding-right: #{math.div($i, 16)}rem; 235 | // } 236 | // } 237 | // // 上下间隔 238 | // &.tb-#{$device}-#{$i} { 239 | // margin-top: -#{math.div($i, 16)}rem; 240 | // margin-bottom: -#{math.div($i, 16)}rem; 241 | // > #{$v}col-#{$device}, 242 | // > #{$v}flex-#{$device}, 243 | // > [class*=" #{$v2}col-#{$device}-"], 244 | // > [class^="#{$v2}col-#{$device}-"], 245 | // > [class*=" #{$v2}flex-#{$device}-"], 246 | // > [class^="#{$v2}flex-#{$device}-"] { 247 | // padding-top: #{math.div($i, 16)}rem; 248 | // padding-bottom: #{math.div($i, 16)}rem; 249 | // } 250 | // } 251 | // } 252 | 253 | // &.lr-#{$device}-0 { 254 | // margin-left: 0; 255 | // margin-right: 0; 256 | // > #{$v}col-#{$device}, 257 | // > #{$v}flex-#{$device}, 258 | // > [class*=" #{$v2}col-#{$device}-"], 259 | // > [class^="#{$v2}col-#{$device}-"], 260 | // > [class*=" #{$v2}flex-#{$device}-"], 261 | // > [class^="#{$v2}flex-#{$device}-"] { 262 | // padding-left: 0; 263 | // padding-right: 0; 264 | // } 265 | // } 266 | 267 | // &.tb-#{$device}-0 { 268 | // margin-top: 0; 269 | // margin-bottom: 0; 270 | // > #{$v}col-#{$device}, 271 | // > #{$v}flex-#{$device}, 272 | // > [class*=" #{$v2}col-#{$device}-"], 273 | // > [class^="#{$v2}col-#{$device}-"], 274 | // > [class*=" #{$v2}flex-#{$device}-"], 275 | // > [class^="#{$v2}flex-#{$device}-"] { 276 | // padding-top: 0; 277 | // padding-bottom: 0; 278 | // } 279 | // } 280 | // } 281 | // } 282 | // } 283 | --------------------------------------------------------------------------------