CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Stylus | An expressive, robust, feature-rich CSS language built for Node.js</title> <meta name="description" content="Expressive, robust, feature-rich CSS language built for nodejs"> <link rel="stylesheet" href="/assets/style.73a37466.css"> <link rel="modulepreload" href="/assets/chunks/VPAlgoliaSearchBox.16b10681.js"> <link rel="modulepreload" href="/assets/chunks/ui-custom.226a870f.js"> <link rel="modulepreload" href="/assets/chunks/pwa.23d08e5d.js"> <link rel="modulepreload" href="/assets/app.9be607df.js"> <link rel="modulepreload" href="/assets/index.md.bdccec29.lean.js"> <meta name="theme-color" content="#ffffff"> <link rel="icon" href="/logo.svg" type="image/svg+xml"> <link rel="alternate icon" href="/favicon.ico" type="image/png" sizes="16x16"> <meta name="author" content="Stylus contributors"> <meta name="keywords" content="css, preprocessor, stylus, styl, stylesheet, css3"> <meta property="og:title" content="Stylus"> <meta property="og:description" content="Expressive, robust, feature-rich CSS language built for nodejs"> <meta property="og:url" content="https://www.stylus-lang.com/"> <meta property="og:image" content="https://www.stylus-lang.com/og.png"> <meta name="twitter:title" content="Stylus"> <meta name="twitter:description" content="Expressive, robust, feature-rich CSS language built for nodejs"> <meta name="twitter:image" content="https://www.stylus-lang.com/og.png"> <meta name="twitter:card" content="summary_large_image"> <link href="https://fonts.googleapis.com/css2?family=Readex+Pro:wght@200;400;600&display=swap" rel="stylesheet"> <link rel="mask-icon" href="/logo.svg" color="#ffffff"> <link rel="apple-touch-icon" href="/stylus.png" sizes="180x180"> <script async="true" src="https://www.googletagmanager.com/gtag/js?id=G-ZWB0JH7RJV"></script> <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-ZWB0JH7RJV");</script> <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script> </head> <body> <div id="app"><div class="Layout" data-v-58617c5c><span tabindex="-1" data-v-5bad87e6></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-5bad87e6> Skip to content </a><header class="VPNav no-sidebar" data-v-58617c5c data-v-0f2031e6><div class="VPNavBar" data-v-0f2031e6 data-v-3a03f684><div class="container" data-v-3a03f684><div class="VPNavBarTitle" data-v-3a03f684 data-v-2f91c8e3><a class="title" href="/" data-v-2f91c8e3><img class="logo" src="/logo.svg" data-v-2f91c8e3>Stylus</a></div><div class="content" data-v-3a03f684><div class="VPNavBarSearch search" data-v-3a03f684><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key">Meta</kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-3a03f684 data-v-1afc9dec><span id="main-nav-aria-label" class="visually-hidden" data-v-1afc9dec>Main Navigation</span><a class='VPLink link VPNavBarMenuLink' data-v-1afc9dec data-v-3f7bcea1 data-v-48abdd18 href='/try'>Playground</a><a class="VPLink link VPNavBarMenuLink" href="/docs/" data-v-1afc9dec data-v-3f7bcea1 data-v-48abdd18>Features</a><a class='VPLink link VPNavBarMenuLink' data-v-1afc9dec data-v-3f7bcea1 data-v-48abdd18 href='/docs/js'>API</a><a class='VPLink link VPNavBarMenuLink' data-v-1afc9dec data-v-3f7bcea1 data-v-48abdd18 href='/docs/executable'>CLI</a><div class="VPFlyout" data-v-1afc9dec data-v-9a77df2e><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-9a77df2e><span class="text" data-v-9a77df2e> v0.64.0 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-9a77df2e><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-9a77df2e><div class="VPMenu" data-v-9a77df2e data-v-e3d492a8><div class="items" data-v-e3d492a8><div class="VPMenuLink" data-v-e3d492a8 data-v-44c3a200><a class="VPLink link" href="https://github.com/stylus/stylus/releases" target="_blank" rel="noopener noreferrer" data-v-44c3a200 data-v-48abdd18>Release Notes <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-48abdd18><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><div class="VPMenuLink" data-v-e3d492a8 data-v-44c3a200><a class="VPLink link" href="https://github.com/stylus/stylus/blob/dev/Contributing.md" target="_blank" rel="noopener noreferrer" data-v-44c3a200 data-v-48abdd18>Contributing <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-48abdd18><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div></div></div></div></div></nav><div class="VPFlyout VPNavBarTranslations translations" data-v-3a03f684 data-v-36e1defe data-v-9a77df2e><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-9a77df2e><span class="text" data-v-9a77df2e><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="option-icon" data-v-9a77df2e><path d="M0 0h24v24H0z" fill="none"></path><path d=" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z " class="css-c4d79v"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-9a77df2e><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-9a77df2e><div class="VPMenu" data-v-9a77df2e data-v-e3d492a8><div class="items" data-v-36e1defe><p class="title" data-v-36e1defe>English</p><div class="VPMenuLink" data-v-36e1defe data-v-44c3a200><a class="VPLink link" href="https://www.stylus-lang.cn" target="_blank" rel="noopener noreferrer" data-v-44c3a200 data-v-48abdd18>中文<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-48abdd18><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><div class="VPMenuLink" data-v-36e1defe data-v-44c3a200><a class="VPLink link" href="https://www.zhangxinxu.com/jq/stylus" target="_blank" rel="noopener noreferrer" data-v-44c3a200 data-v-48abdd18>中文(张鑫旭)<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-48abdd18><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div></div></div></div></div><div class="VPNavBarAppearance appearance" data-v-3a03f684 data-v-0b2f3bac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-0b2f3bac data-v-741b6450 data-v-ab2de182><span class="check" data-v-ab2de182><span class="icon" data-v-ab2de182><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-741b6450><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-741b6450><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-3a03f684 data-v-5c5de4da data-v-69116e42><a class="VPSocialLink" href="https://www.twitter.com/s_chenlei" title="twitter" target="_blank" rel="noopener noreferrer" data-v-69116e42 data-v-367fdd9f><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-367fdd9f><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path></svg><span class="visually-hidden" data-v-367fdd9f>twitter</span></a><a class="VPSocialLink" href="https://github.com/stylus/stylus" title="github" target="_blank" rel="noopener noreferrer" data-v-69116e42 data-v-367fdd9f><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-367fdd9f><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden" data-v-367fdd9f>github</span></a></div><div class="VPFlyout VPNavBarExtra extra" data-v-3a03f684 data-v-5fe59986 data-v-9a77df2e><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9a77df2e><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9a77df2e><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9a77df2e><div class="VPMenu" data-v-9a77df2e data-v-e3d492a8><div class="group" data-v-5fe59986><p class="trans-title" data-v-5fe59986>English</p><div class="VPMenuLink" data-v-5fe59986 data-v-44c3a200><a class="VPLink link" href="https://www.stylus-lang.cn" target="_blank" rel="noopener noreferrer" data-v-44c3a200 data-v-48abdd18>中文<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-48abdd18><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><div class="VPMenuLink" data-v-5fe59986 data-v-44c3a200><a class="VPLink link" href="https://www.zhangxinxu.com/jq/stylus" target="_blank" rel="noopener noreferrer" data-v-44c3a200 data-v-48abdd18>中文(张鑫旭)<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-48abdd18><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div></div><div class="group" data-v-5fe59986><div class="item appearance" data-v-5fe59986><p class="label" data-v-5fe59986>Appearance</p><div class="appearance-action" data-v-5fe59986><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-5fe59986 data-v-741b6450 data-v-ab2de182><span class="check" data-v-ab2de182><span class="icon" data-v-ab2de182><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-741b6450><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-741b6450><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div></div></div><div class="group" data-v-5fe59986><div class="item social-links" data-v-5fe59986><div class="VPSocialLinks social-links-list" data-v-5fe59986 data-v-69116e42><a class="VPSocialLink" href="https://www.twitter.com/s_chenlei" title="twitter" target="_blank" rel="noopener noreferrer" data-v-69116e42 data-v-367fdd9f><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-367fdd9f><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path></svg><span class="visually-hidden" data-v-367fdd9f>twitter</span></a><a class="VPSocialLink" href="https://github.com/stylus/stylus" title="github" target="_blank" rel="noopener noreferrer" data-v-69116e42 data-v-367fdd9f><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-367fdd9f><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden" data-v-367fdd9f>github</span></a></div></div></div></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-3a03f684 data-v-0a484f1e><span class="container" data-v-0a484f1e><span class="top" data-v-0a484f1e></span><span class="middle" data-v-0a484f1e></span><span class="bottom" data-v-0a484f1e></span></span></button></div></div></div></header><div class="VPContent is-home" id="VPContent" data-v-58617c5c data-v-01cd33ac><div class="VPHome" data-v-01cd33ac data-v-70459187><div class="VPHomeHero" data-v-70459187><div class="VPHero has-image" data-v-edc7fb52><div class="container" data-v-edc7fb52><div class="main" data-v-edc7fb52><p class="name" data-v-edc7fb52><span class="clip" data-v-edc7fb52>Stylus</span></p><h1 class="text" data-v-edc7fb52>Expressive, dynamic, and robust CSS</h1><p class="tagline" data-v-edc7fb52>An expressive, robust, feature-rich CSS language built for Node.js</p><div class="actions" data-v-edc7fb52><div class="action" data-v-edc7fb52><a class="VPButton medium brand" href="/docs/executable" data-v-edc7fb52 data-v-cd96e374>Get Started</a></div><div class="action" data-v-edc7fb52><a class="VPButton medium alt" href="/docs/" data-v-edc7fb52 data-v-cd96e374>Features</a></div><div class="action" data-v-edc7fb52><a class="VPButton medium alt" href="/docs/compare" data-v-edc7fb52 data-v-cd96e374>Stylus vs Less vs Sass</a></div><div class="action" data-v-edc7fb52><a class="VPButton medium alt" href="https://github.com/stylus/stylus" target="_blank" rel="noopener noreferrer" data-v-edc7fb52 data-v-cd96e374>View on GitHub</a></div></div></div><div class="image" data-v-edc7fb52><div class="image-container" data-v-edc7fb52><div class="image-bg" data-v-edc7fb52></div><img class="image-src" src="/logo.svg" alt="Stylus" data-v-edc7fb52></div></div></div></div></div><div class="VPHomeFeatures" data-v-70459187 data-v-2bc52720><div class="container" data-v-2bc52720><div class="items" data-v-2bc52720><div class="grid-4 item" data-v-2bc52720><article class="VPBox" data-v-2bc52720 data-v-22eabb70><h1 class="title" data-v-22eabb70>Born for Node.js</h1><p class="details" data-v-22eabb70>TJ created this project for the Node.js Ecosystem in 2010</p></article></div><div class="grid-4 item" data-v-2bc52720><article class="VPBox" data-v-2bc52720 data-v-22eabb70><h1 class="title" data-v-22eabb70>CSS Compatible</h1><p class="details" data-v-22eabb70>Don't like indented syntax? OK, it's optional! You can write Stylus like CSS without the pain</p></article></div><div class="grid-4 item" data-v-2bc52720><article class="VPBox" data-v-2bc52720 data-v-22eabb70><h1 class="title" data-v-22eabb70>IDE support</h1><p class="details" data-v-22eabb70>Both VSCode (with Stylus extension) and WebStorm (built in) support Stylus development</p></article></div><div class="grid-4 item" data-v-2bc52720><article class="VPBox" data-v-2bc52720 data-v-22eabb70><h1 class="title" data-v-22eabb70>All optional</h1><p class="details" data-v-22eabb70>Braces, semi-colons, and more can be omitted from your code to keep it clean and smaller</p></article></div></div></div></div><div class="content"><div class="content-container"><main class="main"><div class="vp-doc" flex flex-col items-center mt-10><p class="text-center opacity-75"><a href="https://www.netlify.com" rel="noopener noreferrer"><img src="https://www.netlify.com/v3/img/components/netlify-color-bg.svg" alt="Deploys by Netlify" width="114" height="151"></a></p></div></main></div></div></div></div><footer class="VPFooter" data-v-58617c5c data-v-32972742><div class="container" data-v-32972742><p class="message" data-v-32972742>Released under the MIT License.</p><p class="copyright" data-v-32972742>Copyright © 2010-PRESENT tj, iChenLei and stylus contributors</p></div></footer></div></div> <script>__VP_HASH_MAP__ = JSON.parse("{\"docs_atrules.md\":\"24624d5d\",\"docs_bifs.md\":\"186ffdb4\",\"docs_block.md\":\"38216b55\",\"docs_comments.md\":\"e8ce0570\",\"docs_compare.md\":\"459ed3d7\",\"docs_conditionals.md\":\"2960ff2f\",\"docs_css-style.md\":\"b9d65035\",\"docs_error-reporting.md\":\"06315ae9\",\"docs_escape.md\":\"73380032\",\"docs_executable.md\":\"9173ab2c\",\"docs_extend.md\":\"0c581652\",\"docs_firebug.md\":\"537376d1\",\"docs_font-face.md\":\"92506baf\",\"docs_functions.md\":\"4a50033c\",\"docs_functions.url.md\":\"fb467206\",\"docs_gedit.md\":\"913dd537\",\"docs_hashes.md\":\"1a56d9e6\",\"docs_import.md\":\"8872939c\",\"docs_index.md\":\"52d8b011\",\"docs_interpolation.md\":\"c84981ed\",\"docs_introspection.md\":\"690526a3\",\"docs_iteration.md\":\"d771bf90\",\"docs_js.md\":\"cbb5aff8\",\"docs_keyframes.md\":\"a8b7340c\",\"docs_kwargs.md\":\"64b04227\",\"docs_lists.md\":\"7432ee00\",\"docs_literal.md\":\"5e36ea90\",\"docs_media.md\":\"d3c8404b\",\"docs_middleware.md\":\"53043ad3\",\"docs_mixins.md\":\"276e46d1\",\"docs_operators.md\":\"3f59d3cb\",\"docs_selectors.md\":\"0221f598\",\"docs_sourcemaps.md\":\"e96ce5d5\",\"docs_textmate.md\":\"1af1425f\",\"docs_vargs.md\":\"434dd042\",\"docs_variables.md\":\"6bde50b0\",\"index.md\":\"bdccec29\",\"try.md\":\"75deb388\"}")</script> <script type="module" async src="/assets/app.9be607df.js"></script> </body> </html>