31:[] 2f:{"title":"serializeCss - JSON to CSS: Examples","cells":[{"id":42,"value":"# serializeCss - JSON to CSS: Examples","pinned":false,"hidden":false,"mode":"md"},{"id":115,"value":"toc({ headers: \"h2, h3\", title: \"\" })","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":48,"value":"

\n \n

Hello, there!

","pinned":true,"hidden":false,"mode":"html"},{"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"},{"id":58,"value":"

\n \n \n

","pinned":true,"hidden":false,"mode":"html"},{"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"},{"id":99,"value":"

\n \n \n \n

","pinned":true,"hidden":false,"mode":"html"},{"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"},{"id":143,"value":"

\n \n \n \n \n

","pinned":true,"hidden":false,"mode":"html"},{"id":111,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"import { serializeCss } from \"@kotelnikov/serialize-css\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}