{"id":19781,"date":"2019-04-16T23:11:50","date_gmt":"2019-04-16T15:11:50","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19781"},"modified":"2022-08-23T19:08:33","modified_gmt":"2022-08-23T11:08:33","slug":"myth-css-preprocessor","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/myth-css-preprocessor\/","title":{"rendered":"Writing CSS with Myth For Web Designers"},"content":{"rendered":"<p>CSS has introduced a slew of new features such as CSS <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-linear-gradient\/\">Gradients<\/a>, <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-box-shadows-effects\/\">Shadows<\/a>, Border Radius, and <a href=\"https:\/\/www.hongkiat.com\/blog\/animatecss-css3-animation-library\/\">Animation<\/a> that can all be achieved purely with CSS. Several features have yet to be implemented due to a lack of browser support for CSS variables and CSS <code>calc()<\/code> functions. But if you can\u2019t really wait for the future, let\u2019s check out <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/segment-boneyard\/myth.io\">Myth<\/a>.<\/p>\n<p><a href=\"https:\/\/github.com\/segment-boneyard\/myth.io\">Myth<\/a>, unlike other <a href=\"https:\/\/www.hongkiat.com\/blog\/sass-vs-less\/\">pre-processors<\/a> that invent its own syntax, <strong>uses the same syntax as the standard spec<\/strong>. You can use <a href=\"https:\/\/www.hongkiat.com\/blog\/css-variables\/\">variables<\/a>, <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-calc-function\/\">perform mathematical<\/a> or <a href=\"https:\/\/www.hongkiat.com\/blog\/less-color-functions\/\">color operations<\/a>, and write new CSS properties in its official form. Its goal is to allow developers to write pure CSS while also being able to utilize future-standard syntax right now.<\/p>\n<p class=\"note\"><strong>Read Also: <\/strong><a href=\"https:\/\/www.hongkiat.com\/blog\/css-is-the-hardest-language\/\">5 Reasons Why CSS Could Be The Hardest Language Of All<\/a><\/p>\n<h2>Getting Started<\/h2>\n<p>To get started, we need to <strong>install Myth binary<\/strong> to be able to compile it to the current CSS standard. There isn\u2019t GUI application like <a href=\"https:\/\/www.hongkiat.com\/blog\/codekit-2\/\">Codekit<\/a> or <a href=\"https:\/\/www.hongkiat.com\/blog\/koala-application\/\">Koala<\/a> that supports Myth at the time of writing, so this is the only way to <strong>compile Myth into browser-compliant CSS format<\/strong>.<\/p>\n<p>In Terminal, type the following command:<\/p>\n<pre>\r\nnpm install -g myth\r\n<\/pre>\n<p>You can then use this command below, for instance, to compile <code>source.css<\/code> into <code>output.css<\/code>.<\/p>\n<pre>\r\nmyth source.css output.css\r\n<\/pre>\n<p>Or, type this to monitor the source.css and compile it to output.css for every change.<\/p>\n<pre>\r\nmyth --watch source.css output.css\r\n<\/pre>\n<p><strong>Myth does not introduce a new extension. <\/strong>It works with <code>.css<\/code> as shown above.<\/p>\n<h2>Writing CSS with Myth<\/h2>\n<p>Myth also does not introduce proprietary functions and rules like the other CSS Pre-processors, so you should be able to get used to Myth almost immediately. It is like plain CSS.<\/p>\n<h2>Variables<\/h2>\n<p>Let\u2019s start with Variables. In CSS, a variable is declared, like so:<\/p>\n<pre>\r\n:root {\r\n\tvar-length: 10px;\r\n\tvar-color: #000;\r\n}\r\n.class {\r\n\tbackground-color: var(color);\r\n\twidth: var(length);\r\n}\r\n<\/pre>\n<p>Myth compiles this code into browser-compliant format:<\/p>\n<pre>\r\n.class {\r\n\tbackground-color: #000;\r\n\twidth: 20px;\r\n}\r\n<\/pre>\n<p>You can refer to our previous article about <a href=\"https:\/\/www.hongkiat.com\/blog\/css-variables\/\">Using CSS Variables<\/a> for more details.<\/p>\n<h2>Math Operations<\/h2>\n<p>As mentioned, we can also perform mathematical operations with the new CSS3 <code>calc()<\/code> function. We have also covered this function in our previous article: <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-calc-function\/\">Using CSS3 Calc Function<\/a>.<\/p>\n<p>Let\u2019s extend our first example with it:<\/p>\n<pre>\r\n:root {\r\n\tvar-length: 10px;\r\n\tvar-color: #000;\r\n}\r\n.class {\r\n\tbackground-color: var(color);\r\n\twidth: calc(var(length) \/ 2);\r\n}\r\n<\/pre>\n<p>Myth compiles the above codes into:<\/p>\n<pre>\r\n.class {\r\n\tbackground-color: #000;\r\n\twidth: 10px;\r\n}\r\n<\/pre>\n<h2>Color Adjustments<\/h2>\n<p>Myth also supports some color operations or adjustments like in LESS or Sass. A new standard function for it is proposed to be included in CSS spec named <code>color()<\/code> \u2014  including a set of color-adjusting functions such as <code>tint()<\/code>, <code>shade()<\/code>, and <code>blend()<\/code> just to name a few.<\/p>\n<p>Below is one example: we increase the background color\u2019s lightness by <code>80%<\/code> and decrease the border color by <code>50%<\/code>.<\/p>\n<pre>\r\n:root {\r\n\tvar-length: 20px;\r\n\tvar-black: #000;\r\n\tvar-white: #fff;\r\n}\r\n.class {\r\n\tbackground-color: color(var(black) lightness(+ 80%));\r\n\tborder: var(border-width) solid color(var(white) lightness(- 50%));\r\n\twidth: calc(var(length) \/ 2);\r\n}\r\n<\/pre>\n<p>That code will produce:<\/p>\n<pre>\r\n.class {\r\n\tbackground-color: rgb(204, 204, 204);\r\n\tborder: 2px solid rgb(128, 128, 128);\r\n\twidth: 10px;\r\n}\r\n<\/pre>\n<h2>Autoprefixer<\/h2>\n<p>Myth will also automatically <strong>add vendor prefix<\/strong> to CSS properties. We can simply write, for instance, CSS Box Shadow, this way:<\/p>\n<pre>\r\n.class {\r\n\tbox-shadow: 2px 1px 0px var(black);\t\r\n}\r\n<\/pre>\n<p>The output is:<\/p>\n<pre>\r\n.class {\r\n\t-webkit-box-shadow: 2px 1px 0px #000;\r\n\tbox-shadow: 2px 1px 0px #000;\r\n}\r\n<\/pre>\n<h2>Final Thought<\/h2>\n<p>I love the idea of Myth. With it, we can write pure CSS of the future today without worrying about browser support. And since it uses the standard syntax, later, when all browsers have implemented it (as the standard), we won\u2019t need to rewrite all the code. I think I will start using it in every one of my future projects. What about you? Will you adopt the same?<\/p>","protected":false},"excerpt":{"rendered":"<p>CSS has introduced a slew of new features such as CSS Gradients, Shadows, Border Radius, and Animation that can all be achieved purely with CSS. Several features have yet to be implemented due to a lack of browser support for CSS variables and CSS calc() functions. But if you can\u2019t really wait for the future,&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Writing CSS with Myth For Web Designers - Hongkiat<\/title>\n<meta name=\"description\" content=\"CSS has introduced a slew of new features such as CSS Gradients, Shadows, Border Radius, and Animation that can all be achieved purely with CSS. Several\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/myth-css-preprocessor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Writing CSS with Myth For Web Designers\" \/>\n<meta property=\"og:description\" content=\"CSS has introduced a slew of new features such as CSS Gradients, Shadows, Border Radius, and Animation that can all be achieved purely with CSS. Several\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/myth-css-preprocessor\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-16T15:11:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-23T11:08:33+00:00\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/myth-css-preprocessor\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/myth-css-preprocessor\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Writing CSS with Myth For Web Designers\",\"datePublished\":\"2019-04-16T15:11:50+00:00\",\"dateModified\":\"2022-08-23T11:08:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/myth-css-preprocessor\\\/\"},\"wordCount\":504,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"CSS\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/myth-css-preprocessor\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/myth-css-preprocessor\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/myth-css-preprocessor\\\/\",\"name\":\"Writing CSS with Myth For Web Designers - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2019-04-16T15:11:50+00:00\",\"dateModified\":\"2022-08-23T11:08:33+00:00\",\"description\":\"CSS has introduced a slew of new features such as CSS Gradients, Shadows, Border Radius, and Animation that can all be achieved purely with CSS. Several\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/myth-css-preprocessor\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/myth-css-preprocessor\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/myth-css-preprocessor\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Writing CSS with Myth For Web Designers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Writing CSS with Myth For Web Designers - Hongkiat","description":"CSS has introduced a slew of new features such as CSS Gradients, Shadows, Border Radius, and Animation that can all be achieved purely with CSS. Several","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/myth-css-preprocessor\/","og_locale":"en_US","og_type":"article","og_title":"Writing CSS with Myth For Web Designers","og_description":"CSS has introduced a slew of new features such as CSS Gradients, Shadows, Border Radius, and Animation that can all be achieved purely with CSS. Several","og_url":"https:\/\/www.hongkiat.com\/blog\/myth-css-preprocessor\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-04-16T15:11:50+00:00","article_modified_time":"2022-08-23T11:08:33+00:00","author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/myth-css-preprocessor\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/myth-css-preprocessor\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Writing CSS with Myth For Web Designers","datePublished":"2019-04-16T15:11:50+00:00","dateModified":"2022-08-23T11:08:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/myth-css-preprocessor\/"},"wordCount":504,"commentCount":6,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["CSS","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/myth-css-preprocessor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/myth-css-preprocessor\/","url":"https:\/\/www.hongkiat.com\/blog\/myth-css-preprocessor\/","name":"Writing CSS with Myth For Web Designers - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2019-04-16T15:11:50+00:00","dateModified":"2022-08-23T11:08:33+00:00","description":"CSS has introduced a slew of new features such as CSS Gradients, Shadows, Border Radius, and Animation that can all be achieved purely with CSS. Several","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/myth-css-preprocessor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/myth-css-preprocessor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/myth-css-preprocessor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Writing CSS with Myth For Web Designers"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-593","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19781","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19781"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19781\/revisions"}],"predecessor-version":[{"id":61901,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19781\/revisions\/61901"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19781"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}