{"id":16439967,"url":"https://github.com/waynecz/watson","last_synced_at":"2025-03-23T08:31:53.029Z","repository":{"id":92541759,"uuid":"140561240","full_name":"waynecz/Watson","owner":"waynecz","description":"👨🏻‍⚕️ A practical set of Sass mixins for BEMer","archived":false,"fork":false,"pushed_at":"2019-05-20T03:02:04.000Z","size":1039,"stargazers_count":10,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-01T23:27:05.064Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/waynecz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-11T10:42:18.000Z","updated_at":"2024-09-14T07:57:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"3a8b3223-2cf3-46e4-9dea-bdf43f21c5a6","html_url":"https://github.com/waynecz/Watson","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"8dc04d433b328574cde62463c202cdf804003fc3"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waynecz%2FWatson","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waynecz%2FWatson/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waynecz%2FWatson/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waynecz%2FWatson/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/waynecz","download_url":"https://codeload.github.com/waynecz/Watson/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245078067,"owners_count":20557274,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T09:10:50.606Z","updated_at":"2025-03-23T08:31:53.002Z","avatar_url":"https://github.com/waynecz.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"210px\" src=\"./assets/watson.png\" alt=\"logo\" /\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"GitHub release\" src=\"https://img.shields.io/badge/release-v1.0.6-orange.svg?style=for-the-badge\"/\u003e\n  \u003cimg alt=\"SASS\" src=\"https://img.shields.io/badge/SASS-3.4-green.svg?style=for-the-badge\"/\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003e\n    \u003ca href=\"https://zhuanlan.zhihu.com/p/28650879\"\u003eSass: 简单点, 写 BEM 的方式简单点\u003c/a\u003e\n  \u003c/b\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n## Intro\n\n- Mainly to simplify the way writing Nested BEM\n- Tools which are most of use\n\n\u003cbr\u003e\n\n## Supporting facilities\n\n1. [react-bem-classname](https://github.com/waynecz/react-bem-classname) for generating BEM classNames easily.\n2. [watson-snippet](https://github.com/waynecz/watson-snippet) vscode extension for coding faster.\n\n\u003cbr\u003e\n\n## Installation\n\n```bash\nnpm i watson-scss -D\n```\n\n```scss\n@import '~watson-scss';\n```\n\n\u003cbr\u003e\n\n## What Watson got\n\nWatson is devote itself to help write BEM fastly and furiously\n\n#### Nested B\\_\\_E--M\n\n```scss\n@include block(human) {\n  @include element(finger) {\n    @include modifier(little) {\n    }\n  }\n\n  @include modifier(male) {\n    @include element(leg) {\n    }\n  }\n\n  @include when(hurt) {\n    @include element(hand) {\n    }\n  }\n}\n```\n\nIt's defaultly equal to:\n\n```scss\n.human {\n  \u0026__finger {\n    \u0026--little {\n    }\n  }\n\n  \u0026--male {\n    .human__leg {\n    }\n  }\n\n  \u0026.is-hurt {\n    .human__head {\n    }\n  }\n}\n```\n\nAHA, here you may think the number of words you write **however was increased** ! Indeed but hang on my dude, that's why I introduce **Webstorm** for you, take a look of this\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"100%\" src=\"./assets/watson.gif\"/\u003e\n\u003c/p\u003e\n\nWatson support more complicated nest rule like:\n\n```scss\n@include element(arm) {\n  @include pseudo(focus) {\n    @include custom-selector('+') {\n      @include modifier(left) {\n      }\n    }\n\n    @include custom-selector('~', hand, right) {\n    }\n  }\n}\n```\n\nwhich'll convert to\n\n```scss\n.human {\n  \u0026__arm {\n    \u0026:focus {\n      \u0026 + .hum__arm--left {\n      }\n\n      \u0026 ~ .human__hand--right {\n      }\n    }\n  }\n}\n```\n\n#### with-attr\n\n```scss\n@include with-attr(disabled) {\n}\n// equals to\n\u0026[disabled] {\n}\n```\n\n\u003ca href=\"#tools\"\u003eSee other tools below 😋\u003c/a\u003e\n\n\u003cbr\u003e\n\n## Configuration\n\n```scss\n@import '~watson-scss';\n\n/* cover default config after import watson */\n$block-modifier: '_' !global;\n$sm: 720px !global;\n\n/* enable namespace */\n$namespace: 'ele' !global;\n...\n```\n\n[Look up more configuration here](./src/core/_config.scss)\n\n\u003cbr\u003e\n\n\u003ch2 id=\"tools\"\u003e List of tools\u003c/h2\u003e\n\n#### ▸ media query\n\n```scss\n@include meadia-query(sm) {\n}\n// equals to\n@media only screen and (min-width: 768px) {\n}\n```\n\n[See more breakpoints](./src/core/_config.scss)\n\n#### ▸ font-face\n\n```scss\n@include font-face(name, '//path/name', bold, italic);\n// equals to\n@font-face {\n  font-family: name;\n  font-style: italic;\n  font-weight: bold;\n  src: local($name), url('//path/name.woff2') format('woff2'), url('//path/name.woff') format('woff'), url('//path/name.ttf') format('truetype');\n}\n```\n\nif you want to specify format, insert format-list as 3rd argument\n\n```scss\n@include font-face(name, '//path/name', ttf otf, bold, italic);\n```\n\n#### ▸ shapes\n\n```scss\n// circle of 30px diameter\n@include circle(20px, #111);\n\n@include square(10px);\n\n// directions can be on of 'up' 'up-right' 'right' 'down-right'\n// 'down' 'down-left' 'left' 'up-left'\n@include triangle(up, 20px, 10px, #111);\n```\n\n#### ▸ transform\n\n```scss\n@include perfect-transition;\n// convert to\ntransition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n```\n\n```scss\ntransition: ts(0.2s, 1s);\n// convert to\ntransition: 0.2s 1s cubic-bezier(0.4, 0, 0.2, 1);\n```\n\n```scss\ntransform: tx(3px) ty(3px) txy(2px, 3px);\n// convert to\ntransform: translateX(3px) translateY(3px) translate(2px, 3px);\n```\n\n#### ▸ basic CN fonts\n\n```scss\n// 黑体 sans\n@include font-hei;\n// 楷体 serif\n@include font-kai;\n// 宋体\n@include font-song;\n// 仿宋\n@include font-fang-song;\n```\n\n[details here](https://zenozeng.github.io/fonts.css/)\n\n#### ▸ webkit\n\n```scss\n// thumb-color track-background width\n@include scroll-bar(#333, #fff, 3px);\n```\n\n```scss\n@include placeholder {\n  color: #eee;\n}\n```\n\n#### ▸ ellipsis\n\n```scss\n@include ellipsis;\n```\n\n#### ▸ share-rule\n\n```scss\n@include share-rule(rule) {\n  width: 1px;\n}\n\n.a {\n  @include extend-rule(rule);\n}\n\n.b {\n  @include extend-rule(rule);\n}\n\n// equals to\n.a,\n.b {\n  width: 1px;\n}\n```\n\n#### ▸ others\n\n```scss\ncolor: transparent(#000, 60);\n// convert to\ncolor: rgba(0, 0, 0, 0.6);\n```\n\n\u003cbr\u003e\n\n## Feel free to add your marvelous tools to Watson\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaynecz%2Fwatson","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwaynecz%2Fwatson","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaynecz%2Fwatson/lists"}