![](\"https://wusd-tech.oss-cn-hangzhou.aliyuncs.com/logo/logo_1.png\"){kind=logo}
Wusd-Scss A Sass Library
\r\n\r\n# Usage\r\n\r\n### Install:\r\n\r\n```bash\r\nnpm install wusd-scss -S\r\n```\r\n\r\nOnce the package is installed, you can import the library using ``` @import ``` / ```@use```\r\n```sass\r\n@use 'wusd-scss' as ws;\r\n```\r\n\r\nIf your project build by **webpack**, you can add the following configuration:\r\n```js\r\nmodule.exports = {\r\n module: {\r\n rules: [\r\n {\r\n test: /\\.s[ac]ss$/i,\r\n use: [\r\n \"style-loader\",\r\n \"css-loader\",\r\n {\r\n loader: \"sass-loader\",\r\n options: {\r\n additionalData: \"@use 'wusd-scss' as ws;\\r\\n\",\r\n },\r\n },\r\n ],\r\n },\r\n ],\r\n },\r\n}\r\n```\r\n\r\nor **vite** config:\r\n```js\r\n// vite.config.js\r\nexport default defineConfig({\r\n css: {\r\n preprocessorOptions: {\r\n scss: {\r\n quietDeps: true,\r\n additionalData: \"@use 'wusd-scss' as ws;\\r\\n\"\r\n }\r\n }\r\n },\r\n})\r\n```\r\n\r\n### Modify Default Configuration\r\nYou can use ```@forward``` to change config\r\n\r\n```sass\r\n// resetWusdScss.wcss:\r\n@forward 'wusd-scss' with (\r\n // all base color, \r\n $colors_map: (\r\n primary: (\r\n base: #6634E2,\r\n ),\r\n success: (\r\n base: #28C76F,\r\n ),\r\n warning: (\r\n base: #ff9c0e,\r\n ),\r\n danger: (\r\n base: #e82205,\r\n ),\r\n info: (\r\n base: #909399,\r\n ),\r\n ),\r\n $btn_options: (\r\n // btn radius\r\n radius: 6px,\r\n // btn box inline or block\r\n inline: true,\r\n // btn padding\r\n padding: 0.5em 1.2em,\r\n press: (\r\n // mask element at press. ::after or ::before\r\n el: after,\r\n color: #fff,\r\n opacity: 0.3,\r\n ),\r\n ),\r\n $card_options: (\r\n // card radius\r\n radius: 12px,\r\n // card padding\r\n padding: 10px,\r\n // card background color\r\n bgc: #fff,\r\n // card shadow\r\n shadow: 1px 1px 5px 5px #f1f1f1,\r\n ),\r\n $cell_options: (\r\n label_width: 80px,\r\n // gap between label & value box\r\n gap: 10px,\r\n // border bottom\r\n border: 1px solid #f1f1f1,\r\n ),\r\n $form_item_options: (\r\n label_width: 80px,\r\n align: left,\r\n border: 1px solid #fefefe,\r\n )\r\n);\r\n```\r\n```js\r\n// vite.config.ts\r\nexport default defineConfig({\r\n css: {\r\n preprocessorOptions: {\r\n scss: {\r\n // Close Warning\r\n quietDeps: true,\r\n additionalData: \"@use 'resetWusdScss.scss' as ws;\\r\\n\"\r\n }\r\n }\r\n },\r\n})\r\n```\r\nThen you can use light or dark primary color 1 to 9:\r\n```sass\r\nbody {\r\n color: $color_primary;\r\n color: $color_primary_light_1;\r\n color: $color_primary_dark_1;\r\n}\r\n```\r\n### Close Warning\r\n```\r\nDeprecation Warning [mixed-decls]: Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in `& {}`.\r\n```\r\n```ts\r\n// vite.config.ts\r\nexport default defineConfig({\r\n css: {\r\n preprocessorOptions: {\r\n scss: {\r\n // close warning\r\n quietDeps: true,\r\n }\r\n }\r\n },\r\n})\r\n```\r\n\r\n### Colors\r\n| name | color |\r\n| ------- | ------- |\r\n| primary | |\r\n| success | |\r\n| warning | |\r\n| danger | |\r\n| info | |\r\n\r\n### Mixins\r\n#### btn\r\n```scss\r\ndiv {\r\n @include ws.btn((\r\n type: primary,\r\n radius: 5px,\r\n plain: true,\r\n inline: true,\r\n padding: 10px,\r\n ));\r\n}\r\n```\r\n#### card\r\n```scss\r\ndiv {\r\n @include ws.card((\r\n radius: 12px,\r\n padding: 10px,\r\n bgc: #fff,\r\n shadow: 1px 1px 5px 5px #fefefe,\r\n ));\r\n}\r\n```\r\n#### cell\r\n```scss\r\ndiv {\r\n @include ws.cell((\r\n label_width: 80px,\r\n gap: 10px,\r\n border: 1px solid #fefefe,\r\n ));\r\n}\r\n```\r\n#### clearfix\r\n```scss\r\ndiv {\r\n @include ws.clearfix();\r\n}\r\n```\r\n#### flex\r\n```scss\r\ndiv {\r\n @include ws.flex((\r\n // values: left(start)、center、right(end) 、between、around、evenly \r\n x: left,\r\n // values: top(start)、center、bottom(end)\r\n y: top,\r\n // values: x、y\r\n dir: x,\r\n inline: false,\r\n wrap: false,\r\n gap: 0,\r\n ));\r\n}\r\ndiv {\r\n @include ws.flex_self((\r\n grow: 0,\r\n shrink: 0,\r\n basis: auto,\r\n ))\r\n}\r\n```\r\n#### cut_txt\r\ncut text overflow to ...\r\n```scss\r\ndiv {\r\n @include ws.cut_txt(1);\r\n}\r\n```\r\n#### form_item\r\n```scss\r\ndiv {\r\n @include ws.form_item((\r\n label_width: 80px,\r\n align: left,\r\n border: 1px solid #fefefe,\r\n ));\r\n}\r\n```\r\n#### safe_area\r\n```scss\r\ndiv {\r\n @include ws.safe_area_top();\r\n @include ws.safe_area_bottom();\r\n}\r\n```\r\n#### scrollbar\r\n```scss\r\ndiv {\r\n @include ws.scrollbar((hide: true));\r\n}\r\n```\r\n#### un_select\r\nmake word unselect\r\n```scss\r\ndiv {\r\n @include ws.un_select();\r\n}\r\n```\r\n","readmeFilename":"readme.md","author":{"name":"ccx"}}