{"_id":"@_y/acss-sass","_rev":"4-ff30924780ffd7672bd2fa7a5fbb1e8f","name":"@_y/acss-sass","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@_y/acss-sass","version":"0.0.1","description":"atomic sass version","main":"sass/acss.scss","repository":{"type":"git","url":"git+https://github.com/yued-fe/acss-sass.git"},"keywords":["acss"],"author":{"name":"yfe-team"},"license":"MIT","bugs":{"url":"https://github.com/yued-fe/acss-sass/issues"},"homepage":"https://yued-fe.github.io/acss-sass/","gitHead":"b0a3018bf743b83b9dd43346e1f0263b9df459d3","_id":"@_y/acss-sass@0.0.1","_npmVersion":"5.6.0","_nodeVersion":"9.11.2","_npmUser":{"name":"ziven27","email":"ziven27@qq.com"},"dist":{"integrity":"sha512-jLIOVUykfC5cs8I2YoBEMqhMdPyoI/nHEfalo4nuA3qjLdWTD74zgX3vW80ey9jy0WiFvldcSEiXaibz89H/Nw==","shasum":"3e931f6e1283a0531c0b0bdc757b8f3b65b57c6a","tarball":"https://registry.npmjs.org/@_y/acss-sass/-/acss-sass-0.0.1.tgz","fileCount":4,"unpackedSize":7137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2ABVCRA9TVsSAnZWagAAqeAQAJ5L1S9i4IOyxS8kFTCO\nv6Q2tenrS5a/vu/oaEXsbjHOItxm7WCxbcN5unT02vH55PnYVWV+4IuL0cD1\nAfgbbtTs1M4bxrOKYuD1vkRezgl4ENDER28+2ONVDbv3XWu+zYZf0/TuJ2AN\n1GqPVwBBnRvvvP9tm8pVKt4hxlHULw8ohd4zfnNuphHUefxPyipeaFFlAbbg\nSti5dG1xFSCstFqQNQO8MdReBifYI4XAoW75eTS2E108TYG5vewZXdu71j0e\nTFIn9HnJDrv8JMYaqilHj46r0gnBG+W/lKzfX7TY+NENShuVd3qhbwuWBXoq\nnut+jGgxsWFPeKwXqK1ozo7DIptQ5bgw6S6LOmhLbnVo720/5bhCBbZ6rxGd\nZtHBe6rV5IITz8VOdBPRPCJ7HHI4e3AxmyL91d8VQJeLsxuM1OXnz79d51cq\nJOrpgwqq2GYyEch+u3EE30lzCZn9MmnueNQPMQXpbk6WGzDxWQhArMUH+SIl\nj8HydRKCzyXnSWyQsa2690BDxm4cEaljfvvZrsZQjJ77jlf7I9Jdk5IChBX6\nOqO6E/af8N9YdMjZhV6d2qbvog1sHnu1/FqIdhLRGEIEOLLeutEOXErjhnPY\nbxIQLeNh4udSY6/w82cT/PynA6cLC7YF/PgphElHCxoj3IDTTjGUwqDOMw3W\nro0w\r\n=8l5J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsmCNFwlzJijXIF6QsHoH1o/WJEEAWFhiLxSAi2Kc3UAIhAO5oq06XmBZkAjQCQiicbFa9wiHkm9K8/QP35q8Zah9F"}]},"maintainers":[{"name":"ziven27","email":"ziven27@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/acss-sass_0.0.1_1557659732585_0.7739079260693842"},"_hasShrinkwrap":false},"0.0.2":{"name":"@_y/acss-sass","version":"0.0.2","description":"atomic css sass version","main":"sass/acss.scss","repository":{"type":"git","url":"git+https://github.com/yued-fe/acss-sass.git"},"keywords":["acss","css","atomic","sass","scss"],"author":{"name":"yfe-team"},"license":"MIT","bugs":{"url":"https://github.com/yued-fe/acss-sass/issues"},"homepage":"https://yued-fe.github.io/acss-sass/","gitHead":"b0a3018bf743b83b9dd43346e1f0263b9df459d3","_id":"@_y/acss-sass@0.0.2","_npmVersion":"5.6.0","_nodeVersion":"9.11.2","_npmUser":{"name":"ziven27","email":"ziven27@qq.com"},"dist":{"integrity":"sha512-+legEJpCmMspyg3UzFm9Q6DUH4sCfYwUuCmBMElVkraKJaT6+3D5nCByW/SOW9ZF+fePfbV06l5QRcb4Ctv3yA==","shasum":"d3e7906c574839d6064d3d7c6de4a2bfbebb7816","tarball":"https://registry.npmjs.org/@_y/acss-sass/-/acss-sass-0.0.2.tgz","fileCount":4,"unpackedSize":7174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2AGYCRA9TVsSAnZWagAA5GIP/R1Nz68wK5UqYhPWi5lP\n3EOcN0ij74TchTDSzPO4Y/eKdzxUtHLSvK974k43SHDzgPef9bLh70ufgosE\nmVCARabwfn88p7Dz8p4me98lQHL9dxkwrFYn+i6GSibZ7nbR61prT6xwOrQ/\nhuFF1clfL43J3RHJaW7n+V4XKSgHAWVPREfeCymFhRVCSzsM2rGxa53Ptz0N\n7mOOPjqfLOxnVnjiGcC0IsyVFjATEz43x93jremL7tio8mUSf/fkVb5olVy2\nZb6PrinLye1xWjUiWfqCD+gzAfen7Kw22IPfe02l8lfZHUFf23wwsjtYy318\nHYgWbCEk2zjoojVHMVVPCTBoW/R8Iw9lexT72gXpWgVgUTnXsGZtYf/SDXYG\nGV7l2XnxC/lEuyKxfih+L0LNrEkFi6LhCNAnIYvmHIn66iR/XgJRVviKbJIU\nsXpCqHAUW7AGgQPiIXtVWREmHy2X7vtS8nPXIOOpwdFo4o0cDI58TDZd6RVR\ntT5y+zBTwhYdOf4ub5VECmWKGQ22XHRHNYvCVLArT6AdD5fLUI5x9CLPRtVD\nJf8Ak2fz0s8jW7gP76kDyJVsaZuwpcTigvDH+bsc8zghJKZx3iX85TL2Ut1u\nyGgnTJuRpGDmTEiALll9nARpI2NWNXu+Xhu1NM/cXR2ulpCywQsTCHrvKoy5\noBeR\r\n=Dagn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID5hG4IgyuC5T5jObbiHPlvyqLfye8yC+IvOnC2qKPhWAiEA0kxlHZp5LP4tlJdXE2irkIPv/HIFB31r6Zqmyswuons="}]},"maintainers":[{"name":"ziven27","email":"ziven27@qq.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/acss-sass_0.0.2_1557660055557_0.9616820639090271"},"_hasShrinkwrap":false}},"time":{"created":"2019-05-12T11:15:32.384Z","0.0.1":"2019-05-12T11:15:32.751Z","modified":"2022-04-04T10:51:44.211Z","0.0.2":"2019-05-12T11:20:55.660Z"},"maintainers":[{"email":"contrary.zhuo@gmail.com","name":"zhangdroid"},{"email":"1128yeye@sina.com","name":"nanasun"},{"email":"ziven27@qq.com","name":"ziven27"}],"description":"atomic css sass version","homepage":"https://yued-fe.github.io/acss-sass/","keywords":["acss","css","atomic","sass","scss"],"repository":{"type":"git","url":"git+https://github.com/yued-fe/acss-sass.git"},"author":{"name":"yfe-team"},"bugs":{"url":"https://github.com/yued-fe/acss-sass/issues"},"license":"MIT","readme":"# acss-sass\n\nAtomic css sass 版本。\n\nAtomic 是一种极简，高效的 CSS 代码库。\n是目前唯一可以做到随着项目推进 CSS 代码越来越少的代码库。\n类似张老师的 [quicklayout.css](https://www.zhangxinxu.com/wordpress/2014/03/quicklayout-css-%E5%BF%AB%E9%80%9F%E6%9E%84%E5%BB%BA%E7%BB%93%E6%9E%84%E5%85%BC%E5%AE%B9%E7%9A%84web%E9%A1%B5%E9%9D%A2/ \"quicklayout.css\")。\n\n## 如何使用?\n\n```\nnpm i @_y/acss-sass\n```\n\n```SASS\n@import \"@_y/acss-sass\";\n\n/* 定义内间距列表 */\n@include acss-p((2px, 4px, 8px, 16px));\n\n/* 定义外间距列表 */\n@include acss-m((2px, 4px, 8px, 16px));\n\n/* 定义字号列表 */\n@include acss-fs((2px, 4px, 8px, 16px));\n\n/* 定义字行高列表 */\n@include acss-lh((2px, 4px, 8px, 16px));\n\n```\n\n\n```HTML\n<div class=\"pr h300\">\n    <div class=\"pa l50p t50p\">\n        <h3 class=\"fs16 mb16\">标题</h3>\n        <p class=\"fs12\">正文</p>\n    <div>\n</div>\n```\n\n\n## 命名规则\n\n- 只取首字母 .db{ display:block; };\n- 有数字直接连接 .mb10{ margin-bottom:10px; };\n- 百分号用p（percent）表示 .w100p{ width:100%; };\n- 小数点用d（dot）表示 .lh1d2{ line-height:1.2};\n- 想要自定义，用`_`分割单词，`pa_auto`;\n\n\n## CSS API \n\nCSS API 主要分为 结构，样式，和自定义三个部分。\n\n具体细则可以看源代码注释。\n\n```\nlib/acss.scss\n```\n\n### CSS API 结构\n\n结构主要包括 `display`，`position`，`float`，`flex` 和其它。\n\n可以看到这里并不包含间距部分。因为不同的项目对于 `margin` 和 `padding` 的规则不一样，所以需要按照自己的项目按照\n\n> 有数字直接连接 .mb10{ margin-bottom:10px; };\n\n这个规则自行拓展。如果觉得构建比较麻烦，建议采用 acss-less 和 acss-sass 内置的 mixin 进行生成。比如在 sass 中可以这样使用。\n\n```SCSS\n@include acss-p((2, 4, 8, 12, 16, 20, 24, 32));\n```\n\n会生成以上数字对应的4个方向代码。\n\n### CSS API 样式\n\n样式主要包括 `字体`，`颜色`。\n在代码注释中可以看到 `acss.min.css` 只包含了黑白两个颜色。\n如果想要自定义按照以下规则推展。\n\n```CSS\n.c_xl{ color: #111; }       /* 文字比深更深 */\n.c_l { color: #222; }       /* 文字加深 */\n.c_m { color: #333; }       /* 文字主色 */\n.c_s { color: #666; }       /* 文字减比弱更弱 */\n```\n\n```\n.c_primary { color: blue; }    /* 主色 */\n.c_secondary { color: blue; }  /* 次级颜色 */\n.c_success { color: green; }   /* 成功 */\n.c_danger { color: red; }      /* 失败 */\n.c_warning { color: yellow; }  /* 警告  */\n```\n\n### CSS API 自定义样式\n\n|类名|作用|\n|:--|:--|\n| `.auto` | 带宽度的 block 元素水平居中对齐 |\n| `.clearfix` | 清除浮动 |\n| `.ell ` | 单行文字超出容器显示点点点 |\n| `.ell2row` | 两行文字超出容器显示点点点, 需要结合行高使用 |\n| `.i` | icon 图标基础方法 |\n| `.trans` | transition 动画 |\n| `.pa_middle` | 基于 `position:absolute` 上下居中 （兼容性） |\n| `.pa_center` | 基于 `position:absolute` 左右居中 （兼容性） |\n| `.pa_auto` | 基于 `position:absolute` 上下左右居中 （兼容性） |\n\n\n### Sass API \n\n|mixin|作用| 用法 |\n|:--|:--| :--| \n| `acss-p` | 定义内间距列表 | `@include acss-p((2px, 4px, 8px, 16px));` |\n| `acss-m` | 定义外间距列表 | `@include acss-m((2px, 4px, 8px, 16px));` |\n| `acss-fs` | 定义字号列表 | `@include acss-fs((2px, 4px, 8px, 16px));` |\n| `acss-lh` | 定义行高间距 | `@include acss-lh((2px, 4px, 8px, 16px));` |\n\n\n### DEMO\n\n<iframe src=\"./demo.html\" frameborder=\"1\" height=\"400\" width=\"100%\"></iframe>\n\n\n### 相关阅读\n\n1.  [「CSS思维」组件化VS原子化 ]( https://juejin.im/post/5b4063936fb9a04fb016b738 )\n2.  [ 如何管理 CSS “内裤” ]( https://juejin.im/post/5ba862d9f265da0ae472868a )\n3. [quickLayout.css-快速构建结构兼容的web页面](https://link.juejin.im/?target=https%3A%2F%2Fwww.zhangxinxu.com%2Fwordpress%2F2014%2F03%2Fquicklayout-css-%25E5%25BF%25AB%25E9%2580%259F%25E6%259E%2584%25E5%25BB%25BA%25E7%25BB%2593%25E6%259E%2584%25E5%2585%25BC%25E5%25AE%25B9%25E7%259A%2584web%25E9%25A1%25B5%25E9%259D%25A2%2F) @张老师；\n4. 「英」[在组件化浪潮中重新思考CSS](https://link.juejin.im/?target=http%3A%2F%2Fjohnpolacek.com%2Frethinking%2F)  @johnpolacek  虽然是英文，但是网页做得像PPT一样，通俗易懂，强推；\n5. [ACSS 官网](https://link.juejin.im/?target=https%3A%2F%2Facss.io%2F) @雅虎   这个思维最早应该是雅虎推出来的，最近他们有在推 React ACSS\n6. [关于HTML语义和前端架构](https://link.juejin.im/?target=http%3A%2F%2Fwww.w3cplus.com%2Fcss%2Fabout-html-semantics-front-end-architecture.html) @大漠；\n7. [「译」CSS通用类和“关注点分离”](https://link.juejin.im/?target=https%3A%2F%2Fwww.zcfy.cc%2Farticle%2Fcss-utility-classes-and-quote-separation-of-concerns-quote-4149.html%3Ft%3Dnew) @adamwathan；\n8. [「英」Styling React](https://link.juejin.im/?target=https%3A%2F%2Fsurvivejs.com%2Freact%2Fadvanced-techniques%2Fstyling-react%2F) @SURVIVEJS；\n9. [「英」CSS最佳实践探讨](https://link.juejin.im/?target=https%3A%2F%2Fwww.smashingmagazine.com%2F2013%2F10%2Fchallenging-css-best-practices-atomic-approach%2F) - Atomic CSS @smashingmagazine；\n","readmeFilename":"README.md"}