🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:

Response:

Calculated Shard: 112 (from laksa125)

2. Crawled Status Check

Query:

curl -X POST \
  'http://laksa112.int.ahrefs:8124/' \
  -H 'Content-Type: text/plain' \
  -H 'X-ClickHouse-Database: crawler3' \
  -H 'Authorization: Basic YXBpOg==' \
  -d 'SELECT getAhrefsURLFromUnparsed(src_unparsed) AS found_url, ifNull(toUnixTimestamp(download_stamp), 0) AS crawl_time, ifNull(toUnixTimestamp(props_url_first_seen), 0) AS first_indexed_time, download_http_code AS http_code, src_unparsed AS src_unparsed, src_root_hash AS src_root_hash, history_drop_reason AS history_drop_reason, meta_title AS meta_title, meta_descriptions AS meta_descriptions, attrs_boilerpipe_text AS attrs_boilerpipe_text, attrs_markdown AS attrs_markdown, attrs_readable_markdown AS attrs_readable_markdown, meta_canonical AS meta_canonical FROM crawler3.page_info_local FINAL PREWHERE (src_root_hash, src_unparsed) IN ((getAhrefsRootHashFromUnparsed(getAhrefsUnparsedNoserviceFromURL(\'https://sass-lang.com/guide/\')), getAhrefsUnparsedNoserviceFromURL(\'https://sass-lang.com/guide/\'))) FORMAT JSONEachRow'

Response:

