# sass-compact > let's go back to original way to write our css Latest version **0.0.12** (published 2019-07-18) · MIT license · 0 weekly downloads ## Install ```sh npm install sass-compact pnpm add sass-compact yarn add sass-compact bun add sass-compact ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; large bundle; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.12 | | Published | 2019-07-18 | | First published | 2019-07-18 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 16 | | Unpacked size | 28.1 MB | | Known vulnerabilities | 0 (+5 in 1 direct dependencies) | | Install scripts | yes | | GitHub stars | 1 | | Author | jsonchou | | Maintainers | jsonchou | ## Links - npm: https://www.npmjs.com/package/sass-compact - Repository: https://github.com/jsonchou/sassCompact - Homepage: https://github.com/jsonchou/sassCompact#readme - Issues: https://github.com/jsonchou/sassCompact/issues - npm.io page: https://npm.io/package/sass-compact ## Dependencies (16) - [precss](https://npm.io/package/precss.md) ^4.0.0 - [postcss](https://npm.io/package/postcss.md) ^7.0.17 - [autoprefixer](https://npm.io/package/autoprefixer.md) ^9.6.1 - [postcss-scss](https://npm.io/package/postcss-scss.md) ^2.0.0 - [postcss-extend](https://npm.io/package/postcss-extend.md) ^1.0.5 - [postcss-import](https://npm.io/package/postcss-import.md) ^12.0.1 - [postcss-mixins](https://npm.io/package/postcss-mixins.md) ^6.2.2 - [postcss-nested](https://npm.io/package/postcss-nested.md) ^4.1.2 - [postcss-nested-vars](https://npm.io/package/postcss-nested-vars.md) ^1.0.0 - [postcss-simple-vars](https://npm.io/package/postcss-simple-vars.md) ^5.0.2 - [postcss-sassy-mixins](https://npm.io/package/postcss-sassy-mixins.md) ^2.1.0 - [postcss-nested-import](https://npm.io/package/postcss-nested-import.md) ^0.1.0 - [postcss-simple-extend](https://npm.io/package/postcss-simple-extend.md) ^1.0.0 - [postcss-define-function](https://npm.io/package/postcss-define-function.md) ^0.1.2 - [postcss-advanced-variables](https://npm.io/package/postcss-advanced-variables.md) ^3.0.0 - [postcss-strip-inline-comments](https://npm.io/package/postcss-strip-inline-comments.md) ^0.1.5 ## Recent versions - 0.0.12 (latest) — 2019-07-18 - 0.0.11 — 2019-07-18 - 0.0.10 — 2019-07-18 - 0.0.9 — 2019-07-18 - 0.0.8 — 2019-07-18 - 0.0.7 — 2019-07-18 - 0.0.6 — 2019-07-18 ## README # sass-compact vscode plugin let's go back to original way to write our css ## Features * shortcut key **shift+alt+f** . * convert scss files and compact .wxss files * only format *.scss, *.wxss, *.less files. * support .wxss files and remove **v,r,p** scss mixin function flag and concat with rpx unit. ## Less * Wxss Setting - "sassCompact.Less": "false",//default false - "sassCompact.Wxss": "true",//default true ## Examples * .scss format ~~~ css .pt-select { margin: 0 auto 3.6rem; span { margin: 0 0.7rem; width: 11.7rem; height: 16.5rem; div { width: 11.7rem; border: 0.3rem solid #0d25a2; } } span:after { content: ""; top: 0; left: 0; width: 11.7rem; height: 16.5rem; s.d3 { margin-right: 15px; } } .on { div.d2 { border: 0.3rem solid #c62c34; form { input { border: 1px solid #ccc; } span:hover { font-size: 13rem; a .pi2 { margin-right: 10px; font-size: 10rem; } } } } } .on:after { content: ""; top: 0; left: 0; width: 11.7rem; height: 16.5rem; } } ~~~ * output ~~~ css .pt-select { margin: 0 auto 3.6rem; span { margin: 0 0.7rem; width: 11.7rem; height: 16.5rem; div { width: 11.7rem; border: 0.3rem solid #0d25a2; } } span:after { content: ""; top: 0; left: 0; width: 11.7rem; height: 16.5rem; s.d3 { margin-right: 15px; } } .on { div.d2 { border: 0.3rem solid #c62c34; form { input { border: 1px solid #ccc; } span:hover { font-size: 13rem; a .pi2 { margin-right: 10px; font-size: 10rem; } } } } } .on:after { content: ""; top: 0; left: 0; width: 11.7rem; height: 16.5rem; } } ~~~ * .wxss format ~~~ css .page-award { width: v(-750); .empty { font-size: v(-28); img { margin-top: v(-222); width: v(303); margin-bottom: v(10); } } .award-list { margin: 0 v(96); height: v(850); } .award-item { box-shadow:0 v(3) 0 0 rgba(13,17,90,1); box-shadow:0 v(3) 0 0 rgba(13,17,90,1); } .award-item_status { right: v(28); } .award-item_top { img{max-width: v(100)} } .award-item_btn { box-shadow:0 v(2) v(2) rgba(223, 198, 153, 1); &.used{background:#eee; } } } ~~~ * output ~~~ css .page-award { width: -750rpx; } .page-award .empty { font-size: -28rpx; } .page-award .empty img { margin-top: -222rpx; width: 303rpx; margin-bottom: 10rpx; } .page-award .award-list { margin: 0 96rpx; height: 850rpx; } .page-award .award-item { box-shadow:0 3rpx 0 0 rgba(13,17,90,1); box-shadow:0 3rpx 0 0 rgba(13,17,90,1); } .page-award .award-item_status { right: 28rpx; } .page-award .award-item_top img{max-width: 100rpx} .page-award .award-item_btn { box-shadow:0 2rpx 2rpx rgba(223, 198, 153, 1)} .page-award .award-item_btn.used{background:#eee; } ~~~ ## Release Notes ### 0.0.1 Initial release of cssCompact ----------------------------------------------------------------------------------------------------------- **Note:** * 1、if you can not format your **.scss/.less** files, maybe you can exchange LF with CRLF. * 2、if something weired, use **ctrl+K ctrl+D** to standard formatting your .scss files first. * 3、leave a blank before '**}**' to make your emmet effective and format your code. * 4、max nest level is 8, do not over this limit. * 5、if you have mixin funtions of v(100)、r(30)、p(5) in your .wxss files, it will convert to 100rpx、30rpx、5rpx. you can also disable this feature from settings.json with "sassCompact.Wxss": "false". **Enjoy!** --- _Source: https://npm.io/package/sass-compact · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._