29:null 2a:["$","title",null,{"children":"serializeCss - JSON to CSS: Examples | Mikhail Kotelnikov | Observable"}] 2f:[] 2d:{"id":"5be6c67030462617","slug":"serialize-css-example","title":"serializeCss - JSON to CSS: Examples","thumbnail":"d6eb83738ed078a74dca18f3eca49a9eb3c2ad5923bcfe02df905abe4f61668f","access_level":"public","create_time":"$D2022-06-24T07:43:13.636Z","update_time":"$D2022-06-24T08:55:42.226Z","view_time":null,"first_public_time":"$D2022-06-24T08:44:06.479Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"d4c65cdf77f8f4fd","login":"kotelnikov","name":"Mikhail Kotelnikov","avatar_url":"https://avatars-next.observableusercontent.com/529fa53c5b4acc1414273473d4e049e502c44c1bdbb1a0af81f7faa463dcff4f","tier":"starter_2024"},"version":154,"publish_version":154,"role":null,"authored":false,"authors":[{"type":"individual","id":"cdbfd308e8310490","login":"kotelnikov","name":"Mikhail Kotelnikov","avatar_url":"https://avatars-next.observableusercontent.com/529fa53c5b4acc1414273473d4e049e502c44c1bdbb1a0af81f7faa463dcff4f","tier":null}],"members":[{"type":"individual","id":"cdbfd308e8310490","login":"kotelnikov","name":"Mikhail Kotelnikov","avatar_url":"https://avatars-next.observableusercontent.com/529fa53c5b4acc1414273473d4e049e502c44c1bdbb1a0af81f7faa463dcff4f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"serializeCss - JSON to CSS: Examples","cells":[{"id":42,"value":"# serializeCss - JSON to CSS: Examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"toc({ headers: \"h2, h3\", title: \"\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"```js\nimport { serializeCss } from \"@kotelnikov/serialize-css\"\n```\n\nThe `serializeCss` allows to define CSS styles as JSON objects and serialize them to CSS strings.\nThe implementation is here: [@kotelnikov/serialize-css](https://observablehq.com/@kotelnikov/serialize-css).\nThis notebook contains examples of usage for this method.\n\n\n```js\nconst style = { ... } // Style definition\nconst css = serializeCss(style); // CSS string\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"## Styles Object Structrure\n\n* Top level parameters - class definitions\n* Simple properties (strings, numbers) - CSS property/value pairs\n* Embedded objects - embedded styles\n* Embedded styles starting with the \"&\" symbol - class modifiers\n\n```js\nconst style = {\n \".myButton\" : { // CSS selector: the \".myButton\" class in this case\n color : \"white\", // CSS property/value pairs\n backgroundColor: \"gray\",\n\n \".badge\" : { // Definition for a \".badge\" element embedded in the \".myButton\"\n ...\n },\n\n // Note: starts with the \"&\" symbol\n \"&.big\" : { // Definition of a modifier class \".myButton.big\"\n fontSize : \"1.2em\"\n },\n\n // Definition of multiple rules in one expression:\n \"&.big, &.huge\" : { // Definition of two modifier classes: \".big\" and \".huge\"\n fontWeight: \"strong\"\n }\n ...\n }\n}\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"\n## Example 1: Simple Classes\n```js\nconst style = {\n \".foo\": { // CSS selector (the \"foo\" class in this example)\n backgroundColor: \"red\", // CSS properties for the class\n color: \"white\",\n ...\n }\n}\nconst css = serializeCss(style);\nconsole.log(css);\n```\nOutput:\n```css\n.foo {\n background-color: red;\n color: white;\n ...\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"

\n \n

Hello, there!

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"\n## Example 2: Embedded Classes\n```js\nconst style = {\n \".button\": {\n backgroundColor: \"gray\",\n color: \"white\",\n ...\n \n \".chip\" : { // An chip in the button\n display : \"inline-block\",\n ...\n },\n }\n}\nconst css = serializeCss(style);\nconsole.log(css);\n```\nOutput:\n```css\n.button {\n background-color: gray;\n color: white;\n ...\n}\n.button .chip {\n display: inline-block;\n ...\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"

\n \n \n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"## Example 3: Class Modifiers\n```js\nconst style = {\n \".ex3-button\": {\n backgroundColor: \"navy\",\n color: \"yellow\",\n \n // *Note:* Starts with the \"&\" symbol!\n \"&.ex3-big\" : { // Modifier of the basic button class\n fontSize: \"1.2em\"\n },\n }\n}\nconst css = serializeCss(style);\nconsole.log(css);\n```\nOutput:\n```css\n.ex3-button {\n background-color: navy;\n color: yellow;\n}\n.ex3-button.ex3-big {\n font-size: 1.2em;\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"

\n \n \n \n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"## Example 4: Multiple Rules\n```js\nconst style = {\n \".ex4-button\": {\n backgroundColor: \"silver\",\n color: \"gray\",\n \n // *Note:* selectors are separated by \",\"\n \"&.ex4-big, &.ex4-huge\" : {\n fontWeight: \"strong\"\n },\n \n \"&.ex4-big\" : {\n fontSize: \"1.2em\"\n },\n \"&.ex4-huge\" : {\n fontSize: \"1.4em\"\n },\n }\n}\nconst css = serializeCss(style);\nconsole.log(css);\n```\nOutput:\n```css\n.ex4-button {\n background-color: silver;\n color: gray;\n}\n/* Rules are defined for both classes */\n.ex4-button.ex4-big,\n.ex4-button.ex4-huge {\n font-weight: strong;\n}\n.ex4-button.ex4-big {\n font-size: 1.2em;\n}\n.ex4-button.ex4-huge {\n font-size: 1.4em;\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"

\n \n \n \n \n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"import { serializeCss } from \"@kotelnikov/serialize-css\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"