{"found_url":"https:\/\/sass-lang.com\/guide\/","crawl_time":1775944528,"first_indexed_time":1554219526,"http_code":200,"src_unparsed":"com,sass-lang!\/guide\/ s443","src_root_hash":"7297080260423426912","history_drop_reason":null,"meta_title":"Sass: Sass Basics","meta_descriptions":["Syntactically Awesome Style Sheets"],"attrs_boilerpipe_text":"Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first.\nGo here\nif you want to learn how to get everything set\n \nup.\nPreprocessing\nPreprocessing permalink\nCSS\non its own can be fun, but stylesheets are getting larger, more complex, and\nharder to maintain. This is where a preprocessor can help. Sass has features\nthat don’t exist in\nCSS\nyet like nesting, mixins, inheritance, and other nifty\ngoodies that help you write robust, maintainable\n \nCSS\n.\nOnce you start tinkering with Sass, it will take your preprocessed Sass file and\nsave it as a normal\nCSS\nfile that you can use in your\n \nwebsite.\nThe most direct way to make this happen is in your terminal. Once Sass is\ninstalled, you can compile your Sass to\nCSS\nusing the\nsass\ncommand. You’ll\nneed to tell Sass which file to build from, and where to output\nCSS\nto. For\nexample, running\nsass input.scss output.css\nfrom your terminal would take a\nsingle Sass file,\ninput.scss\n, and compile that file to\noutput.css\n.\nYou can also watch individual files or directories with the\n--watch\nflag. The\nwatch flag tells Sass to watch your source files for changes, and re-compile\nCSS\neach time you save your Sass. If you wanted to watch (instead of manually build)\nyour\ninput.scss\nfile, you’d just add the watch flag to your command, like\n \nso:\nsass --watch input.scss output.css\nYou can watch and output to directories by using folder paths as your input and\noutput, and separating them with a colon. In this\n \nexample:\nsass --watch app\/sass:public\/stylesheets\nSass would watch all files in the\napp\/sass\nfolder for changes, and compile\nCSS\nto the\npublic\/stylesheets\nfolder.\n💡 Fun fact:\nSass has two syntaxes! The\nSCSS\nsyntax (\n.scss\n) is used most commonly. It’s\na superset of\nCSS\n, which means all valid\nCSS\nis also valid\nSCSS\n. The\nindented syntax (\n.sass\n) is more unusual: it uses indentation rather than\ncurly braces to nest statements, and newlines instead of semicolons to\nseparate them. All our examples are available in both\n \nsyntaxes.\nVariables\nVariables permalink\nThink of variables as a way to store information that you want to reuse\nthroughout your stylesheet. You can store things like colors, font stacks, or\nany\nCSS\nvalue you think you’ll want to reuse. Sass uses the\n$\nsymbol to make\nsomething a variable. Here’s an\n \nexample:\nSCSS\nSass\nCSS\nPlayground\nSCSS\nSyntax\n$font-stack\n:\nHelvetica\n,\nsans-serif\n;\n$primary-color\n:\n#333\n;\nbody\n{\nfont\n:\n100%\n$font-stack\n;\ncolor\n:\n$primary-color\n;\n}\nPlayground\nSass Syntax\n$font-stack\n:\nHelvetica, sans-serif\n$primary-color\n:\n#333\nbody\nfont\n:\n100\n%\n$font-stack\ncolor\n:\n$primary-color\nCSS\nOutput\nbody\n{\nfont\n:\n100% Helvetica\n,\nsans-serif\n;\ncolor\n:\n#333\n;\n}\nWhen the Sass is processed, it takes the variables we define for the\n$font-stack\nand\n$primary-color\nand outputs normal\nCSS\nwith our variable\nvalues placed in the\nCSS\n. This can be extremely powerful when working with brand\ncolors and keeping them consistent throughout the\n \nsite.\nNesting\nNesting permalink\nWhen writing\nHTML\nyou’ve probably noticed that it has a clear nested and visual\nhierarchy.\nCSS\n, on the other hand,\n \ndoesn’t.\nSass will let you nest your\nCSS\nselectors in a way that follows the same visual\nhierarchy of your\nHTML\n. Be aware that overly nested rules will result in\nover-qualified\nCSS\nthat could prove hard to maintain and is generally considered\nbad\n \npractice.\nWith that in mind, here’s an example of some typical styles for a site’s\n \nnavigation:\nSCSS\nSass\nCSS\nPlayground\nSCSS\nSyntax\nnav\n{\nul\n{\nmargin\n:\n0\n;\npadding\n:\n0\n;\nlist-style\n:\nnone\n;\n}\nli\n{\ndisplay\n:\ninline-block\n;\n}\na\n{\ndisplay\n:\nblock\n;\npadding\n:\n6px 12px\n;\ntext-decoration\n:\nnone\n;\n}\n}\nPlayground\nSass Syntax\nnav\nul\nmargin\n:\n0\npadding\n:\n0\nlist-style\n:\nnone\nli\ndisplay\n:\ninline-block\na\ndisplay\n:\nblock\npadding\n:\n6px 12px\ntext-decoration\n:\nnone\nCSS\nOutput\nnav ul\n{\nmargin\n:\n0\n;\npadding\n:\n0\n;\nlist-style\n:\nnone\n;\n}\nnav li\n{\ndisplay\n:\ninline-block\n;\n}\nnav a\n{\ndisplay\n:\nblock\n;\npadding\n:\n6px 12px\n;\ntext-decoration\n:\nnone\n;\n}\nYou’ll notice that the\nul\n,\nli\n, and\na\nselectors are nested inside the\nnav\nselector. This is a great way to organize your\nCSS\nand make it more\n \nreadable.\nPartials\nPartials permalink\nYou can create partial Sass files that contain little snippets of\nCSS\nthat you\ncan include in other Sass files. This is a great way to modularize your\nCSS\nand\nhelp keep things easier to maintain. A partial is a Sass file named with a\nleading underscore. You might name it something like\n_partial.scss\n. The\nunderscore lets Sass know that the file is only a partial file and that it\nshould not be generated into a\nCSS\nfile. Sass partials are used with the\n@use\nrule.\nModules\nModules permalink\nCompatibility:\nDart Sass\nsince 1.23.0\nLibSass\n✗\nRuby Sass\n✗\nOnly Dart Sass currently supports\n@use\n. Users of other implementations must\nuse the\n@import\nrule\ninstead.\nYou don’t have to write all your Sass in a single file. You can split it up\nhowever you want with the\n@use\nrule. This rule loads another Sass file as a\nmodule\n, which means you can refer to its variables,\nmixins\n, and\nfunctions\nin your Sass file with a namespace based on the filename. Using a\nfile will also include the\nCSS\nit generates in your compiled\n \noutput!\nSCSS\nSass\nCSS\nSCSS\nSyntax\n\/\/ _base.scss\n$font-stack\n:\nHelvetica\n,\nsans-serif\n;\n$primary-color\n:\n#333\n;\nbody\n{\nfont\n:\n100%\n$font-stack\n;\ncolor\n:\n$primary-color\n;\n}\n\/\/ styles.scss\n@use\n'base'\n;\n.inverse\n{\nbackground-color\n:\nbase.\n$primary-color\n;\ncolor\n:\nwhite\n;\n}\nSass Syntax\n\/\/ _base.sass\n$font-stack\n:\nHelvetica, sans-serif\n$primary-color\n:\n#333\nbody\nfont\n:\n100\n%\n$font-stack\ncolor\n:\n$primary-color\n\/\/ styles.sass\n@use\n'base'\n.inverse\nbackground-color\n:\nbase.\n$primary-color\ncolor\n:\nwhite\nCSS\nOutput\nbody\n{\nfont\n:\n100% Helvetica\n,\nsans-serif\n;\ncolor\n:\n#333\n;\n}\n.inverse\n{\nbackground-color\n:\n#333\n;\ncolor\n:\nwhite\n;\n}\nNotice we’re using\n@use 'base';\nin the\nstyles.scss\nfile. When you use a file\nyou don’t need to include the file extension. Sass is smart and will figure it\nout for\n \nyou.\nMixins\nMixins permalink\nSome things in\nCSS\nare a bit tedious to write, especially with\nCSS3\nand the many\nvendor prefixes that exist. A mixin lets you make groups of\nCSS\ndeclarations\nthat you want to reuse throughout your site. It helps keep your Sass very\nDRY\n.\nYou can even pass in values to make your mixin more flexible. Here’s an example\nfor\ntheme\n.\nSCSS\nSass\nCSS\nPlayground\nSCSS\nSyntax\n@mixin\ntheme\n(\n$theme\n:\nDarkGray\n)\n{\nbackground\n:\n$theme\n;\nbox-shadow\n:\n0 0 1px\nrgba\n(\n$theme\n,\n.25\n)\n;\ncolor\n:\n#fff\n;\n}\n.info\n{\n@include\ntheme\n;\n}\n.alert\n{\n@include\ntheme\n(\n$theme\n:\nDarkRed\n)\n;\n}\n.success\n{\n@include\ntheme\n(\n$theme\n:\nDarkGreen\n)\n;\n}\nPlayground\nSass Syntax\n@mixin\ntheme($theme: DarkGray)\nbackground\n:\n$theme\nbox-shadow\n:\n0 0 1px rgba(\n$theme\n, .25)\ncolor\n:\n#fff\n.info\n@include\ntheme\n.alert\n@include\ntheme($theme: DarkRed)\n.success\n@include\ntheme($theme: DarkGreen)\nCSS\nOutput\n.info\n{\nbackground\n:\nDarkGray\n;\nbox-shadow\n:\n0 0 1px\nrgba\n(\n169\n,\n169\n,\n169\n,\n0.25\n)\n;\ncolor\n:\n#fff\n;\n}\n.alert\n{\nbackground\n:\nDarkRed\n;\nbox-shadow\n:\n0 0 1px\nrgba\n(\n139\n,\n0\n,\n0\n,\n0.25\n)\n;\ncolor\n:\n#fff\n;\n}\n.success\n{\nbackground\n:\nDarkGreen\n;\nbox-shadow\n:\n0 0 1px\nrgba\n(\n0\n,\n100\n,\n0\n,\n0.25\n)\n;\ncolor\n:\n#fff\n;\n}\nTo create a mixin you use the\n@mixin\ndirective and give it a name. We’ve named\nour mixin\ntheme\n. We’re also using the variable\n$theme\ninside the parentheses\nso we can pass in a\ntheme\nof whatever we want. After you create your mixin,\nyou can then use it as a\nCSS\ndeclaration starting with\n@include\nfollowed by\nthe name of the\n \nmixin.\nExtend\/Inheritance\nExtend\/Inheritance permalink\nUsing\n@extend\nlets you share a set of\nCSS\nproperties from one selector to\nanother. In our example we’re going to create a simple series of messaging for\nerrors, warnings and successes using another feature which goes hand in hand\nwith extend, placeholder classes. A placeholder class is a special type of class\nthat only prints when it is extended, and can help keep your compiled\nCSS\nneat\nand\n \nclean.\nSCSS\nSass\nCSS\nPlayground\nSCSS\nSyntax\n\/* This\nCSS\nwill print because %message-shared is extended. *\/\n%message-shared\n{\nborder\n:\n1px solid #ccc\n;\npadding\n:\n10px\n;\ncolor\n:\n#333\n;\n}\n\/\/ This\nCSS\nwon't print because %equal-heights is never extended.\n%equal-heights\n{\ndisplay\n:\nflex\n;\nflex-wrap\n:\nwrap\n;\n}\n.message\n{\n@extend\n%message-shared\n;\n}\n.success\n{\n@extend\n%message-shared\n;\nborder-color\n:\ngreen\n;\n}\n.error\n{\n@extend\n%message-shared\n;\nborder-color\n:\nred\n;\n}\n.warning\n{\n@extend\n%message-shared\n;\nborder-color\n:\nyellow\n;\n}\nPlayground\nSass Syntax\n\/* This\nCSS\nwill print because %message-shared is extended. *\/\n%message-shared\nborder\n:\n1px solid #ccc\npadding\n:\n10px\ncolor\n:\n#333\n\/\/ This\nCSS\nwon't print because %equal-heights is never extended.\n%equal-heights\ndisplay\n:\nflex\nflex-wrap\n:\nwrap\n.message\n@extend\n%message-shared\n.success\n@extend\n%message-shared\nborder-color\n:\ngreen\n.error\n@extend\n%message-shared\nborder-color\n:\nred\n.warning\n@extend\n%message-shared\nborder-color\n:\nyellow\nCSS\nOutput\n\/* This\nCSS\nwill print because %message-shared is extended. *\/\n.warning, .error, .success, .message\n{\nborder\n:\n1px solid #ccc\n;\npadding\n:\n10px\n;\ncolor\n:\n#333\n;\n}\n.success\n{\nborder-color\n:\ngreen\n;\n}\n.error\n{\nborder-color\n:\nred\n;\n}\n.warning\n{\nborder-color\n:\nyellow\n;\n}\nWhat the above code does is tells\n.message\n,\n.success\n,\n.error\n, and\n.warning\nto behave just like\n%message-shared\n. That means anywhere that\n%message-shared\nshows up,\n.message\n,\n.success\n,\n.error\n,\n&\n.warning\nwill\ntoo. The magic happens in the generated\nCSS\n, where each of these classes will\nget the same\nCSS\nproperties as\n%message-shared\n. This helps you avoid having to\nwrite multiple class names on\nHTML\n \nelements.\nYou can extend most simple\nCSS\nselectors in addition to placeholder classes in\nSass, but using placeholders is the easiest way to make sure you aren’t\nextending a class that’s nested elsewhere in your styles, which can result in\nunintended selectors in your\n \nCSS\n.\nNote that the\nCSS\nin\n%equal-heights\nisn’t generated, because\n%equal-heights\nis never\n \nextended.\nOperators\nOperators permalink\nDoing math in your\nCSS\nis very helpful. Sass has a handful of standard math\noperators like\n+\n,\n-\n,\n*\n,\nmath.div()\n, and\n%\n. In our example we’re going\nto do some simple math to calculate widths for an\narticle\nand\naside\n.\nSCSS\nSass\nCSS\nPlayground\nSCSS\nSyntax\n@use\n\"sass:math\"\n;\n.container\n{\ndisplay\n:\nflex\n;\n}\narticle[role=\"main\"]\n{\nwidth\n:\nmath.\ndiv\n(\n600px\n,\n960px\n)\n*\n100%\n;\n}\naside[role=\"complementary\"]\n{\nwidth\n:\nmath.\ndiv\n(\n300px\n,\n960px\n)\n*\n100%\n;\nmargin-left\n:\nauto\n;\n}\nPlayground\nSass Syntax\n@use\n\"sass:math\"\n.container\ndisplay\n:\nflex\narticle[role=\"main\"]\nwidth\n:\nmath.div(600px, 960px)\n*\n100\n%\naside[role=\"complementary\"]\nwidth\n:\nmath.div(300px, 960px)\n*\n100\n%\nmargin-left\n:\nauto\nCSS\nOutput\n.container\n{\ndisplay\n:\nflex\n;\n}\narticle[role=main]\n{\nwidth\n:\n62.5%\n;\n}\naside[role=complementary]\n{\nwidth\n:\n31.25%\n;\nmargin-left\n:\nauto\n;\n}\nWe’ve created a very simple fluid grid, based on 960px. Operations in Sass let\nus do something like take pixel values and convert them to percentages without\nmuch\n \nhassle.","attrs_markdown":"**Free Palestine**\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg)](https:\/\/sass-lang.com\/)\n\n- [Playground](https:\/\/sass-lang.com\/playground)\n- [Install](https:\/\/sass-lang.com\/install)\n- [Learn Sass](https:\/\/sass-lang.com\/guide)\n- [Blog](https:\/\/sass-lang.com\/blog)\n- [Documentation](https:\/\/sass-lang.com\/documentation)\n- [Get Involved](https:\/\/sass-lang.com\/community)\n\n# Sass Basics\n### Topics\n- [Preprocessing](https:\/\/sass-lang.com\/guide\/#preprocessing)\n- [Variables](https:\/\/sass-lang.com\/guide\/#variables)\n- [Nesting](https:\/\/sass-lang.com\/guide\/#nesting)\n- [Partials](https:\/\/sass-lang.com\/guide\/#partials)\n- [Modules](https:\/\/sass-lang.com\/guide\/#modules)\n- [Mixins](https:\/\/sass-lang.com\/guide\/#mixins)\n- [Inheritance](https:\/\/sass-lang.com\/guide\/#inheritance)\n- [Operators](https:\/\/sass-lang.com\/guide\/#operators)\n\nBefore you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. [Go here](https:\/\/sass-lang.com\/install) if you want to learn how to get everything set up.\n\n## Preprocessing[Preprocessing permalink](https:\/\/sass-lang.com\/guide\/#preprocessing)\nCSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass has features that don’t exist in CSS yet like nesting, mixins, inheritance, and other nifty goodies that help you write robust, maintainable CSS.\n\nOnce you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website.\n\nThe most direct way to make this happen is in your terminal. Once Sass is installed, you can compile your Sass to CSS using the `sass` command. You’ll need to tell Sass which file to build from, and where to output CSS to. For example, running `sass input.scss output.css` from your terminal would take a single Sass file, `input.scss`, and compile that file to `output.css`.\n\nYou can also watch individual files or directories with the `--watch` flag. The watch flag tells Sass to watch your source files for changes, and re-compile CSS each time you save your Sass. If you wanted to watch (instead of manually build) your `input.scss` file, you’d just add the watch flag to your command, like so:\n```\nsass --watch input.scss output.css\n```\nYou can watch and output to directories by using folder paths as your input and output, and separating them with a colon. In this example:\n```\nsass --watch app\/sass:public\/stylesheets\n```\nSass would watch all files in the `app\/sass` folder for changes, and compile CSS to the `public\/stylesheets` folder.\n\n### 💡 Fun fact:\nSass has two syntaxes! The SCSS syntax (`.scss`) is used most commonly. It’s a superset of CSS, which means all valid CSS is also valid SCSS. The indented syntax (`.sass`) is more unusual: it uses indentation rather than curly braces to nest statements, and newlines instead of semicolons to separate them. All our examples are available in both syntaxes.\n***\n## Variables[Variables permalink](https:\/\/sass-lang.com\/guide\/#variables)\nThink of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Sass uses the `$` symbol to make something a variable. Here’s an example:\n\n- [SCSS](https:\/\/sass-lang.com\/guide\/#example-variables-scss)\n- [Sass](https:\/\/sass-lang.com\/guide\/#example-variables-sass)\n- [CSS](https:\/\/sass-lang.com\/guide\/#example-variables-css)\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJwzNFRJy88r0S0uSUzOtlLwSM0pSy3JTE7UUShOzCvWLU4tykyz5lIpKMrMTSyq1E3Oz8kvslJQNjY2tubiSspPqVSo5lJQABlhpWBoYKCqgGScNVAGqgHVAGuuWgA2kiah)\n\n### SCSS Syntax\n```\n$font-stack: Helvetica, sans-serif;\n$primary-color: #333;\n\nbody {\n  font: 100% $font-stack;\n  color: $primary-color;\n}\n```\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJwzMFRJy88r0S0uSUzOtlLwSM0pSy3JTE7UUShOzCvWLU4tykzjUikoysxNLKrUTc7PyS+yUlA2Njbm4krKT6nkUlAAabdSMDQwUFVAMgooAVWMqhkAF7Qkkg==)\n\n### Sass Syntax\n```\n$font-stack: Helvetica, sans-serif\n$primary-color: #333\n\nbody\n  font: 100% $font-stack\n  color: $primary-color\n```\n\n### CSS Output\n```\nbody {\n  font: 100% Helvetica, sans-serif;\n  color: #333;\n}\n```\n\nWhen the Sass is processed, it takes the variables we define for the `$font-stack` and `$primary-color` and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.\n***\n## Nesting[Nesting permalink](https:\/\/sass-lang.com\/guide\/#nesting)\nWhen writing HTML you’ve probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn’t.\n\nSass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice.\n\nWith that in mind, here’s an example of some typical styles for a site’s navigation:\n\n- [SCSS](https:\/\/sass-lang.com\/guide\/#example-nesting-scss)\n- [Sass](https:\/\/sass-lang.com\/guide\/#example-nesting-sass)\n- [CSS](https:\/\/sass-lang.com\/guide\/#example-nesting-css)\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJxVjUEKwjAURPc5xVwgYFy4SE\/zbUL5+P0JTZSU0rtLGym6GmbewHNO6Y3VAC85AnjSPLF6XIajZgqBdTq7cKm21EWihyaN+7oZswOsCFyy0OLBKqzR3iWNj6Ef6Cs4Px3+W265wV1z63ONrdoQxzRT5aS\/xu0DeoU2lQ==)\n\n### SCSS Syntax\n```\nnav {\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  li { display: inline-block; }\n\n  a {\n    display: block;\n    padding: 6px 12px;\n    text-decoration: none;\n  }\n}\n```\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJxVjUEKhDAMRfc9RS5QUBcuepuMDRLMpMVmhnp7teKimw\/\/Pfh\/GBX\/DuAnVwB8cV9ZAwytZYyRdX2rcDFf7BAKoEnJuZs1FblkwSMAq7CS\/0hatttjrx\/ebc+5wjjl2qhRNR9pSTsaJ31+TtSwMEM=)\n\n### Sass Syntax\n```\nnav\n  ul\n    margin: 0\n    padding: 0\n    list-style: none\n\n  li\n    display: inline-block\n\n  a\n    display: block\n    padding: 6px 12px\n    text-decoration: none\n```\n\n### CSS Output\n```\nnav ul {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\nnav li {\n  display: inline-block;\n}\nnav a {\n  display: block;\n  padding: 6px 12px;\n  text-decoration: none;\n}\n```\n\nYou’ll notice that the `ul`, `li`, and `a` selectors are nested inside the `nav` selector. This is a great way to organize your CSS and make it more readable.\n***\n## Partials[Partials permalink](https:\/\/sass-lang.com\/guide\/#partials)\nYou can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is a Sass file named with a leading underscore. You might name it something like `_partial.scss`. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the `@use` rule.\n***\n## Modules[Modules permalink](https:\/\/sass-lang.com\/guide\/#modules)\nCompatibility:\n\nDart Sass\n\nsince 1.23.0\n\nLibSass\n\n✗\n\nRuby Sass\n\n✗\n\n[➤]()\n\nOnly Dart Sass currently supports `@use`. Users of other implementations must use the [`@import` rule](https:\/\/sass-lang.com\/documentation\/at-rules\/import) instead.\n\nYou don’t have to write all your Sass in a single file. You can split it up however you want with the `@use` rule. This rule loads another Sass file as a *module*, which means you can refer to its variables, [mixins](https:\/\/sass-lang.com\/guide\/#mixins), and [functions](https:\/\/sass-lang.com\/documentation\/at-rules\/function) in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output\\!\n\n- [SCSS](https:\/\/sass-lang.com\/guide\/#example-modules-scss)\n- [Sass](https:\/\/sass-lang.com\/guide\/#example-modules-sass)\n- [CSS](https:\/\/sass-lang.com\/guide\/#example-modules-css)\n\n### SCSS Syntax\n```\n\/\/ _base.scss\n$font-stack: Helvetica, sans-serif;\n$primary-color: #333;\n\nbody {\n  font: 100% $font-stack;\n  color: $primary-color;\n}\n```\n```\n\/\/ styles.scss\n@use 'base';\n\n.inverse {\n  background-color: base.$primary-color;\n  color: white;\n}\n```\n\n### Sass Syntax\n```\n\/\/ _base.sass\n$font-stack: Helvetica, sans-serif\n$primary-color: #333\n\nbody\n  font: 100% $font-stack\n  color: $primary-color\n```\n```\n\/\/ styles.sass\n@use 'base'\n\n.inverse\n  background-color: base.$primary-color\n  color: white\n```\n\n### CSS Output\n```\nbody {\n  font: 100% Helvetica, sans-serif;\n  color: #333;\n}\n\n.inverse {\n  background-color: #333;\n  color: white;\n}\n```\n\nNotice we’re using `@use 'base';` in the `styles.scss` file. When you use a file you don’t need to include the file extension. Sass is smart and will figure it out for you.\n***\n## Mixins[Mixins permalink](https:\/\/sass-lang.com\/guide\/#mixins)\nSome things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. It helps keep your Sass very DRY. You can even pass in values to make your mixin more flexible. Here’s an example for `theme`.\n\n- [SCSS](https:\/\/sass-lang.com\/guide\/#example-mixins-scss)\n- [Sass](https:\/\/sass-lang.com\/guide\/#example-mixins-sass)\n- [CSS](https:\/\/sass-lang.com\/guide\/#example-mixins-css)\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJyFjrEKwjAQhvc8xYEOFjRYwSVdOgjdfYM0ubShbSKXBivSd9fGLoIgNxz89\/0fl+flYCfrYGxxwN02LQEXSV1F8pHBkwHUUnUN+ei0gA9RLKmfDqGV2t8FHN+T3yagpparZA\/8dM4WUPnek4CNMaZgM2PcOuOTuLRO9VEjrNKZcdkjjT+OX69dUWeJDlEpDOEfXxGiWxovNV1Lkw==)\n\n### SCSS Syntax\n```\n@mixin theme($theme: DarkGray) {\n  background: $theme;\n  box-shadow: 0 0 1px rgba($theme, .25);\n  color: #fff;\n}\n\n.info {\n  @include theme;\n}\n.alert {\n  @include theme($theme: DarkRed);\n}\n.success {\n  @include theme($theme: DarkGreen);\n}\n```\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJwzMHTIzazIzFMoyUjNTdVQAVNWCi6JRdnuRYmVmlwKCkmJydnpRfmleSlWChB5kGB+hW5xRmJKfrmVggEQGhZUKBSlJyVCTdBR0DMyBWlOzs\/JL7JSUE5LS+Pi0svMS8sHCjpk5iXnlKakQiwFiifmpBaVYEiguCYoNUUTqLK4NDk5tbgYv1r3otTUPE0AvxxFvA==)\n\n### Sass Syntax\n```\n@mixin theme($theme: DarkGray)\n  background: $theme\n  box-shadow: 0 0 1px rgba($theme, .25)\n  color: #fff\n\n.info\n  @include theme\n\n.alert\n  @include theme($theme: DarkRed)\n\n.success\n  @include theme($theme: DarkGreen)\n```\n\n### CSS Output\n```\n.info {\n  background: DarkGray;\n  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);\n  color: #fff;\n}\n\n.alert {\n  background: DarkRed;\n  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);\n  color: #fff;\n}\n\n.success {\n  background: DarkGreen;\n  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);\n  color: #fff;\n}\n```\n\nTo create a mixin you use the `@mixin` directive and give it a name. We’ve named our mixin `theme`. We’re also using the variable `$theme` inside the parentheses so we can pass in a `theme` of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with `@include` followed by the name of the mixin.\n***\n## Extend\/Inheritance[Extend\/Inheritance permalink](https:\/\/sass-lang.com\/guide\/#extend-inheritance)\nUsing `@extend` lets you share a set of CSS properties from one selector to another. In our example we’re going to create a simple series of messaging for errors, warnings and successes using another feature which goes hand in hand with extend, placeholder classes. A placeholder class is a special type of class that only prints when it is extended, and can help keep your compiled CSS neat and clean.\n\n- [SCSS](https:\/\/sass-lang.com\/guide\/#example-extend-inheritance-scss)\n- [Sass](https:\/\/sass-lang.com\/guide\/#example-extend-inheritance-sass)\n- [CSS](https:\/\/sass-lang.com\/guide\/#example-extend-inheritance-css)\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJyVUEFqwzAQvOsVC6EUAo5rfHMuhT4h\/YAibWzBVlJ37dqh9O+V7KQNPgRykWBnZmdmq6rcwnvnBN4OBxgdEUR2vocjGj0IwtMHiugWC+k0o4XExKlHb9HuYFuqNf6tAI6BLXIDVZxAAjkLG2PMPiFRW+t8m6CXOOWBCRQSc1PX9V79KFWWN2mCf+7XcfBz0FR06Nqul5zG4xfyfya1YuQ81kkkfW7gRDi75r8YWccG8js77y5FZsXrsm\/dfiHKYEwa3yder1BcGraM6Bc9Mgd+TP3nPWr26YCPqc9IFMa04BeaM6IW)\n\n### SCSS Syntax\n```\n\/* This CSS will print because %message-shared is extended. *\/\n%message-shared {\n  border: 1px solid #ccc;\n  padding: 10px;\n  color: #333;\n}\n\n\/\/ This CSS won't print because %equal-heights is never extended.\n%equal-heights {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.message {\n  @extend %message-shared;\n}\n\n.success {\n  @extend %message-shared;\n  border-color: green;\n}\n\n.error {\n  @extend %message-shared;\n  border-color: red;\n}\n\n.warning {\n  @extend %message-shared;\n  border-color: yellow;\n}\n```\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJyVUEFqwzAQvOsVCyEUAo4TfPOp0CekH1CkqS3YSsrKrp3fZ01S2vpQyEWLdmZ2Z\/ZwrHf03odCb6cTTYGZsoQ40BnOjgW0\/UQptkNVeivwpEzMA6KH39OuNivcEJ2TeEhLxzxTSRw8bZxzCmTrfYidIoc8698lTsrbNE1jTF3\/spHiy7D2gctoueoRun4oi42IL8iPGfOXofN9KJnttaUPxrJvKdUkNre0vMbsH94Ve73PWcdVThmd094\/nO\/I1SNQJ0BUJUSSPKG775usRL3SE7ormNN0AxfumIU=)\n\n### Sass Syntax\n```\n\/* This CSS will print because %message-shared is extended. *\/\n%message-shared\n  border: 1px solid #ccc\n  padding: 10px\n  color: #333\n\n\/\/ This CSS won't print because %equal-heights is never extended.\n%equal-heights\n  display: flex\n  flex-wrap: wrap\n\n.message\n  @extend %message-shared\n\n.success\n  @extend %message-shared\n  border-color: green\n\n.error\n  @extend %message-shared\n  border-color: red\n\n.warning\n  @extend %message-shared\n  border-color: yellow\n```\n\n### CSS Output\n```\n\/* This CSS will print because %message-shared is extended. *\/\n.warning, .error, .success, .message {\n  border: 1px solid #ccc;\n  padding: 10px;\n  color: #333;\n}\n\n.success {\n  border-color: green;\n}\n\n.error {\n  border-color: red;\n}\n\n.warning {\n  border-color: yellow;\n}\n```\n\nWhat the above code does is tells `.message`, `.success`, `.error`, and `.warning` to behave just like `%message-shared`. That means anywhere that `%message-shared` shows up, `.message`, `.success`, `.error`, & `.warning` will too. The magic happens in the generated CSS, where each of these classes will get the same CSS properties as `%message-shared`. This helps you avoid having to write multiple class names on HTML elements.\n\nYou can extend most simple CSS selectors in addition to placeholder classes in Sass, but using placeholders is the easiest way to make sure you aren’t extending a class that’s nested elsewhere in your styles, which can result in unintended selectors in your CSS.\n\nNote that the CSS in `%equal-heights` isn’t generated, because `%equal-heights` is never extended.\n***\n## Operators[Operators permalink](https:\/\/sass-lang.com\/guide\/#operators)\nDoing math in your CSS is very helpful. Sass has a handful of standard math operators like `+`, `-`, `*`, `math.div()`, and `%`. In our example we’re going to do some simple math to calculate widths for an `article` and `aside`.\n\n- [SCSS](https:\/\/sass-lang.com\/guide\/#example-operators-scss)\n- [Sass](https:\/\/sass-lang.com\/guide\/#example-operators-sass)\n- [CSS](https:\/\/sass-lang.com\/guide\/#example-operators-css)\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJx1zUEKwjAQheF9TjEEBBUtCULBFMF7iIuQTO1A0pQk1Rbx7kbFna5m88\/3pDyOCYEnnZLyOne8Yawyoc+aeoxwZwCW0uD0rKB1ODXswZiOmYzDUwwOD9yXlJ\/f6Y1s7hS8oMrSdVkLMUwb2NflrGANUojFR0hkv\/8m+MGhx7IZ5z\/Q7icEJYgX6rcO26xAjzkU\/QnQWUHM)\n\n### SCSS Syntax\n```\n@use \"sass:math\";\n\n.container {\n  display: flex;\n}\n\narticle[role=\"main\"] {\n  width: math.div(600px, 960px) * 100%;\n}\n\naside[role=\"complementary\"] {\n  width: math.div(300px, 960px) * 100%;\n  margin-left: auto;\n}\n```\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJxtjc0KwjAQhO95iiUgqGhJEQoGBN9DPCzJ1i7kjyTV9u2NB289zWHm+0b197kQyIKlaI91kkJ0JoaKHCgLAMslOVw1jI4WITBXNo4eOTq6Sd9W8tlWH7Z10vATdJbf+0GptJzgOrQ4wBF6pXYNLmz\/qIk+OfLUnvK66bhsOaD1+cXh7GisGnCu8QvSOz0+)\n\n### Sass Syntax\n```\n@use \"sass:math\"\n\n.container\n  display: flex\n\narticle[role=\"main\"]\n  width: math.div(600px, 960px) * 100%\n\naside[role=\"complementary\"]\n  width: math.div(300px, 960px) * 100%\n  margin-left: auto\n```\n\n### CSS Output\n```\n.container {\n  display: flex;\n}\n\narticle[role=main] {\n  width: 62.5%;\n}\n\naside[role=complementary] {\n  width: 31.25%;\n  margin-left: auto;\n}\n```\n\nWe’ve created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle.\n\n- Current Releases:\n- [Dart Sass](https:\/\/sass-lang.com\/dart-sass) [1\\.99.0](https:\/\/github.com\/sass\/dart-sass\/releases\/tag\/1.99.0)\n- [LibSass](https:\/\/sass-lang.com\/libsass) ⚰\n- [Ruby Sass](https:\/\/sass-lang.com\/ruby-sass) ⚰\n- [Implementation Guide](https:\/\/sass-lang.com\/implementation)\n\nSass © 2006–2026 the Sass team, and numerous contributors. It is available for use and modification under the [MIT License](https:\/\/github.com\/sass\/dart-sass\/blob\/main\/LICENSE).\n\n- [Sass on GitHub](https:\/\/github.com\/sass)\n- [Website Source Code](https:\/\/github.com\/sass\/sass-site)\n- [Style Guide](https:\/\/sass-lang.com\/styleguide)\n- [Community Guidelines](https:\/\/sass-lang.com\/community-guidelines)\n\n[@sass@front-end.social](https:\/\/front-end.social\/@sass)\n\n[![Deploys by Netlify](https:\/\/www.netlify.com\/v3\/img\/components\/netlify-color-bg.svg)](https:\/\/www.netlify.com\/)","attrs_readable_markdown":"Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. [Go here](https:\/\/sass-lang.com\/install) if you want to learn how to get everything set up.\n\n## Preprocessing[Preprocessing permalink](https:\/\/sass-lang.com\/guide\/#preprocessing)\nCSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass has features that don’t exist in CSS yet like nesting, mixins, inheritance, and other nifty goodies that help you write robust, maintainable CSS.\n\nOnce you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website.\n\nThe most direct way to make this happen is in your terminal. Once Sass is installed, you can compile your Sass to CSS using the `sass` command. You’ll need to tell Sass which file to build from, and where to output CSS to. For example, running `sass input.scss output.css` from your terminal would take a single Sass file, `input.scss`, and compile that file to `output.css`.\n\nYou can also watch individual files or directories with the `--watch` flag. The watch flag tells Sass to watch your source files for changes, and re-compile CSS each time you save your Sass. If you wanted to watch (instead of manually build) your `input.scss` file, you’d just add the watch flag to your command, like so:\n```\nsass --watch input.scss output.css\n```\nYou can watch and output to directories by using folder paths as your input and output, and separating them with a colon. In this example:\n```\nsass --watch app\/sass:public\/stylesheets\n```\nSass would watch all files in the `app\/sass` folder for changes, and compile CSS to the `public\/stylesheets` folder.\n\n### 💡 Fun fact:\nSass has two syntaxes! The SCSS syntax (`.scss`) is used most commonly. It’s a superset of CSS, which means all valid CSS is also valid SCSS. The indented syntax (`.sass`) is more unusual: it uses indentation rather than curly braces to nest statements, and newlines instead of semicolons to separate them. All our examples are available in both syntaxes.\n***\n## Variables[Variables permalink](https:\/\/sass-lang.com\/guide\/#variables)\nThink of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Sass uses the `$` symbol to make something a variable. Here’s an example:\n\n- [SCSS](https:\/\/sass-lang.com\/guide\/#example-variables-scss)\n- [Sass](https:\/\/sass-lang.com\/guide\/#example-variables-sass)\n- [CSS](https:\/\/sass-lang.com\/guide\/#example-variables-css)\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJwzNFRJy88r0S0uSUzOtlLwSM0pSy3JTE7UUShOzCvWLU4tykyz5lIpKMrMTSyq1E3Oz8kvslJQNjY2tubiSspPqVSo5lJQABlhpWBoYKCqgGScNVAGqgHVAGuuWgA2kiah)\n\n### SCSS Syntax\n```\n$font-stack: Helvetica, sans-serif;\n$primary-color: #333;\n\nbody {\n  font: 100% $font-stack;\n  color: $primary-color;\n}\n```\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJwzMFRJy88r0S0uSUzOtlLwSM0pSy3JTE7UUShOzCvWLU4tykzjUikoysxNLKrUTc7PyS+yUlA2Njbm4krKT6nkUlAAabdSMDQwUFVAMgooAVWMqhkAF7Qkkg==)\n\n### Sass Syntax\n```\n$font-stack: Helvetica, sans-serif\n$primary-color: #333\n\nbody\n  font: 100% $font-stack\n  color: $primary-color\n```\n\n### CSS Output\n```\nbody {\n  font: 100% Helvetica, sans-serif;\n  color: #333;\n}\n```\n\nWhen the Sass is processed, it takes the variables we define for the `$font-stack` and `$primary-color` and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.\n***\n## Nesting[Nesting permalink](https:\/\/sass-lang.com\/guide\/#nesting)\nWhen writing HTML you’ve probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn’t.\n\nSass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice.\n\nWith that in mind, here’s an example of some typical styles for a site’s navigation:\n\n- [SCSS](https:\/\/sass-lang.com\/guide\/#example-nesting-scss)\n- [Sass](https:\/\/sass-lang.com\/guide\/#example-nesting-sass)\n- [CSS](https:\/\/sass-lang.com\/guide\/#example-nesting-css)\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJxVjUEKwjAURPc5xVwgYFy4SE\/zbUL5+P0JTZSU0rtLGym6GmbewHNO6Y3VAC85AnjSPLF6XIajZgqBdTq7cKm21EWihyaN+7oZswOsCFyy0OLBKqzR3iWNj6Ef6Cs4Px3+W265wV1z63ONrdoQxzRT5aS\/xu0DeoU2lQ==)\n\n### SCSS Syntax\n```\nnav {\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  li { display: inline-block; }\n\n  a {\n    display: block;\n    padding: 6px 12px;\n    text-decoration: none;\n  }\n}\n```\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJxVjUEKhDAMRfc9RS5QUBcuepuMDRLMpMVmhnp7teKimw\/\/Pfh\/GBX\/DuAnVwB8cV9ZAwytZYyRdX2rcDFf7BAKoEnJuZs1FblkwSMAq7CS\/0hatttjrx\/ebc+5wjjl2qhRNR9pSTsaJ31+TtSwMEM=)\n\n### Sass Syntax\n```\nnav\n  ul\n    margin: 0\n    padding: 0\n    list-style: none\n\n  li\n    display: inline-block\n\n  a\n    display: block\n    padding: 6px 12px\n    text-decoration: none\n```\n\n### CSS Output\n```\nnav ul {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\nnav li {\n  display: inline-block;\n}\nnav a {\n  display: block;\n  padding: 6px 12px;\n  text-decoration: none;\n}\n```\n\nYou’ll notice that the `ul`, `li`, and `a` selectors are nested inside the `nav` selector. This is a great way to organize your CSS and make it more readable.\n***\n## Partials[Partials permalink](https:\/\/sass-lang.com\/guide\/#partials)\nYou can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is a Sass file named with a leading underscore. You might name it something like `_partial.scss`. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the `@use` rule.\n***\n## Modules[Modules permalink](https:\/\/sass-lang.com\/guide\/#modules)\nCompatibility:\n\nDart Sasssince 1.23.0\n\nLibSass✗\n\nRuby Sass✗\n\nOnly Dart Sass currently supports `@use`. Users of other implementations must use the [`@import` rule](https:\/\/sass-lang.com\/documentation\/at-rules\/import) instead.\n\nYou don’t have to write all your Sass in a single file. You can split it up however you want with the `@use` rule. This rule loads another Sass file as a *module*, which means you can refer to its variables, [mixins](https:\/\/sass-lang.com\/guide\/#mixins), and [functions](https:\/\/sass-lang.com\/documentation\/at-rules\/function) in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output\\!\n\n- [SCSS](https:\/\/sass-lang.com\/guide\/#example-modules-scss)\n- [Sass](https:\/\/sass-lang.com\/guide\/#example-modules-sass)\n- [CSS](https:\/\/sass-lang.com\/guide\/#example-modules-css)\n\n### SCSS Syntax\n```\n\/\/ _base.scss\n$font-stack: Helvetica, sans-serif;\n$primary-color: #333;\n\nbody {\n  font: 100% $font-stack;\n  color: $primary-color;\n}\n```\n```\n\/\/ styles.scss\n@use 'base';\n\n.inverse {\n  background-color: base.$primary-color;\n  color: white;\n}\n```\n\n### Sass Syntax\n```\n\/\/ _base.sass\n$font-stack: Helvetica, sans-serif\n$primary-color: #333\n\nbody\n  font: 100% $font-stack\n  color: $primary-color\n```\n```\n\/\/ styles.sass\n@use 'base'\n\n.inverse\n  background-color: base.$primary-color\n  color: white\n```\n\n### CSS Output\n```\nbody {\n  font: 100% Helvetica, sans-serif;\n  color: #333;\n}\n\n.inverse {\n  background-color: #333;\n  color: white;\n}\n```\n\nNotice we’re using `@use 'base';` in the `styles.scss` file. When you use a file you don’t need to include the file extension. Sass is smart and will figure it out for you.\n***\n## Mixins[Mixins permalink](https:\/\/sass-lang.com\/guide\/#mixins)\nSome things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. It helps keep your Sass very DRY. You can even pass in values to make your mixin more flexible. Here’s an example for `theme`.\n\n- [SCSS](https:\/\/sass-lang.com\/guide\/#example-mixins-scss)\n- [Sass](https:\/\/sass-lang.com\/guide\/#example-mixins-sass)\n- [CSS](https:\/\/sass-lang.com\/guide\/#example-mixins-css)\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJyFjrEKwjAQhvc8xYEOFjRYwSVdOgjdfYM0ubShbSKXBivSd9fGLoIgNxz89\/0fl+flYCfrYGxxwN02LQEXSV1F8pHBkwHUUnUN+ei0gA9RLKmfDqGV2t8FHN+T3yagpparZA\/8dM4WUPnek4CNMaZgM2PcOuOTuLRO9VEjrNKZcdkjjT+OX69dUWeJDlEpDOEfXxGiWxovNV1Lkw==)\n\n### SCSS Syntax\n```\n@mixin theme($theme: DarkGray) {\n  background: $theme;\n  box-shadow: 0 0 1px rgba($theme, .25);\n  color: #fff;\n}\n\n.info {\n  @include theme;\n}\n.alert {\n  @include theme($theme: DarkRed);\n}\n.success {\n  @include theme($theme: DarkGreen);\n}\n```\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJwzMHTIzazIzFMoyUjNTdVQAVNWCi6JRdnuRYmVmlwKCkmJydnpRfmleSlWChB5kGB+hW5xRmJKfrmVggEQGhZUKBSlJyVCTdBR0DMyBWlOzs\/JL7JSUE5LS+Pi0svMS8sHCjpk5iXnlKakQiwFiifmpBaVYEiguCYoNUUTqLK4NDk5tbgYv1r3otTUPE0AvxxFvA==)\n\n### Sass Syntax\n```\n@mixin theme($theme: DarkGray)\n  background: $theme\n  box-shadow: 0 0 1px rgba($theme, .25)\n  color: #fff\n\n.info\n  @include theme\n\n.alert\n  @include theme($theme: DarkRed)\n\n.success\n  @include theme($theme: DarkGreen)\n```\n\n### CSS Output\n```\n.info {\n  background: DarkGray;\n  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);\n  color: #fff;\n}\n\n.alert {\n  background: DarkRed;\n  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);\n  color: #fff;\n}\n\n.success {\n  background: DarkGreen;\n  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);\n  color: #fff;\n}\n```\n\nTo create a mixin you use the `@mixin` directive and give it a name. We’ve named our mixin `theme`. We’re also using the variable `$theme` inside the parentheses so we can pass in a `theme` of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with `@include` followed by the name of the mixin.\n***\n## Extend\/Inheritance[Extend\/Inheritance permalink](https:\/\/sass-lang.com\/guide\/#extend-inheritance)\nUsing `@extend` lets you share a set of CSS properties from one selector to another. In our example we’re going to create a simple series of messaging for errors, warnings and successes using another feature which goes hand in hand with extend, placeholder classes. A placeholder class is a special type of class that only prints when it is extended, and can help keep your compiled CSS neat and clean.\n\n- [SCSS](https:\/\/sass-lang.com\/guide\/#example-extend-inheritance-scss)\n- [Sass](https:\/\/sass-lang.com\/guide\/#example-extend-inheritance-sass)\n- [CSS](https:\/\/sass-lang.com\/guide\/#example-extend-inheritance-css)\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJyVUEFqwzAQvOsVC6EUAo5rfHMuhT4h\/YAibWzBVlJ37dqh9O+V7KQNPgRykWBnZmdmq6rcwnvnBN4OBxgdEUR2vocjGj0IwtMHiugWC+k0o4XExKlHb9HuYFuqNf6tAI6BLXIDVZxAAjkLG2PMPiFRW+t8m6CXOOWBCRQSc1PX9V79KFWWN2mCf+7XcfBz0FR06Nqul5zG4xfyfya1YuQ81kkkfW7gRDi75r8YWccG8js77y5FZsXrsm\/dfiHKYEwa3yder1BcGraM6Bc9Mgd+TP3nPWr26YCPqc9IFMa04BeaM6IW)\n\n### SCSS Syntax\n```\n\/* This CSS will print because %message-shared is extended. *\/\n%message-shared {\n  border: 1px solid #ccc;\n  padding: 10px;\n  color: #333;\n}\n\n\/\/ This CSS won't print because %equal-heights is never extended.\n%equal-heights {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.message {\n  @extend %message-shared;\n}\n\n.success {\n  @extend %message-shared;\n  border-color: green;\n}\n\n.error {\n  @extend %message-shared;\n  border-color: red;\n}\n\n.warning {\n  @extend %message-shared;\n  border-color: yellow;\n}\n```\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJyVUEFqwzAQvOsVCyEUAo4TfPOp0CekH1CkqS3YSsrKrp3fZ01S2vpQyEWLdmZ2Z\/ZwrHf03odCb6cTTYGZsoQ40BnOjgW0\/UQptkNVeivwpEzMA6KH39OuNivcEJ2TeEhLxzxTSRw8bZxzCmTrfYidIoc8698lTsrbNE1jTF3\/spHiy7D2gctoueoRun4oi42IL8iPGfOXofN9KJnttaUPxrJvKdUkNre0vMbsH94Ve73PWcdVThmd094\/nO\/I1SNQJ0BUJUSSPKG775usRL3SE7ormNN0AxfumIU=)\n\n### Sass Syntax\n```\n\/* This CSS will print because %message-shared is extended. *\/\n%message-shared\n  border: 1px solid #ccc\n  padding: 10px\n  color: #333\n\n\/\/ This CSS won't print because %equal-heights is never extended.\n%equal-heights\n  display: flex\n  flex-wrap: wrap\n\n.message\n  @extend %message-shared\n\n.success\n  @extend %message-shared\n  border-color: green\n\n.error\n  @extend %message-shared\n  border-color: red\n\n.warning\n  @extend %message-shared\n  border-color: yellow\n```\n\n### CSS Output\n```\n\/* This CSS will print because %message-shared is extended. *\/\n.warning, .error, .success, .message {\n  border: 1px solid #ccc;\n  padding: 10px;\n  color: #333;\n}\n\n.success {\n  border-color: green;\n}\n\n.error {\n  border-color: red;\n}\n\n.warning {\n  border-color: yellow;\n}\n```\n\nWhat the above code does is tells `.message`, `.success`, `.error`, and `.warning` to behave just like `%message-shared`. That means anywhere that `%message-shared` shows up, `.message`, `.success`, `.error`, & `.warning` will too. The magic happens in the generated CSS, where each of these classes will get the same CSS properties as `%message-shared`. This helps you avoid having to write multiple class names on HTML elements.\n\nYou can extend most simple CSS selectors in addition to placeholder classes in Sass, but using placeholders is the easiest way to make sure you aren’t extending a class that’s nested elsewhere in your styles, which can result in unintended selectors in your CSS.\n\nNote that the CSS in `%equal-heights` isn’t generated, because `%equal-heights` is never extended.\n***\n## Operators[Operators permalink](https:\/\/sass-lang.com\/guide\/#operators)\nDoing math in your CSS is very helpful. Sass has a handful of standard math operators like `+`, `-`, `*`, `math.div()`, and `%`. In our example we’re going to do some simple math to calculate widths for an `article` and `aside`.\n\n- [SCSS](https:\/\/sass-lang.com\/guide\/#example-operators-scss)\n- [Sass](https:\/\/sass-lang.com\/guide\/#example-operators-sass)\n- [CSS](https:\/\/sass-lang.com\/guide\/#example-operators-css)\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJx1zUEKwjAQheF9TjEEBBUtCULBFMF7iIuQTO1A0pQk1Rbx7kbFna5m88\/3pDyOCYEnnZLyOne8Yawyoc+aeoxwZwCW0uD0rKB1ODXswZiOmYzDUwwOD9yXlJ\/f6Y1s7hS8oMrSdVkLMUwb2NflrGANUojFR0hkv\/8m+MGhx7IZ5z\/Q7icEJYgX6rcO26xAjzkU\/QnQWUHM)\n\n### SCSS Syntax\n```\n@use \"sass:math\";\n\n.container {\n  display: flex;\n}\n\narticle[role=\"main\"] {\n  width: math.div(600px, 960px) * 100%;\n}\n\naside[role=\"complementary\"] {\n  width: math.div(300px, 960px) * 100%;\n  margin-left: auto;\n}\n```\n\n[![Sass](https:\/\/sass-lang.com\/assets\/img\/logos\/logo.svg) Playground](https:\/\/sass-lang.com\/playground#eJxtjc0KwjAQhO95iiUgqGhJEQoGBN9DPCzJ1i7kjyTV9u2NB289zWHm+0b197kQyIKlaI91kkJ0JoaKHCgLAMslOVw1jI4WITBXNo4eOTq6Sd9W8tlWH7Z10vATdJbf+0GptJzgOrQ4wBF6pXYNLmz\/qIk+OfLUnvK66bhsOaD1+cXh7GisGnCu8QvSOz0+)\n\n### Sass Syntax\n```\n@use \"sass:math\"\n\n.container\n  display: flex\n\narticle[role=\"main\"]\n  width: math.div(600px, 960px) * 100%\n\naside[role=\"complementary\"]\n  width: math.div(300px, 960px) * 100%\n  margin-left: auto\n```\n\n### CSS Output\n```\n.container {\n  display: flex;\n}\n\narticle[role=main] {\n  width: 62.5%;\n}\n\naside[role=complementary] {\n  width: 31.25%;\n  margin-left: auto;\n}\n```\n\nWe’ve created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle.","meta_canonical":null}

3. Robots.txt Check

Query:

Response:

4. Spam/Ban Check

Query:

Response:

5. Seen Status Check

ℹ️ Skipped - page is already crawled

📄

INDEXABLE

✅

CRAWLED

19 minutes ago

🤖

ROBOTS ALLOWED

Page Info Filters

Filter	Status	Condition	Details
HTTP status	PASS	`download_http_code = 200`	HTTP 200
Age cutoff	PASS	`download_stamp > now() - 6 MONTH`	0 months ago
History drop	PASS	`isNull(history_drop_reason)`	No drop reason
Spam/ban	PASS	`fh_dont_index != 1 AND ml_spam_score = 0`	ml_spam_score=0
Canonical	PASS	`meta_canonical IS NULL OR = '' OR = src_unparsed`	Not set

Page Details

Property	Value
URL	https://sass-lang.com/guide/
Last Crawled	2026-04-11 21:55:28 (19 minutes ago)
First Indexed	2019-04-02 15:38:46 (7 years ago)
HTTP Status Code	200
Meta Title	Sass: Sass Basics
Meta Description	Syntactically Awesome Style Sheets
Meta Canonical	null
Boilerpipe Text	Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. Preprocessing Preprocessing permalink CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass has features that don’t exist in CSS yet like nesting, mixins, inheritance, and other nifty goodies that help you write robust, maintainable CSS . Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website. The most direct way to make this happen is in your terminal. Once Sass is installed, you can compile your Sass to CSS using the sass command. You’ll need to tell Sass which file to build from, and where to output CSS to. For example, running sass input.scss output.css from your terminal would take a single Sass file, input.scss , and compile that file to output.css . You can also watch individual files or directories with the --watch flag. The watch flag tells Sass to watch your source files for changes, and re-compile CSS each time you save your Sass. If you wanted to watch (instead of manually build) your input.scss file, you’d just add the watch flag to your command, like so: sass --watch input.scss output.css You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. In this example: sass --watch app/sass:public/stylesheets Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder. 💡 Fun fact: Sass has two syntaxes! The SCSS syntax ( .scss ) is used most commonly. It’s a superset of CSS , which means all valid CSS is also valid SCSS . The indented syntax ( .sass ) is more unusual: it uses indentation rather than curly braces to nest statements, and newlines instead of semicolons to separate them. All our examples are available in both syntaxes. Variables Variables permalink Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Sass uses the $ symbol to make something a variable. Here’s an example: SCSS Sass CSS Playground SCSS Syntax $font-stack : Helvetica , sans-serif ; $primary-color : #333 ; body { font : 100% $font-stack ; color : $primary-color ; } Playground Sass Syntax $font-stack : Helvetica, sans-serif $primary-color : #333 body font : 100 % $font-stack color : $primary-color CSS Output body { font : 100% Helvetica , sans-serif ; color : #333 ; } When the Sass is processed, it takes the variables we define for the $font-stack and $primary-color and outputs normal CSS with our variable values placed in the CSS . This can be extremely powerful when working with brand colors and keeping them consistent throughout the site. Nesting Nesting permalink When writing HTML you’ve probably noticed that it has a clear nested and visual hierarchy. CSS , on the other hand, doesn’t. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML . Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice. With that in mind, here’s an example of some typical styles for a site’s navigation: SCSS Sass CSS Playground SCSS Syntax nav { ul { margin : 0 ; padding : 0 ; list-style : none ; } li { display : inline-block ; } a { display : block ; padding : 6px 12px ; text-decoration : none ; } } Playground Sass Syntax nav ul margin : 0 padding : 0 list-style : none li display : inline-block a display : block padding : 6px 12px text-decoration : none CSS Output nav ul { margin : 0 ; padding : 0 ; list-style : none ; } nav li { display : inline-block ; } nav a { display : block ; padding : 6px 12px ; text-decoration : none ; } You’ll notice that the ul , li , and a selectors are nested inside the nav selector. This is a great way to organize your CSS and make it more readable. Partials Partials permalink You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is a Sass file named with a leading underscore. You might name it something like _partial.scss . The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @use rule. Modules Modules permalink Compatibility: Dart Sass since 1.23.0 LibSass ✗ Ruby Sass ✗ Only Dart Sass currently supports @use . Users of other implementations must use the @import rule instead. You don’t have to write all your Sass in a single file. You can split it up however you want with the @use rule. This rule loads another Sass file as a module , which means you can refer to its variables, mixins , and functions in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output! SCSS Sass CSS SCSS Syntax // _base.scss $font-stack : Helvetica , sans-serif ; $primary-color : #333 ; body { font : 100% $font-stack ; color : $primary-color ; } // styles.scss @use 'base' ; .inverse { background-color : base. $primary-color ; color : white ; } Sass Syntax // _base.sass $font-stack : Helvetica, sans-serif $primary-color : #333 body font : 100 % $font-stack color : $primary-color // styles.sass @use 'base' .inverse background-color : base. $primary-color color : white CSS Output body { font : 100% Helvetica , sans-serif ; color : #333 ; } .inverse { background-color : #333 ; color : white ; } Notice we’re using @use 'base'; in the styles.scss file. When you use a file you don’t need to include the file extension. Sass is smart and will figure it out for you. Mixins Mixins permalink Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. It helps keep your Sass very DRY . You can even pass in values to make your mixin more flexible. Here’s an example for theme . SCSS Sass CSS Playground SCSS Syntax @mixin theme ( $theme : DarkGray ) { background : $theme ; box-shadow : 0 0 1px rgba ( $theme , .25 ) ; color : #fff ; } .info { @include theme ; } .alert { @include theme ( $theme : DarkRed ) ; } .success { @include theme ( $theme : DarkGreen ) ; } Playground Sass Syntax @mixin theme($theme: DarkGray) background : $theme box-shadow : 0 0 1px rgba( $theme , .25) color : #fff .info @include theme .alert @include theme($theme: DarkRed) .success @include theme($theme: DarkGreen) CSS Output .info { background : DarkGray ; box-shadow : 0 0 1px rgba ( 169 , 169 , 169 , 0.25 ) ; color : #fff ; } .alert { background : DarkRed ; box-shadow : 0 0 1px rgba ( 139 , 0 , 0 , 0.25 ) ; color : #fff ; } .success { background : DarkGreen ; box-shadow : 0 0 1px rgba ( 0 , 100 , 0 , 0.25 ) ; color : #fff ; } To create a mixin you use the @mixin directive and give it a name. We’ve named our mixin theme . We’re also using the variable $theme inside the parentheses so we can pass in a theme of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin. Extend/Inheritance Extend/Inheritance permalink Using @extend lets you share a set of CSS properties from one selector to another. In our example we’re going to create a simple series of messaging for errors, warnings and successes using another feature which goes hand in hand with extend, placeholder classes. A placeholder class is a special type of class that only prints when it is extended, and can help keep your compiled CSS neat and clean. SCSS Sass CSS Playground SCSS Syntax /* This CSS will print because %message-shared is extended. / %message-shared { border : 1px solid #ccc ; padding : 10px ; color : #333 ; } // This CSS won't print because %equal-heights is never extended. %equal-heights { display : flex ; flex-wrap : wrap ; } .message { @extend %message-shared ; } .success { @extend %message-shared ; border-color : green ; } .error { @extend %message-shared ; border-color : red ; } .warning { @extend %message-shared ; border-color : yellow ; } Playground Sass Syntax / This CSS will print because %message-shared is extended. / %message-shared border : 1px solid #ccc padding : 10px color : #333 // This CSS won't print because %equal-heights is never extended. %equal-heights display : flex flex-wrap : wrap .message @extend %message-shared .success @extend %message-shared border-color : green .error @extend %message-shared border-color : red .warning @extend %message-shared border-color : yellow CSS Output / This CSS will print because %message-shared is extended. / .warning, .error, .success, .message { border : 1px solid #ccc ; padding : 10px ; color : #333 ; } .success { border-color : green ; } .error { border-color : red ; } .warning { border-color : yellow ; } What the above code does is tells .message , .success , .error , and .warning to behave just like %message-shared . That means anywhere that %message-shared shows up, .message , .success , .error , & .warning will too. The magic happens in the generated CSS , where each of these classes will get the same CSS properties as %message-shared . This helps you avoid having to write multiple class names on HTML elements. You can extend most simple CSS selectors in addition to placeholder classes in Sass, but using placeholders is the easiest way to make sure you aren’t extending a class that’s nested elsewhere in your styles, which can result in unintended selectors in your CSS . Note that the CSS in %equal-heights isn’t generated, because %equal-heights is never extended. Operators Operators permalink Doing math in your CSS is very helpful. Sass has a handful of standard math operators like + , - , , math.div() , and % . In our example we’re going to do some simple math to calculate widths for an article and aside . SCSS Sass CSS Playground SCSS Syntax @use "sass:math" ; .container { display : flex ; } article[role="main"] { width : math. div ( 600px , 960px ) * 100% ; } aside[role="complementary"] { width : math. div ( 300px , 960px ) * 100% ; margin-left : auto ; } Playground Sass Syntax @use "sass:math" .container display : flex article[role="main"] width : math.div(600px, 960px) * 100 % aside[role="complementary"] width : math.div(300px, 960px) * 100 % margin-left : auto CSS Output .container { display : flex ; } article[role=main] { width : 62.5% ; } aside[role=complementary] { width : 31.25% ; margin-left : auto ; } We’ve created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle.
Markdown	Free Palestine [![Sass](https://sass-lang.com/assets/img/logos/logo.svg)](https://sass-lang.com/) - [Playground](https://sass-lang.com/playground) - [Install](https://sass-lang.com/install) - [Learn Sass](https://sass-lang.com/guide) - [Blog](https://sass-lang.com/blog) - [Documentation](https://sass-lang.com/documentation) - [Get Involved](https://sass-lang.com/community) # Sass Basics ### Topics - [Preprocessing](https://sass-lang.com/guide/#preprocessing) - [Variables](https://sass-lang.com/guide/#variables) - [Nesting](https://sass-lang.com/guide/#nesting) - [Partials](https://sass-lang.com/guide/#partials) - [Modules](https://sass-lang.com/guide/#modules) - [Mixins](https://sass-lang.com/guide/#mixins) - [Inheritance](https://sass-lang.com/guide/#inheritance) - [Operators](https://sass-lang.com/guide/#operators) Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. [Go here](https://sass-lang.com/install) if you want to learn how to get everything set up. ## Preprocessing[Preprocessing permalink](https://sass-lang.com/guide/#preprocessing) CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass has features that don’t exist in CSS yet like nesting, mixins, inheritance, and other nifty goodies that help you write robust, maintainable CSS. Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website. The most direct way to make this happen is in your terminal. Once Sass is installed, you can compile your Sass to CSS using the `sass` command. You’ll need to tell Sass which file to build from, and where to output CSS to. For example, running `sass input.scss output.css` from your terminal would take a single Sass file, `input.scss`, and compile that file to `output.css`. You can also watch individual files or directories with the `--watch` flag. The watch flag tells Sass to watch your source files for changes, and re-compile CSS each time you save your Sass. If you wanted to watch (instead of manually build) your `input.scss` file, you’d just add the watch flag to your command, like so: ``` sass --watch input.scss output.css ``` You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. In this example: ``` sass --watch app/sass:public/stylesheets ``` Sass would watch all files in the `app/sass` folder for changes, and compile CSS to the `public/stylesheets` folder. ### 💡 Fun fact: Sass has two syntaxes! The SCSS syntax (`.scss`) is used most commonly. It’s a superset of CSS, which means all valid CSS is also valid SCSS. The indented syntax (`.sass`) is more unusual: it uses indentation rather than curly braces to nest statements, and newlines instead of semicolons to separate them. All our examples are available in both syntaxes. * ## Variables[Variables permalink](https://sass-lang.com/guide/#variables) Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Sass uses the `$` symbol to make something a variable. Here’s an example: - [SCSS](https://sass-lang.com/guide/#example-variables-scss) - [Sass](https://sass-lang.com/guide/#example-variables-sass) - [CSS](https://sass-lang.com/guide/#example-variables-css) [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJwzNFRJy88r0S0uSUzOtlLwSM0pSy3JTE7UUShOzCvWLU4tykyz5lIpKMrMTSyq1E3Oz8kvslJQNjY2tubiSspPqVSo5lJQABlhpWBoYKCqgGScNVAGqgHVAGuuWgA2kiah) ### SCSS Syntax ``` $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } ``` [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJwzMFRJy88r0S0uSUzOtlLwSM0pSy3JTE7UUShOzCvWLU4tykzjUikoysxNLKrUTc7PyS+yUlA2Njbm4krKT6nkUlAAabdSMDQwUFVAMgooAVWMqhkAF7Qkkg==) ### Sass Syntax ``` $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color ``` ### CSS Output ``` body { font: 100% Helvetica, sans-serif; color: #333; } ``` When the Sass is processed, it takes the variables we define for the `$font-stack` and `$primary-color` and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site. * ## Nesting[Nesting permalink](https://sass-lang.com/guide/#nesting) When writing HTML you’ve probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn’t. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice. With that in mind, here’s an example of some typical styles for a site’s navigation: - [SCSS](https://sass-lang.com/guide/#example-nesting-scss) - [Sass](https://sass-lang.com/guide/#example-nesting-sass) - [CSS](https://sass-lang.com/guide/#example-nesting-css) [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJxVjUEKwjAURPc5xVwgYFy4SE/zbUL5+P0JTZSU0rtLGym6GmbewHNO6Y3VAC85AnjSPLF6XIajZgqBdTq7cKm21EWihyaN+7oZswOsCFyy0OLBKqzR3iWNj6Ef6Cs4Px3+W265wV1z63ONrdoQxzRT5aS/xu0DeoU2lQ==) ### SCSS Syntax ``` nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } ``` [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJxVjUEKhDAMRfc9RS5QUBcuepuMDRLMpMVmhnp7teKimw//Pfh/GBX/DuAnVwB8cV9ZAwytZYyRdX2rcDFf7BAKoEnJuZs1FblkwSMAq7CS/0hatttjrx/ebc+5wjjl2qhRNR9pSTsaJ31+TtSwMEM=) ### Sass Syntax ``` nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: none ``` ### CSS Output ``` nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } ``` You’ll notice that the `ul`, `li`, and `a` selectors are nested inside the `nav` selector. This is a great way to organize your CSS and make it more readable. * ## Partials[Partials permalink](https://sass-lang.com/guide/#partials) You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is a Sass file named with a leading underscore. You might name it something like `_partial.scss`. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the `@use` rule. * ## Modules[Modules permalink](https://sass-lang.com/guide/#modules) Compatibility: Dart Sass since 1.23.0 LibSass ✗ Ruby Sass ✗ [➤]() Only Dart Sass currently supports `@use`. Users of other implementations must use the [`@import` rule](https://sass-lang.com/documentation/at-rules/import) instead. You don’t have to write all your Sass in a single file. You can split it up however you want with the `@use` rule. This rule loads another Sass file as a module, which means you can refer to its variables, [mixins](https://sass-lang.com/guide/#mixins), and [functions](https://sass-lang.com/documentation/at-rules/function) in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output\! - [SCSS](https://sass-lang.com/guide/#example-modules-scss) - [Sass](https://sass-lang.com/guide/#example-modules-sass) - [CSS](https://sass-lang.com/guide/#example-modules-css) ### SCSS Syntax ``` // _base.scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } ``` ``` // styles.scss @use 'base'; .inverse { background-color: base.$primary-color; color: white; } ``` ### Sass Syntax ``` // _base.sass $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color ``` ``` // styles.sass @use 'base' .inverse background-color: base.$primary-color color: white ``` ### CSS Output ``` body { font: 100% Helvetica, sans-serif; color: #333; } .inverse { background-color: #333; color: white; } ``` Notice we’re using `@use 'base';` in the `styles.scss` file. When you use a file you don’t need to include the file extension. Sass is smart and will figure it out for you. * ## Mixins[Mixins permalink](https://sass-lang.com/guide/#mixins) Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. It helps keep your Sass very DRY. You can even pass in values to make your mixin more flexible. Here’s an example for `theme`. - [SCSS](https://sass-lang.com/guide/#example-mixins-scss) - [Sass](https://sass-lang.com/guide/#example-mixins-sass) - [CSS](https://sass-lang.com/guide/#example-mixins-css) [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJyFjrEKwjAQhvc8xYEOFjRYwSVdOgjdfYM0ubShbSKXBivSd9fGLoIgNxz89/0fl+flYCfrYGxxwN02LQEXSV1F8pHBkwHUUnUN+ei0gA9RLKmfDqGV2t8FHN+T3yagpparZA/8dM4WUPnek4CNMaZgM2PcOuOTuLRO9VEjrNKZcdkjjT+OX69dUWeJDlEpDOEfXxGiWxovNV1Lkw==) ### SCSS Syntax ``` @mixin theme($theme: DarkGray) { background: $theme; box-shadow: 0 0 1px rgba($theme, .25); color: #fff; } .info { @include theme; } .alert { @include theme($theme: DarkRed); } .success { @include theme($theme: DarkGreen); } ``` [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJwzMHTIzazIzFMoyUjNTdVQAVNWCi6JRdnuRYmVmlwKCkmJydnpRfmleSlWChB5kGB+hW5xRmJKfrmVggEQGhZUKBSlJyVCTdBR0DMyBWlOzs/JL7JSUE5LS+Pi0svMS8sHCjpk5iXnlKakQiwFiifmpBaVYEiguCYoNUUTqLK4NDk5tbgYv1r3otTUPE0AvxxFvA==) ### Sass Syntax ``` @mixin theme($theme: DarkGray) background: $theme box-shadow: 0 0 1px rgba($theme, .25) color: #fff .info @include theme .alert @include theme($theme: DarkRed) .success @include theme($theme: DarkGreen) ``` ### CSS Output ``` .info { background: DarkGray; box-shadow: 0 0 1px rgba(169, 169, 169, 0.25); color: #fff; } .alert { background: DarkRed; box-shadow: 0 0 1px rgba(139, 0, 0, 0.25); color: #fff; } .success { background: DarkGreen; box-shadow: 0 0 1px rgba(0, 100, 0, 0.25); color: #fff; } ``` To create a mixin you use the `@mixin` directive and give it a name. We’ve named our mixin `theme`. We’re also using the variable `$theme` inside the parentheses so we can pass in a `theme` of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with `@include` followed by the name of the mixin. * ## Extend/Inheritance[Extend/Inheritance permalink](https://sass-lang.com/guide/#extend-inheritance) Using `@extend` lets you share a set of CSS properties from one selector to another. In our example we’re going to create a simple series of messaging for errors, warnings and successes using another feature which goes hand in hand with extend, placeholder classes. A placeholder class is a special type of class that only prints when it is extended, and can help keep your compiled CSS neat and clean. - [SCSS](https://sass-lang.com/guide/#example-extend-inheritance-scss) - [Sass](https://sass-lang.com/guide/#example-extend-inheritance-sass) - [CSS](https://sass-lang.com/guide/#example-extend-inheritance-css) [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJyVUEFqwzAQvOsVC6EUAo5rfHMuhT4h/YAibWzBVlJ37dqh9O+V7KQNPgRykWBnZmdmq6rcwnvnBN4OBxgdEUR2vocjGj0IwtMHiugWC+k0o4XExKlHb9HuYFuqNf6tAI6BLXIDVZxAAjkLG2PMPiFRW+t8m6CXOOWBCRQSc1PX9V79KFWWN2mCf+7XcfBz0FR06Nqul5zG4xfyfya1YuQ81kkkfW7gRDi75r8YWccG8js77y5FZsXrsm/dfiHKYEwa3yder1BcGraM6Bc9Mgd+TP3nPWr26YCPqc9IFMa04BeaM6IW) ### SCSS Syntax ``` /* This CSS will print because %message-shared is extended. / %message-shared { border: 1px solid #ccc; padding: 10px; color: #333; } // This CSS won't print because %equal-heights is never extended. %equal-heights { display: flex; flex-wrap: wrap; } .message { @extend %message-shared; } .success { @extend %message-shared; border-color: green; } .error { @extend %message-shared; border-color: red; } .warning { @extend %message-shared; border-color: yellow; } ``` [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJyVUEFqwzAQvOsVCyEUAo4TfPOp0CekH1CkqS3YSsrKrp3fZ01S2vpQyEWLdmZ2Z/ZwrHf03odCb6cTTYGZsoQ40BnOjgW0/UQptkNVeivwpEzMA6KH39OuNivcEJ2TeEhLxzxTSRw8bZxzCmTrfYidIoc8698lTsrbNE1jTF3/spHiy7D2gctoueoRun4oi42IL8iPGfOXofN9KJnttaUPxrJvKdUkNre0vMbsH94Ve73PWcdVThmd094/nO/I1SNQJ0BUJUSSPKG775usRL3SE7ormNN0AxfumIU=) ### Sass Syntax ``` / This CSS will print because %message-shared is extended. / %message-shared border: 1px solid #ccc padding: 10px color: #333 // This CSS won't print because %equal-heights is never extended. %equal-heights display: flex flex-wrap: wrap .message @extend %message-shared .success @extend %message-shared border-color: green .error @extend %message-shared border-color: red .warning @extend %message-shared border-color: yellow ``` ### CSS Output ``` / This CSS will print because %message-shared is extended. / .warning, .error, .success, .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; } ``` What the above code does is tells `.message`, `.success`, `.error`, and `.warning` to behave just like `%message-shared`. That means anywhere that `%message-shared` shows up, `.message`, `.success`, `.error`, & `.warning` will too. The magic happens in the generated CSS, where each of these classes will get the same CSS properties as `%message-shared`. This helps you avoid having to write multiple class names on HTML elements. You can extend most simple CSS selectors in addition to placeholder classes in Sass, but using placeholders is the easiest way to make sure you aren’t extending a class that’s nested elsewhere in your styles, which can result in unintended selectors in your CSS. Note that the CSS in `%equal-heights` isn’t generated, because `%equal-heights` is never extended. ** ## Operators[Operators permalink](https://sass-lang.com/guide/#operators) Doing math in your CSS is very helpful. Sass has a handful of standard math operators like `+`, `-`, ``, `math.div()`, and `%`. In our example we’re going to do some simple math to calculate widths for an `article` and `aside`. - [SCSS](https://sass-lang.com/guide/#example-operators-scss) - [Sass](https://sass-lang.com/guide/#example-operators-sass) - [CSS](https://sass-lang.com/guide/#example-operators-css) [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJx1zUEKwjAQheF9TjEEBBUtCULBFMF7iIuQTO1A0pQk1Rbx7kbFna5m88/3pDyOCYEnnZLyOne8Yawyoc+aeoxwZwCW0uD0rKB1ODXswZiOmYzDUwwOD9yXlJ/f6Y1s7hS8oMrSdVkLMUwb2NflrGANUojFR0hkv/8m+MGhx7IZ5z/Q7icEJYgX6rcO26xAjzkU/QnQWUHM) ### SCSS Syntax ``` @use "sass:math"; .container { display: flex; } article[role="main"] { width: math.div(600px, 960px) 100%; } aside[role="complementary"] { width: math.div(300px, 960px) * 100%; margin-left: auto; } ``` [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJxtjc0KwjAQhO95iiUgqGhJEQoGBN9DPCzJ1i7kjyTV9u2NB289zWHm+0b197kQyIKlaI91kkJ0JoaKHCgLAMslOVw1jI4WITBXNo4eOTq6Sd9W8tlWH7Z10vATdJbf+0GptJzgOrQ4wBF6pXYNLmz/qIk+OfLUnvK66bhsOaD1+cXh7GisGnCu8QvSOz0+) ### Sass Syntax ``` @use "sass:math" .container display: flex article[role="main"] width: math.div(600px, 960px) * 100% aside[role="complementary"] width: math.div(300px, 960px) * 100% margin-left: auto ``` ### CSS Output ``` .container { display: flex; } article[role=main] { width: 62.5%; } aside[role=complementary] { width: 31.25%; margin-left: auto; } ``` We’ve created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle. - Current Releases: - [Dart Sass](https://sass-lang.com/dart-sass) [1\.99.0](https://github.com/sass/dart-sass/releases/tag/1.99.0) - [LibSass](https://sass-lang.com/libsass) ⚰ - [Ruby Sass](https://sass-lang.com/ruby-sass) ⚰ - [Implementation Guide](https://sass-lang.com/implementation) Sass © 2006–2026 the Sass team, and numerous contributors. It is available for use and modification under the [MIT License](https://github.com/sass/dart-sass/blob/main/LICENSE). - [Sass on GitHub](https://github.com/sass) - [Website Source Code](https://github.com/sass/sass-site) - [Style Guide](https://sass-lang.com/styleguide) - [Community Guidelines](https://sass-lang.com/community-guidelines) [@sass@front-end.social](https://front-end.social/@sass) [![Deploys by Netlify](https://www.netlify.com/v3/img/components/netlify-color-bg.svg)](https://www.netlify.com/)
Readable Markdown	Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. [Go here](https://sass-lang.com/install) if you want to learn how to get everything set up. ## Preprocessing[Preprocessing permalink](https://sass-lang.com/guide/#preprocessing) CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass has features that don’t exist in CSS yet like nesting, mixins, inheritance, and other nifty goodies that help you write robust, maintainable CSS. Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website. The most direct way to make this happen is in your terminal. Once Sass is installed, you can compile your Sass to CSS using the `sass` command. You’ll need to tell Sass which file to build from, and where to output CSS to. For example, running `sass input.scss output.css` from your terminal would take a single Sass file, `input.scss`, and compile that file to `output.css`. You can also watch individual files or directories with the `--watch` flag. The watch flag tells Sass to watch your source files for changes, and re-compile CSS each time you save your Sass. If you wanted to watch (instead of manually build) your `input.scss` file, you’d just add the watch flag to your command, like so: ``` sass --watch input.scss output.css ``` You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. In this example: ``` sass --watch app/sass:public/stylesheets ``` Sass would watch all files in the `app/sass` folder for changes, and compile CSS to the `public/stylesheets` folder. ### 💡 Fun fact: Sass has two syntaxes! The SCSS syntax (`.scss`) is used most commonly. It’s a superset of CSS, which means all valid CSS is also valid SCSS. The indented syntax (`.sass`) is more unusual: it uses indentation rather than curly braces to nest statements, and newlines instead of semicolons to separate them. All our examples are available in both syntaxes. * ## Variables[Variables permalink](https://sass-lang.com/guide/#variables) Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Sass uses the `$` symbol to make something a variable. Here’s an example: - [SCSS](https://sass-lang.com/guide/#example-variables-scss) - [Sass](https://sass-lang.com/guide/#example-variables-sass) - [CSS](https://sass-lang.com/guide/#example-variables-css) [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJwzNFRJy88r0S0uSUzOtlLwSM0pSy3JTE7UUShOzCvWLU4tykyz5lIpKMrMTSyq1E3Oz8kvslJQNjY2tubiSspPqVSo5lJQABlhpWBoYKCqgGScNVAGqgHVAGuuWgA2kiah) ### SCSS Syntax ``` $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } ``` [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJwzMFRJy88r0S0uSUzOtlLwSM0pSy3JTE7UUShOzCvWLU4tykzjUikoysxNLKrUTc7PyS+yUlA2Njbm4krKT6nkUlAAabdSMDQwUFVAMgooAVWMqhkAF7Qkkg==) ### Sass Syntax ``` $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color ``` ### CSS Output ``` body { font: 100% Helvetica, sans-serif; color: #333; } ``` When the Sass is processed, it takes the variables we define for the `$font-stack` and `$primary-color` and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site. * ## Nesting[Nesting permalink](https://sass-lang.com/guide/#nesting) When writing HTML you’ve probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn’t. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice. With that in mind, here’s an example of some typical styles for a site’s navigation: - [SCSS](https://sass-lang.com/guide/#example-nesting-scss) - [Sass](https://sass-lang.com/guide/#example-nesting-sass) - [CSS](https://sass-lang.com/guide/#example-nesting-css) [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJxVjUEKwjAURPc5xVwgYFy4SE/zbUL5+P0JTZSU0rtLGym6GmbewHNO6Y3VAC85AnjSPLF6XIajZgqBdTq7cKm21EWihyaN+7oZswOsCFyy0OLBKqzR3iWNj6Ef6Cs4Px3+W265wV1z63ONrdoQxzRT5aS/xu0DeoU2lQ==) ### SCSS Syntax ``` nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } ``` [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJxVjUEKhDAMRfc9RS5QUBcuepuMDRLMpMVmhnp7teKimw//Pfh/GBX/DuAnVwB8cV9ZAwytZYyRdX2rcDFf7BAKoEnJuZs1FblkwSMAq7CS/0hatttjrx/ebc+5wjjl2qhRNR9pSTsaJ31+TtSwMEM=) ### Sass Syntax ``` nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: none ``` ### CSS Output ``` nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } ``` You’ll notice that the `ul`, `li`, and `a` selectors are nested inside the `nav` selector. This is a great way to organize your CSS and make it more readable. * ## Partials[Partials permalink](https://sass-lang.com/guide/#partials) You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is a Sass file named with a leading underscore. You might name it something like `_partial.scss`. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the `@use` rule. * ## Modules[Modules permalink](https://sass-lang.com/guide/#modules) Compatibility: Dart Sasssince 1.23.0 LibSass✗ Ruby Sass✗ Only Dart Sass currently supports `@use`. Users of other implementations must use the [`@import` rule](https://sass-lang.com/documentation/at-rules/import) instead. You don’t have to write all your Sass in a single file. You can split it up however you want with the `@use` rule. This rule loads another Sass file as a module, which means you can refer to its variables, [mixins](https://sass-lang.com/guide/#mixins), and [functions](https://sass-lang.com/documentation/at-rules/function) in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output\! - [SCSS](https://sass-lang.com/guide/#example-modules-scss) - [Sass](https://sass-lang.com/guide/#example-modules-sass) - [CSS](https://sass-lang.com/guide/#example-modules-css) ### SCSS Syntax ``` // _base.scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } ``` ``` // styles.scss @use 'base'; .inverse { background-color: base.$primary-color; color: white; } ``` ### Sass Syntax ``` // _base.sass $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color ``` ``` // styles.sass @use 'base' .inverse background-color: base.$primary-color color: white ``` ### CSS Output ``` body { font: 100% Helvetica, sans-serif; color: #333; } .inverse { background-color: #333; color: white; } ``` Notice we’re using `@use 'base';` in the `styles.scss` file. When you use a file you don’t need to include the file extension. Sass is smart and will figure it out for you. * ## Mixins[Mixins permalink](https://sass-lang.com/guide/#mixins) Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. It helps keep your Sass very DRY. You can even pass in values to make your mixin more flexible. Here’s an example for `theme`. - [SCSS](https://sass-lang.com/guide/#example-mixins-scss) - [Sass](https://sass-lang.com/guide/#example-mixins-sass) - [CSS](https://sass-lang.com/guide/#example-mixins-css) [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJyFjrEKwjAQhvc8xYEOFjRYwSVdOgjdfYM0ubShbSKXBivSd9fGLoIgNxz89/0fl+flYCfrYGxxwN02LQEXSV1F8pHBkwHUUnUN+ei0gA9RLKmfDqGV2t8FHN+T3yagpparZA/8dM4WUPnek4CNMaZgM2PcOuOTuLRO9VEjrNKZcdkjjT+OX69dUWeJDlEpDOEfXxGiWxovNV1Lkw==) ### SCSS Syntax ``` @mixin theme($theme: DarkGray) { background: $theme; box-shadow: 0 0 1px rgba($theme, .25); color: #fff; } .info { @include theme; } .alert { @include theme($theme: DarkRed); } .success { @include theme($theme: DarkGreen); } ``` [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJwzMHTIzazIzFMoyUjNTdVQAVNWCi6JRdnuRYmVmlwKCkmJydnpRfmleSlWChB5kGB+hW5xRmJKfrmVggEQGhZUKBSlJyVCTdBR0DMyBWlOzs/JL7JSUE5LS+Pi0svMS8sHCjpk5iXnlKakQiwFiifmpBaVYEiguCYoNUUTqLK4NDk5tbgYv1r3otTUPE0AvxxFvA==) ### Sass Syntax ``` @mixin theme($theme: DarkGray) background: $theme box-shadow: 0 0 1px rgba($theme, .25) color: #fff .info @include theme .alert @include theme($theme: DarkRed) .success @include theme($theme: DarkGreen) ``` ### CSS Output ``` .info { background: DarkGray; box-shadow: 0 0 1px rgba(169, 169, 169, 0.25); color: #fff; } .alert { background: DarkRed; box-shadow: 0 0 1px rgba(139, 0, 0, 0.25); color: #fff; } .success { background: DarkGreen; box-shadow: 0 0 1px rgba(0, 100, 0, 0.25); color: #fff; } ``` To create a mixin you use the `@mixin` directive and give it a name. We’ve named our mixin `theme`. We’re also using the variable `$theme` inside the parentheses so we can pass in a `theme` of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with `@include` followed by the name of the mixin. * ## Extend/Inheritance[Extend/Inheritance permalink](https://sass-lang.com/guide/#extend-inheritance) Using `@extend` lets you share a set of CSS properties from one selector to another. In our example we’re going to create a simple series of messaging for errors, warnings and successes using another feature which goes hand in hand with extend, placeholder classes. A placeholder class is a special type of class that only prints when it is extended, and can help keep your compiled CSS neat and clean. - [SCSS](https://sass-lang.com/guide/#example-extend-inheritance-scss) - [Sass](https://sass-lang.com/guide/#example-extend-inheritance-sass) - [CSS](https://sass-lang.com/guide/#example-extend-inheritance-css) [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJyVUEFqwzAQvOsVC6EUAo5rfHMuhT4h/YAibWzBVlJ37dqh9O+V7KQNPgRykWBnZmdmq6rcwnvnBN4OBxgdEUR2vocjGj0IwtMHiugWC+k0o4XExKlHb9HuYFuqNf6tAI6BLXIDVZxAAjkLG2PMPiFRW+t8m6CXOOWBCRQSc1PX9V79KFWWN2mCf+7XcfBz0FR06Nqul5zG4xfyfya1YuQ81kkkfW7gRDi75r8YWccG8js77y5FZsXrsm/dfiHKYEwa3yder1BcGraM6Bc9Mgd+TP3nPWr26YCPqc9IFMa04BeaM6IW) ### SCSS Syntax ``` /* This CSS will print because %message-shared is extended. / %message-shared { border: 1px solid #ccc; padding: 10px; color: #333; } // This CSS won't print because %equal-heights is never extended. %equal-heights { display: flex; flex-wrap: wrap; } .message { @extend %message-shared; } .success { @extend %message-shared; border-color: green; } .error { @extend %message-shared; border-color: red; } .warning { @extend %message-shared; border-color: yellow; } ``` [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJyVUEFqwzAQvOsVCyEUAo4TfPOp0CekH1CkqS3YSsrKrp3fZ01S2vpQyEWLdmZ2Z/ZwrHf03odCb6cTTYGZsoQ40BnOjgW0/UQptkNVeivwpEzMA6KH39OuNivcEJ2TeEhLxzxTSRw8bZxzCmTrfYidIoc8698lTsrbNE1jTF3/spHiy7D2gctoueoRun4oi42IL8iPGfOXofN9KJnttaUPxrJvKdUkNre0vMbsH94Ve73PWcdVThmd094/nO/I1SNQJ0BUJUSSPKG775usRL3SE7ormNN0AxfumIU=) ### Sass Syntax ``` / This CSS will print because %message-shared is extended. / %message-shared border: 1px solid #ccc padding: 10px color: #333 // This CSS won't print because %equal-heights is never extended. %equal-heights display: flex flex-wrap: wrap .message @extend %message-shared .success @extend %message-shared border-color: green .error @extend %message-shared border-color: red .warning @extend %message-shared border-color: yellow ``` ### CSS Output ``` / This CSS will print because %message-shared is extended. / .warning, .error, .success, .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; } ``` What the above code does is tells `.message`, `.success`, `.error`, and `.warning` to behave just like `%message-shared`. That means anywhere that `%message-shared` shows up, `.message`, `.success`, `.error`, & `.warning` will too. The magic happens in the generated CSS, where each of these classes will get the same CSS properties as `%message-shared`. This helps you avoid having to write multiple class names on HTML elements. You can extend most simple CSS selectors in addition to placeholder classes in Sass, but using placeholders is the easiest way to make sure you aren’t extending a class that’s nested elsewhere in your styles, which can result in unintended selectors in your CSS. Note that the CSS in `%equal-heights` isn’t generated, because `%equal-heights` is never extended. ** ## Operators[Operators permalink](https://sass-lang.com/guide/#operators) Doing math in your CSS is very helpful. Sass has a handful of standard math operators like `+`, `-`, ``, `math.div()`, and `%`. In our example we’re going to do some simple math to calculate widths for an `article` and `aside`. - [SCSS](https://sass-lang.com/guide/#example-operators-scss) - [Sass](https://sass-lang.com/guide/#example-operators-sass) - [CSS](https://sass-lang.com/guide/#example-operators-css) [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJx1zUEKwjAQheF9TjEEBBUtCULBFMF7iIuQTO1A0pQk1Rbx7kbFna5m88/3pDyOCYEnnZLyOne8Yawyoc+aeoxwZwCW0uD0rKB1ODXswZiOmYzDUwwOD9yXlJ/f6Y1s7hS8oMrSdVkLMUwb2NflrGANUojFR0hkv/8m+MGhx7IZ5z/Q7icEJYgX6rcO26xAjzkU/QnQWUHM) ### SCSS Syntax ``` @use "sass:math"; .container { display: flex; } article[role="main"] { width: math.div(600px, 960px) 100%; } aside[role="complementary"] { width: math.div(300px, 960px) * 100%; margin-left: auto; } ``` [![Sass](https://sass-lang.com/assets/img/logos/logo.svg) Playground](https://sass-lang.com/playground#eJxtjc0KwjAQhO95iiUgqGhJEQoGBN9DPCzJ1i7kjyTV9u2NB289zWHm+0b197kQyIKlaI91kkJ0JoaKHCgLAMslOVw1jI4WITBXNo4eOTq6Sd9W8tlWH7Z10vATdJbf+0GptJzgOrQ4wBF6pXYNLmz/qIk+OfLUnvK66bhsOaD1+cXh7GisGnCu8QvSOz0+) ### Sass Syntax ``` @use "sass:math" .container display: flex article[role="main"] width: math.div(600px, 960px) * 100% aside[role="complementary"] width: math.div(300px, 960px) * 100% margin-left: auto ``` ### CSS Output ``` .container { display: flex; } article[role=main] { width: 62.5%; } aside[role=complementary] { width: 31.25%; margin-left: auto; } ``` We’ve created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle.
Shard	112 (laksa)
Root Hash	7297080260423426912
Unparsed URL	com,sass-lang!/guide/ s443